jQuery EasyUI 菜單與按鈕插件 – Menu 菜單

2018-09-05 12:19 更新

jQuery EasyUI 菜單與按鈕插件 - Menu 菜單

jQuery EasyUI 插件 jQuery EasyUI 插件

通過 $.fn.menu.defaults 重寫默認的 defaults。

菜單（Menu）通常用于上下文菜單。它是創(chuàng)建其他菜單組件（比如：menubutton、splitbutton）的基礎組件。它也能用于導航和執(zhí)行命令。

用法

創(chuàng)建菜單（Menu）

通過標記創(chuàng)建菜單（menu）應該添加 'easyui-menu' class 到 <div> 標記。每個菜單項（menu item）通過 <div> 標記創(chuàng)建。我們可以添加 'iconCls' 屬性到菜單項（menu item），以定義一個顯示在菜單項（menu item）左邊的圖標。添加 'menu-sep' class 到菜單項（menu item）將產(chǎn)生一個菜單（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）并偵聽 'onClick' 事件。

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

顯示菜單（Menu）

當菜單（menu）被創(chuàng)建時，它是隱藏不可見的。調用 'show' 方法來顯示菜單（menu）。

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

菜單項

菜單項（menu item）代表一個顯示在菜單中的單獨的項目。它包含下列屬性：

名稱 類型 描述 默認值
id string 菜單項（menu item）的 id 屬性。
text string 項目文本。
iconCls string 在項目左邊顯示一個 16x16 圖標的 CSS class。
href string 當點擊菜單項（menu item）時設置頁面位置。
disabled boolean 定義是否禁用菜單項（menu item）。 false
onclick function 當點擊菜單項（menu item）時被調用的函數(shù)。

菜單屬性

名稱 類型 描述 默認值
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

菜單事件

名稱 參數(shù) 描述
onShow none 當菜單（menu）顯示之后觸發(fā)。
onHide none 當菜單（menu）隱藏之后觸發(fā)。
onClick item 當點擊菜單項（menu item）時觸發(fā)。下面的實例演示如何處理所有菜單項點擊： 
<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 返回選項（options）對象。
show pos 在指定的位置顯示菜單（menu）。
pos 參數(shù)有兩個屬性：
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' 參數(shù)包含兩個屬性：
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' 參數(shù)包含兩個屬性：
target：DOM 對象，即菜單項（menu item）。
iconCls：新圖標的 CSS class。

代碼實例： 
$('#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' 參數(shù)指示新的項目屬性。默認情況下，新增的項目將作為頂級菜單項（menu item）。如需追加一個子菜單項，需設置 'parent' 屬性，用來指示已經(jīng)有子項目的父項目元素。
代碼實例： 
// 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 插件
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號