メニュー：概要

Menuコントロールは、1つのテキスト要素とドロップダウンリストを表示します。ドロップダウンリストには、ユーザーがクリックまたはタッチすることで呼び出すことができるコマンドが含まれます。このコントロールはComboBoxを継承するため、ComboBoxコントロールと同様に、ItemsSourceプロパティを使用してコントロールに項目を挿入したりスタイルを設定することができます。ComboBoxコントロールと同様に、ユーザーがメニューから項目を選択すると、MenuコントロールはItemClickedイベントを発生します。イベントハンドラでは、メニューのselectedItemプロパティを調べて、クリックされた項目を特定し、適切なアクションを実行できます。

次の例は、Menuコントロールの作成方法とitemClickedイベントの処理方法を示しています。

HTML

<div id="menuFile">
    ファイル
    <div>
        <span class="glyphicon glyphicon-asterisk"></span>&nbsp;&nbsp;
        <b>新規</b>
        <br>
        <small><i>新しいファイルを作成する</i></small></div>
    <div>
        <span class="glyphicon glyphicon-folder-open"></span>&nbsp;&nbsp;
        <b>開く</b>
        <br>
        <small><i>既存のファイルやフォルダを開く</i></small></div>
    <div>
        <span class="glyphicon glyphicon-floppy-disk"></span>&nbsp;&nbsp;
        <b>保存</b>
        <br>
        <small><i>現在のファイルを保存する</i></small></div>
    <div class="wj-separator"></div>
    <div>
        <span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;
        <b>終了</b>
        <br>
        <small><i>アプリケーションを終了する</i></small></div>
</div>

JavaScript

import * as input from '@mescius/wijmo.input';

function init() {
    // ファイルメニューを作成します
    let menuFile = createMenu('menuFile');
    menuFile.itemClicked.addHandler(menuClick);
    
    let menuEdit = createMenu('menuEdit');
    menuEdit.itemClicked.addHandler(menuClick);
    
    // 両方に同じイベントハンドラを使用します
    function menuClick(sender) {
        alert(`メニュー「${sender.header}」からオプション「${sender.selectedIndex}」が選択されました`);
    }
    
    // マークアップからメニューを作成します
    function createMenu(elementId) {
        // get host element, header, items
        let host = document.getElementById(elementId), header = host.firstChild.textContent.trim(), items = host.querySelectorAll('div'), menuItems = [];
        
        for (let i = 0; i < items.length; i++) {
            let item = items[i];
            menuItems.push(item.outerHTML);
        }
        
        // ホストをクリアしてメニューをインスタンス化します
        host.innerHTML = '';
        let menu = new input.Menu(host, {
            header: header,
            itemsSource: menuItems
        });
        
        // 完了、メニューに戻ります
        return menu;
    }
}