アプリバー/メニュー/HTMLコントロール (3/4)
作成:2012-11-15 08:05
更新:2012-11-15 08:05
更新:2012-11-15 08:05
■アプリバーからフライアウトを呼び出す
ポップアップメニューとアプリバーは、連携して利用されることがよくあります。つまりアプリバーのアイコンをクリックするとメニューがポップアップし、それを選んで操作する、といったやり方です。
先ほどの例では、winControlのshowを使ってポップアップメニューを呼び出しました。このshowは、フライアウトでも使いましたね。つまりポップアップメニューも、一種のフライアウトとして扱われていると考えればよいでしょう。
フライアウトの呼び出しは、実は<button>タグだけで行うことができるのです。1行もスクリプトを書く必要はありません。「type」を「flyout」に設定すれば良いのです。以下に書き方を整理しましょう。
実際の利用例を下に掲載しておきます。これらのタグをHTMLに追加して実行し、アプリバーのアイコンをクリックしてみましょう。ボタンのすぐ上にメニューが現れます。
先ほどの例では、winControlのshowを使ってポップアップメニューを呼び出しました。このshowは、フライアウトでも使いましたね。つまりポップアップメニューも、一種のフライアウトとして扱われていると考えればよいでしょう。
フライアウトの呼び出しは、実は<button>タグだけで行うことができるのです。1行もスクリプトを書く必要はありません。「type」を「flyout」に設定すれば良いのです。以下に書き方を整理しましょう。
<button data-win-control="WinJS.UI.AppBarCommand"ポイントは、もちろんdata-win-options属性です。「type」に「flyout」を指定し、そして「flyout」という項目に、フライアウトとして表示するタグのID名を指定します。これで、このボタンをクリックすると、指定のタグがフライアウトとして表示されるようになるのです。
data-win-options="{type:'flyout', flyout:フライアウトの指定 }">
実際の利用例を下に掲載しておきます。これらのタグをHTMLに追加して実行し、アプリバーのアイコンをクリックしてみましょう。ボタンのすぐ上にメニューが現れます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※default.htmlに追加するタグ <div data-win-control="WinJS.UI.AppBar"> <button id="appbar-btn1" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon:'more', label:'menu', section:'global', type:'flyout', flyout:'menu1'}"></button> </div> <div data-win-control="WinJS.UI.Menu" id="menu1"> <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{label:'First Item', section:'global'}"></button> <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{label:'Toggle Item', type:'toggle', selected:'true', section:'global'}" id="togglebtn1"></button> <hr data-win-control="WinJS.UI.MenuCommand" data-win-options="{type:'separator', section:'global'}" /> <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{label:'Last Item', section:'global'}"></button> </div>
※関連コンテンツ
「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る