back
アプリバー／メニュー／HTMLコントロール (3/4)
■アプリバーからフライアウトを呼び出す
ポップアップメニューとアプリバーは、連携して利用されることがよくあります。つまりアプリバーのアイコンをクリックするとメニューがポップアップし、それを選んで操作する、といったやり方です。
先ほどの例では、winControlのshowを使ってポップアップメニューを呼び出しました。このshowは、フライアウトでも使いましたね。つまりポップアップメニューも、一種のフライアウトとして扱われていると考えればよいでしょう。
フライアウトの呼び出しは、実は<button>タグだけで行うことができるのです。１行もスクリプトを書く必要はありません。「type」を「flyout」に設定すれば良いのです。以下に書き方を整理しましょう。
実際の利用例を下に掲載しておきます。これらのタグをHTMLに追加して実行し、アプリバーのアイコンをクリックしてみましょう。ボタンのすぐ上にメニューが現れます。
先ほどの例では、winControlのshowを使ってポップアップメニューを呼び出しました。このshowは、フライアウトでも使いましたね。つまりポップアップメニューも、一種のフライアウトとして扱われていると考えればよいでしょう。
フライアウトの呼び出しは、実は<button>タグだけで行うことができるのです。１行もスクリプトを書く必要はありません。「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>
| << 前へ | 次へ >> |