EasyUI中菜单Menu的简单使用
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中菜单Menu的简单使用
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
場景
效果
菜單項(xiàng)
菜單項(xiàng)（menu item）代表一個(gè)顯示在菜單中的單獨(dú)的項(xiàng)目。它包含下列屬性：
| 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è)置頁面位置。 | ? |
| disabled | boolean | 定義是否禁用菜單項(xiàng)（menu item）。 | false |
| onclick | function | 當(dāng)點(diǎn)擊菜單項(xiàng)（menu item）時(shí)被調(diào)用的函數(shù)。 | ? |
菜單屬性
| zIndex | number | 菜單（Menu）的 z-index 樣式，從它開始增加。 | 110000 |
| left | number | 菜單（Menu）的左邊位置。 | 0 |
| top | number | 菜單（Menu）的頂部位置。 | 0 |
| minWidth | number | 菜單（Menu）的最小寬度。該屬性自版本 1.3.2 起可用。 | 120 |
| hideOnUnhover | boolean | 如果設(shè)置為 true，當(dāng)鼠標(biāo)離開它時(shí)自動(dòng)隱藏菜單（menu）。該屬性自版本 1.3.5 起可用。 | true |
菜單事件
| 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)擊： |
菜單方法
| options | none | 返回選項(xiàng)（options）對象。 |
| 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í)例演示如何通過 id 獲取指定的項(xiàng)目： |
| setText | param | 給指定的菜單項(xiàng)（menu item）設(shè)置文本。'param' 參數(shù)包含兩個(gè)屬性： target：DOM 對象，被設(shè)定的菜單項(xiàng)（menu item）。 text：string，新的文本值。 代碼實(shí)例： |
| setIcon | param | 給指定的菜單項(xiàng)（menu item）設(shè)置圖標(biāo)。'param' 參數(shù)包含兩個(gè)屬性： target：DOM 對象，即菜單項(xiàng)（menu item）。 iconCls：新圖標(biāo)的 CSS class。 代碼實(shí)例： |
| findItem | text | 找到指定的菜單項(xiàng)（menu item），返回對象與 getItem 方法相同。 代碼實(shí)例： |
| appendItem | options | 追加一個(gè)新的菜單項(xiàng)（menu item），'param' 參數(shù)指示新的項(xiàng)目屬性。默認(rèn)情況下，新增的項(xiàng)目將作為頂級菜單項(xiàng)（menu item）。如需追加一個(gè)子菜單項(xiàng)，需設(shè)置 'parent' 屬性，用來指示已經(jīng)有子項(xiàng)目的父項(xiàng)目元素。 代碼實(shí)例： |
| removeItem | itemEl | 移除指定的菜單項(xiàng)（menu item）。 |
| enableItem | itemEl | 啟用菜單項(xiàng)（menu item）。 |
| disableItem | itemEl | 禁用菜單項(xiàng)（menu item）。 |
實(shí)現(xiàn)
當(dāng)菜單（menu）被創(chuàng)建時(shí)，它是隱藏不可見的。調(diào)用 '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>?
總結(jié)
以上是生活随笔為你收集整理的EasyUI中菜单Menu的简单使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EasyUI中Tabs标签页的简单使用
- 下一篇： SpringBoot+AntV实现饼状图