免費(fèi)AI編程助手
jQuery EasyUI 菜單與按鈕插件 – Menu 菜單
2018-09-05 12:19 更新
jQuery EasyUI 菜單與按鈕插件 - Menu 菜單
jQuery EasyUI 插件 通過(guò) $.fn.menu.defaults 重寫(xiě)默認(rèn)的 defaults。
菜單（Menu）通常用于上下文菜單。它是創(chuàng)建其他菜單組件（比如：menubutton、splitbutton）的基礎(chǔ)組件。它也能用于導(dǎo)航和執(zhí)行命令。
用法
創(chuàng)建菜單（Menu）
通過(guò)標(biāo)記創(chuàng)建菜單（menu）應(yīng)該添加 'easyui-menu' class 到 <div> 標(biāo)記。每個(gè)菜單項(xiàng)（menu item）通過(guò) <div> 標(biāo)記創(chuàng)建。我們可以添加 'iconCls' 屬性到菜單項(xiàng)（menu item），以定義一個(gè)顯示在菜單項(xiàng)（menu item）左邊的圖標(biāo)。添加 'menu-sep' class 到菜單項(xiàng)（menu item）將產(chǎn)生一個(gè)菜單（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>
編程創(chuàng)建菜單（menu）并偵聽(tīng) 'onClick' 事件。
$('#mm').menu({
onClick:function(item){
//...
}
});
顯示菜單（Menu）
當(dāng)菜單（menu）被創(chuàng)建時(shí)，它是隱藏不可見(jiàn)的。調(diào)用 'show' 方法來(lái)顯示菜單（menu）。
$('#mm').menu('show', {
left: 200,
top: 100
});
菜單項(xiàng)
菜單項(xiàng)（menu item）代表一個(gè)顯示在菜單中的單獨(dú)的項(xiàng)目。它包含下列屬性：
| 名稱 | 類型 | 描述 | 默認(rèn)值 |
|---|---|---|---|
| id | string | 菜單項(xiàng)（menu item）的 id 屬性。 | |
| text | string | 項(xiàng)目文本。 | |
| iconCls | string | 在項(xiàng)目左邊顯示一個(gè) 16x16 圖標(biāo)的 CSS class。 | |
| href | string | 當(dāng)點(diǎn)擊菜單項(xiàng)（menu item）時(shí)設(shè)置頁(yè)面位置。 | |
| disabled | boolean | 定義是否禁用菜單項(xiàng)（menu item）。 | false |
| onclick | function | 當(dāng)點(diǎn)擊菜單項(xiàng)（menu item）時(shí)被調(diào)用的函數(shù)。 |
菜單屬性
| 名稱 | 類型 | 描述 | 默認(rèn)值 |
|---|---|---|---|
| zIndex | number | 菜單（Menu）的 z-index 樣式，從它開(kāi)始增加。 | 110000 |
| left | number | 菜單（Menu）的左邊位置。 | 0 |
| top | number | 菜單（Menu）的頂部位置。 | 0 |
| minWidth | number | 菜單（Menu）的最小寬度。該屬性自版本 1.3.2 起可用。 | 120 |
| hideOnUnhover | boolean | 如果設(shè)置為 true，當(dāng)鼠標(biāo)離開(kāi)它時(shí)自動(dòng)隱藏菜單（menu）。該屬性自版本 1.3.5 起可用。 | true |
菜單事件
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| onShow | none | 當(dāng)菜單（menu）顯示之后觸發(fā)。 |
| onHide | none | 當(dāng)菜單（menu）隱藏之后觸發(fā)。 |
| onClick | item | 當(dāng)點(diǎn)擊菜單項(xiàng)（menu item）時(shí)觸發(fā)。下面的實(shí)例演示如何處理所有菜單項(xiàng)點(diǎn)擊：
<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>
|
菜單方法
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| options | none | 返回選項(xiàng)（options）對(duì)象。 |
| show | pos | 在指定的位置顯示菜單（menu）。 pos 參數(shù)有兩個(gè)屬性： left：新的左邊位置。 top：新的頂部位置。 |
| hide | none | 隱藏菜單（menu）。 |
| destroy | none | 銷毀菜單（menu）。 |
| getItem | itemEl | 獲取包含 'target' 屬性（指示項(xiàng)目 DOM 元素）的菜單項(xiàng)（menu item）屬性。下面的實(shí)例演示如何通過(guò) id 獲取指定的項(xiàng)目：
<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 | 給指定的菜單項(xiàng)（menu item）設(shè)置文本。'param' 參數(shù)包含兩個(gè)屬性： target：DOM 對(duì)象，被設(shè)定的菜單項(xiàng)（menu item）。 text：string，新的文本值。 代碼實(shí)例：
var item = $('#mm').menu('findItem', 'Save');
$('#mm').menu('setText', {
target: item.target,
text: 'Saving'
});
|
| setIcon | param | 給指定的菜單項(xiàng)（menu item）設(shè)置圖標(biāo)。'param' 參數(shù)包含兩個(gè)屬性： target：DOM 對(duì)象，即菜單項(xiàng)（menu item）。 iconCls：新圖標(biāo)的 CSS class。 代碼實(shí)例：
$('#mm').menu('setIcon', {
target: $('#m-open')[0],
iconCls: 'icon-closed'
});
|
| findItem | text | 找到指定的菜單項(xiàng)（menu item），返回對(duì)象與 getItem 方法相同。 代碼實(shí)例：
// find 'Open' item and disable it
var item = $('#mm').menu('findItem', 'Open');
$('#mm').menu('disableItem', item.target);
|
| appendItem | options | 追加一個(gè)新的菜單項(xiàng)（menu item），'param' 參數(shù)指示新的項(xiàng)目屬性。默認(rèn)情況下，新增的項(xiàng)目將作為頂級(jí)菜單項(xiàng)（menu item）。如需追加一個(gè)子菜單項(xiàng)，需設(shè)置 'parent' 屬性，用來(lái)指示已經(jīng)有子項(xiàng)目的父項(xiàng)目元素。 代碼實(shí)例：
// 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 | 移除指定的菜單項(xiàng)（menu item）。 |
| enableItem | itemEl | 啟用菜單項(xiàng)（menu item）。 |
| disableItem | itemEl | 禁用菜單項(xiàng)（menu item）。 |
jQuery EasyUI 插件 以上內(nèi)容是否對(duì)您有幫助：
更多建議：