back
アプリバー／メニュー／HTMLコントロール (2/4)
■ポップアップメニュー（PopupMenu）を使おう
次に取り上げるのは「メニュー」です。メニューといっても、Modern UIのアプリには、いわゆるメニューバーはありません。アプリバーで表示されるのはアイコンですし……。ただし、ボタンをクリックして現れるポップアップメニューは健在です。
ポップアップメニューは、やはり<div>タグにdata-win-control属性を用意することで作ることができます。タグ内には<button>タグを使ってメニュー項目を用意します。こんな感じですね。
・通常のメニュー項目
・トグルメニュー項目
このメニューのチェック状態を調べるには、DOMオブジェクトを取得し、そのwinControlプロパティの「selected」の値を取得します。サンプルでは、ボタンをクリックした時、以下のようにしてチェック状態を取得しています。
・セパレーター
●メニューの表示
ここでは、show(event.target, "bottom"); というようにしてshowを呼び出しています。event.targetをアンカーにして、その下に表示させていた、というわけです。
ポップアップメニューは、やはり<div>タグにdata-win-control属性を用意することで作ることができます。タグ内には<button>タグを使ってメニュー項目を用意します。こんな感じですね。
<div data-win-control="WinJS.UI.Menu">実際の利用例を下のリスト欄に掲載しておきます。ここでは、チェックをON/OFFするトグルタイプのメニュー項目とセパレーターも入れてみました。それぞれのボタンのタグを見てみましょう。
<button data-win-control=
"WinJS.UI.MenuCommand">
……必要なだけ用意……
</div>
・通常のメニュー項目
<button data-win-control="WinJS.UI.MenuCommand"これは、アプリバーのところで使った<button>タグとほとんど同じですね。AppBarCommandがMenuCommandに変わっているだけです。data-win-options属性には、表示するテキストを示すlabelと、sectionの指定をしてあります。
data-win-options="{label:'表示テキスト', section:'global'}"></button>
・トグルメニュー項目
<button data-win-control="WinJS.UI.MenuCommand"</button>トグルタイプのメニューは、選ぶとメニュー項目の左側にチェックマークをON/OFFすることができます。これはdata-win-options属性に、「type:'toggle'」という値を用意します。これでトグルタイプのメニューとして表示されるようになります。チェックのON/OFFは、同様にdata-win-optionsに「selected」という項目で用意します。これがtrueならばチェックはONになります。
data-win-options="{label:'Second Item', type:'toggle', selected:'true',
section:'global'}">
このメニューのチェック状態を調べるには、DOMオブジェクトを取得し、そのwinControlプロパティの「selected」の値を取得します。サンプルでは、ボタンをクリックした時、以下のようにしてチェック状態を取得しています。
var sel = event.target.winControl.selected;イベント用の関数では引数にeventオブジェクトが渡され、そのtargetでイベントの発生したDOMオブジェクトが得られます。そのwinControl.selectedを取得すればチェック状態がわかる、というわけです。
・セパレーター
<hr data-win-control="WinJS.UI.MenuCommand"セパレーター（メニュー項目の間に表示される仕切り）は、data-win-options属性の中に「type:'separator'」という値を用意します。これでセパレーターとして表示されるようになります。注意したいのは、これは<div>タグではなく、<hr />タグを使う、という点でしょう。
data-win-options="{type:'separator', section:'global'}" />
●メニューの表示
《DOMオブジェクト》.winControl.show( DOMオブジェクト , 表示場所 );メニューの表示は、data-win-control="WinJS.UI.MenuCommand"を設定した<div>タグのDOMオブジェクトからwinControl.showを呼び出します。引数には、表示場所の基準となるDOMオブジェクト（アンカー）と、表示場所を示す値（"top", "bottom", "right", "left"）を指定します。これは、フライアウトを表示する時と同じですね。
ここでは、show(event.target, "bottom"); というようにしてshowを呼び出しています。event.targetをアンカーにして、その下に表示させていた、というわけです。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
※default.htmlへの追記
<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:'Second Item', tye:'toggle', selected:'true', section:'global'}"></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>
※app.onactivatedに用意する記述
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.
ApplicationExecutionState.terminated) {} else {}
args.setPromise(WinJS.UI.processAll().then(function completed() {
var button1 = document.getElementById("button1");
button1.addEventListener("click", button1Click, false);
var tgglbtn1 = document.getElementById("togglebtn1");
tgglbtn1.addEventListener("click", tgglbtn1Click, false);
}));
}
}
※イベント処理用関数
function button1Click(event) {
document.getElementById("menu1").winControl.show(event.target, "bottom");
}
function tgglbtn1Click(event) {
var sel = event.target.winControl.selected;
……処理を用意……
}
| << 前へ | 次へ >> |