16、Menu 菜單組件 · Jquery EasyUI 學習筆記

# 加載方式 > 菜單組件通常用于快捷菜單，在加載方式上，通過 class 或 JS 進行設置為菜單組件。然后，再通過 JS 事件部分再響應。 ``` <div id="box" class="easyui-menu"> <div>新建</div> <div> <span>打開</span>  <div style="width:150px;"> <div>Word</div> <div>Excel</div> <div>PowerPoint</div> </div> </div> <div data-options="iconCls:'icon-save'">保存</div> <div class="menu-sep"></div> <div>退出</div> </div> <script> $(function () { //鼠標右擊事件彈出菜單 $(document).on('contextmenu',function(e){ // 阻止系統默認彈出的菜單 e.preventDefault(); // 顯示自定義的菜單 $('#box').menu('show', { left : e.pageX, top : e.pageY }); }); }); </script> ``` # 菜單項屬性 | 屬性名 | 值 | 說明 | | --- | --- | | id | string | 菜單項 ID 屬性。| | text | string | 菜單項文本。| | iconCls | string | 顯示在菜單項左側的16x16像素圖標的CSS 類 ID。| | href | string | 設置點擊菜單項時候的頁面位置。| | disabled | boolean | 定義是否顯示菜單項。默認值為 false。| | onclick | function | 在點擊菜單項的時候調用的函數。| *** ```  <div data-options=" iconCls :'icon-save', disabled : true,"> 保存 </div> ``` # 菜單屬性 | 屬性名 | 值 | 說明 | | --- | --- | | zIndex | number | 菜單 z-index 樣式，增加它的值。默認值110000。| | left | number | 菜單的左邊距位置。默認值0。| | top | number | 菜單的上邊距位置。默認值0。| | minWidth | number | 菜單的最小寬度。默認值120。| | hideOnUnhover | boolean | 當設置為 true 時，在鼠標離開菜單的時候將自動隱藏菜單。默認值 true。| *** ``` //菜單屬性，設置在 data-options 也同樣有效 $('#box').menu({ left : 100, top : 100, zIndex : 100, minwidth : 200, hideOnUnhover : true, }); ``` # 菜單事件 | 事件名 | 參數 | 說明 | | --- | --- | | onShow | none | 在菜單顯示之后觸發。| | onHide | none | 在菜單隱藏之后觸發。| | onClick | item | 在菜單項被點擊的時候觸發。| *** ``` // 觸發事件 $('#box').menu({ onShow : function () { alert('顯示時觸發！'); }, onHide : function () { alert('隱藏時觸發！'); }, onClick : function (item) { alert(item.text); } }); ``` # 菜單方法 | 方法名 | 參數 | 說明 | | --- | --- | | options | none | 返回屬性對象。| | show | pos | 顯示菜單到指定的位置。'pos'參數有2個屬性：left：新的左邊距位置。top：新的上邊距位置。| | hide | none | 隱藏菜單。| | destroy | none | 銷毀菜單。| | getItem | itemEl | 獲取指定的菜單項。得到的是一個菜單項的 DOM 元素。| | setText | param | 設置指定菜單項的文本。'param'參數包含2個屬性：target：DOM 對象，要設置值的菜單項。text: 字符串，要設置的新文本值。| | setIcon | param | 設置指定菜單項圖標。'param'參數包含2個屬性：target：DOM 對象，要設置的菜單項。iconCls：新的圖標 CSS 類 ID。| | findItem | text | 查找的指定菜單項，返回的對象和getItem 方法是一樣的。| | appendItem | options | 追加新的菜單項，'options'參數代表新菜單項屬性。默認情況下添加的項在菜單項的頂部。追加一個子菜單項，'parent'屬性應該設置指定的父項元素，并且該父項元素必須是已經定義在頁面上的。| | removeItem | itemEl | 移除指定的菜單項。| | enableItem | itemEl | 啟用菜單項。| | disableItem | itemEl | 禁用菜單項。| *** ``` //返回屬性對象 console.log($('#box').menu('options')); //顯示菜單 $('#box').menu('show', { left : e.pageX, top : e.pageY, }); //隱藏菜單 $('#box').menu('hide'); //銷毀菜單 $('#box').menu('destroy'); //得到某個菜單項對象 console.log($('#box').menu('getItem', '#new')); //設置某個菜單項文本 $('#box').menu('setText', { target : '#new', text : '修改', }); //設置某個菜單項圖標 $('#box').menu('setIcon', { target : '#new', iconCls : 'icon-add', }); //通過文本獲取指定的菜單項對象 console.log($('#box').menu('findItem','新建')); //追加一個頂層菜單項 $('#box').menu('appendItem', { text : '新增', iconCls : 'icon-add', onclick : function () { alert('新增'); }, }); //追加一個子菜單項 $('#box').menu('appendItem', { parent : $('#box').menu('findItem', '打開').target, text : '新增', iconCls : 'icon-add', onclick : function () { alert('新增'); }, }); //移出指定菜單項 $('#box').menu('removeItem', '#new'); //禁用指定菜單項 $('#box').menu('disableItem', '#new'); //啟用指定菜單項 $('#box').menu('enableItem', '#new'); //使用$.fn.menu.defaults 重寫默認值對象。 ```