當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

EasyUI中菜单Menu的简单使用

發布時間：2025/3/19 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 EasyUI中菜单Menu的简单使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

場景

效果

菜單項

菜單項（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）時被調用的函數。	?

菜單屬性

名稱類型描述默認值

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 參數有兩個屬性： 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' 參數包含兩個屬性： 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' 參數包含兩個屬性： 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' 參數指示新的項目屬性。默認情況下，新增的項目將作為頂級菜單項（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）。

實現

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

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <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> <script type="text/javascript">$(function () {$('#mm').menu('show', {left: 200,top: 100});})</script> </body> </html>

總結

以上是生活随笔為你收集整理的EasyUI中菜单Menu的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： EasyUI中Tabs标签页的简单使用
下一篇： SpringBoot+AntV实现饼状图