jQuery EasyUI メニューとボタンプラグイン -Menu メニュー

jQuery EasyUI 插件jQuery EasyUI プラグイン

$.fn.menu.defaults を使用してデフォルトの defaults を書き換えます。

メニュー（Menu）は通常、コンテキストメニューに使用されます。これは、他のメニューコンポーネント（menubutton、splitbuttonなど）を作成するための基本コンポーネントです。また、ナビゲーションやコマンドの実行にも使用できます。

使用方法

メニュー（Menu）の作成

マークアップでメニュー（menu）を作成するには、<div> タグに 'easyui-menu' クラスを追加します。各メニュー項目（menu item）は <div> タグで作成します。メニュー項目（menu item）に 'iconCls' プロパティを追加すると、メニュー項目（menu item）の左側に表示されるアイコンを定義できます。メニュー項目（menu item）に 'menu-sep' クラスを追加すると、メニュー（menu）の区切り線が生成されます。

<div id="mm" class="easyui-menu" style="width:120px;">
    <div>New</div>
    <div>
        <span>Open</span>
        <div style="width:150px;">
            <div><b>Word</b></div>
            <div>Excel</div>
            <div>PowerPoint</div>
        </div>
    </div>
    <div data-options="iconCls:'icon-save'">Save</div>
    <div class="menu-sep"></div>
    <div>Exit</div>
</div>

プログラムでメニュー（menu）を作成し、'onClick' イベントをリッスンします。

$('#mm').menu({
    onClick:function(item){
        //...
    }
});

メニュー（Menu）の表示

メニュー（menu）が作成されると、非表示になります。'show' メソッドを呼び出すとメニュー（menu）が表示されます。

$('#mm').menu('show', {
    left: 200,
    top: 100
});

メニュー項目

メニュー項目（menu item）は、メニュー内に表示される個々の項目を表します。次のプロパティを含みます:

名前 型 説明 デフォルト値
id string メニュー項目（menu item）の id プロパティ。
text string 項目のテキスト。
iconCls string 項目の左側に 16x16 アイコンを表示する CSS クラス。
href string メニュー項目（menu item）がクリックされたときに設定するページの場所。
disabled boolean メニュー項目（menu item）を無効にするかどうかを定義します。 false
onclick function メニュー項目（menu item）がクリックされたときに呼び出される関数。

メニューのプロパティ

名前 型 説明 デフォルト値
zIndex number メニュー（Menu）の z-index スタイル。この値から増加します。 110000
left number メニュー（Menu）の左位置。 0
top number メニュー（Menu）の上位置。 0
minWidth number メニュー（Menu）の最小幅。このプロパティはバージョン 1.3.2 以降で使用できます。 120
hideOnUnhover boolean true に設定すると、マウスがメニュー（menu）から離れたときに自動的に非表示になります。このプロパティはバージョン 1.3.5 以降で使用できます。 true

メニューのイベント

名前 パラメータ 説明
onShow none メニュー（menu）が表示された後にトリガーされます。
onHide none メニュー（menu）が非表示になった後にトリガーされます。
onClick item メニュー項目（menu item）がクリックされたときにトリガーされます。次の例は、すべてのメニュー項目のクリックを処理する方法を示しています:
<div class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;">
    <div data-options="name:'new'">New</div>
    <div data-options="name:'save',iconCls:'icon-save'">Save</div>
    <div data-options="name:'print',iconCls:'icon-print'">Print</div>
    <div class="menu-sep"></div>
    <div data-options="name:'exit'">Exit</div>
</div>
<script type="text/javascript">
    function menuHandler(item){
        alert(item.name)
    }
</script>

メニューのメソッド

名前 パラメータ 説明
options none オプション（options）オブジェクトを返します。
show pos 指定した位置にメニュー（menu）を表示します。
pos パラメータには2つのプロパティがあります:
left: 新しい左位置。
top: 新しい上位置。
hide none メニュー（menu）を非表示にします。
destroy none メニュー（menu）を破棄します。
getItem itemEl 'target' プロパティ（項目の DOM 要素を示す）を含むメニュー項目（menu item）のプロパティを取得します。次の例は、id で指定した項目を取得する方法を示しています:
<div id="mm" class="easyui-menu" style="width:120px">
    <div>New</div>
    <div id="m-open">Open</div>
    <div>Save</div>
</div>

var itemEl = $('#m-open')[0];  // the menu item element
var item = $('#mm').menu('getItem', itemEl);
console.log(item);
setText param 指定したメニュー項目（menu item）にテキストを設定します。'param' パラメータには2つのプロパティが含まれます:
target: DOM オブジェクト。設定対象のメニュー項目（menu item）。
text: string。新しいテキスト値。

コード例:
var item = $('#mm').menu('findItem', 'Save');
$('#mm').menu('setText', {
    target: item.target,
    text: 'Saving'
});
setIcon param 指定したメニュー項目（menu item）にアイコンを設定します。'param' パラメータには2つのプロパティが含まれます:
target: DOM オブジェクト。つまりメニュー項目（menu item）。
iconCls: 新しいアイコンの CSS クラス。

コード例:
$('#mm').menu('setIcon', {
    target: $('#m-open')[0],
    iconCls: 'icon-closed'
});
findItem text 指定したメニュー項目（menu item）を検索し、getItem メソッドと同じオブジェクトを返します。
コード例:
// find 'Open' item and disable it
var item = $('#mm').menu('findItem', 'Open');
$('#mm').menu('disableItem', item.target);
appendItem options 新しいメニュー項目（menu item）を追加します。'param' パラメータは新しい項目のプロパティを示します。デフォルトでは、追加された項目はトップレベルのメニュー項目（menu item）になります。子メニュー項目を追加する場合は、'parent' プロパティを設定して、既に子項目を持つ親項目の要素を指定する必要があります。
コード例:
// append a top menu item
$('#mm').menu('appendItem', {
    text: 'New Item',
    iconCls: 'icon-ok',
    onclick: function(){alert('New Item')}
});
// append a menu separator
$('#mm').menu('appendItem', {
    separator: true
});
// append a sub menu item
var item = $('#mm').menu('findItem', 'Open');  // find 'Open' item
$('#mm').menu('appendItem', {
    parent: item.target,  // the parent item element
    text: 'Open Excel',
    iconCls: 'icon-excel',
    onclick: function(){alert('Open Excel')}
});
removeItem itemEl 指定したメニュー項目（menu item）を削除します。
enableItem itemEl メニュー項目（menu item）を有効にします。
disableItem itemEl メニュー項目（menu item）を無効にします。
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張機能