次の方法で共有

クイック スタート: メニューの追加 (HTML)

  • [アーティクル]

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

このクイック スタートでは、ユーザーにコマンドを提示するメニューの作成方法について説明します。(Windows のみ)

必要条件

JavaScript を使った初めての Windows ストア アプリの構築

ポップアップのガイドラインとチェック リスト

メニューの作成

この例では、ユーザーが [Respond] ボタンをクリックすると、メニューがボタンの上に表示されます。メニューは、JavaScript 用 Windows ライブラリのコントロール WinJS.UI.Menu で、<body> 要素の直接の子にする必要があります。


<body>
    <!-- Button that launches the respond menu. -->
    <button id="respondButton" aria-haspopup="true">Respond</button>

    <!-- Respond menu. -->
    <div id="respondFlyout" data-win-control="WinJS.UI.Menu">
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'alwaysSaveMenuItem',label:'Always save drafts',type:'toggle', selected:'true'}"></button>
        <hr data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'separator',type:'separator'}" />
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'replyMenuItem',label:'Reply'}"></button>
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'replyAllMenuItem',label:'Reply All'}"></button>
        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'forwardMenuItem',label:'Forward'}"></button>
    </div>
</body>

// Initialize WinJS controls.
WinJS.UI.processAll();

// Initialize event listeners.
document.getElementById("respondButton").addEventListener("click", showRespondFlyout, false);
document.getElementById("alwaysSaveMenuItem").addEventListener("click", alwaysSave, false);
document.getElementById("replyMenuItem").addEventListener("click", reply, false);
document.getElementById("replyAllMenuItem").addEventListener("click", replyAll, false);
document.getElementById("forwardMenuItem").addEventListener("click", forward, false);

// Command and menu functions.
function showFlyout(flyout, anchor, placement) {
    flyout.winControl.show(anchor, placement);
}
function showRespondFlyout() {
    showFlyout(respondFlyout, respondButton, "bottom");
}
function hideFlyout(flyout) {
    flyout.winControl.hide();
}
function alwaysSave() {
    var alwaysSaveState = document.getElementById("alwaysSaveMenuItem").winControl.selected;
}
function reply() {
    hideFlyout(respondFlyout);
}
function replyAll() {
    hideFlyout(respondFlyout);
}
function forward() {
    hideFlyout(respondFlyout);
}

要約

このクイック スタートでは、ユーザーにコマンドを提示するメニューを作りました。