libro
www.tuyano.com
JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門

アプリバー/メニュー/HTMLコントロール (3/4)

作成:2012-11-15 08:05
更新:2012-11-15 08:05

■アプリバーからフライアウトを呼び出す

ポップアップメニューとアプリバーは、連携して利用されることがよくあります。つまりアプリバーのアイコンをクリックするとメニューがポップアップし、それを選んで操作する、といったやり方です。

先ほどの例では、winControlshowを使ってポップアップメニューを呼び出しました。このshowは、フライアウトでも使いましたね。つまりポップアップメニューも、一種のフライアウトとして扱われていると考えればよいでしょう。

フライアウトの呼び出しは、実は<button>タグだけで行うことができるのです。1行もスクリプトを書く必要はありません。「type」を「flyout」に設定すれば良いのです。以下に書き方を整理しましょう。
<button data-win-control="WinJS.UI.AppBarCommand" 
    data-win-options="{type:'flyout', flyout:フライアウトの指定 }">
ポイントは、もちろんdata-win-options属性です。「type」に「flyout」を指定し、そして「flyout」という項目に、フライアウトとして表示するタグのID名を指定します。これで、このボタンをクリックすると、指定のタグがフライアウトとして表示されるようになるのです。

実際の利用例を下に掲載しておきます。これらのタグをHTMLに追加して実行し、アプリバーのアイコンをクリックしてみましょう。ボタンのすぐ上にメニューが現れます。

※プログラムリストが表示されない場合

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 アプリ・プログラミング入門」に戻る