免費(fèi)AI編程助手
菜單
菜單分為簡(jiǎn)單菜單和級(jí)聯(lián)菜單。簡(jiǎn)單菜單適用在手機(jī)和平板上，級(jí)聯(lián)菜單適用在桌面設(shè)備。
調(diào)用方式
- 通過自定義屬性調(diào)用
- 通過 JavaScript 調(diào)用
相關(guān)資料
Material Design 菜單設(shè)計(jì)規(guī)范
樣式
簡(jiǎn)單菜單
在菜單項(xiàng)上添加 disabled 屬性可以禁用一個(gè)菜單項(xiàng)。
添加 <li class="mdui-divider"></li> 元素可以添加分隔線。
帶圖標(biāo)的簡(jiǎn)單菜單
級(jí)聯(lián)菜單
在 <ul class="mdui-menu"> 元素上添加類 .mdui-menu-cascade 即可使菜單變?yōu)檫m用于桌面設(shè)備的級(jí)聯(lián)菜單。
通過在 <li class="mdui-menu-item"></li> 元素內(nèi)再添加菜單的方式可以實(shí)現(xiàn)菜單的嵌套，理論上可以支持無限級(jí)嵌套。
<span class="mdui-menu-item-helper"></span> 元素為菜單項(xiàng)添加簡(jiǎn)短說明。
<span class="mdui-menu-item-more"></span> 元素為菜單項(xiàng)添加一個(gè)向右的箭頭，用在含子菜單的菜單項(xiàng)上。
通過自定義屬性調(diào)用
使用該方式無需編寫 JavaScript 代碼。只需在一個(gè)起控制作用的元素（例如：按鈕）上添加 mdui-menu="options" 屬性即可。通過自定義屬性調(diào)用時(shí)，需要額外添加一個(gè) target 參數(shù)，用于指定被控制的菜單，它的值為被控制的菜單的 CSS 選擇器。
注意：為了使菜單能正確地定位，菜單和觸發(fā)菜單的元素必須位于同一父元素下的同一級(jí)。
通過 JavaScript 調(diào)用
實(shí)例化組件：
// anchorSelector 表示觸發(fā)菜單的元素的 CSS 選擇器或 DOM 元素
// menuSelector 表示菜單的 CSS 選擇器或 DOM 元素
// options 表示組件的配置參數(shù)，見下面的參數(shù)列表
var inst = new mdui.Menu(anchorSelector, menuSelector, options);參數(shù)
| 參數(shù)名 | 類型 | 默認(rèn)值 | 描述 |
| position | string | auto | 菜單相對(duì)于觸發(fā)它的元素的位置。
|
| align | string | auto | 菜單與觸發(fā)它的元素的對(duì)其方式。
|
| gutter | int | 16 | 菜單與窗口邊框至少保持多少間距，單位為 px。 |
| fixed | boolean | false | 菜單的定位方式
|
| covered | boolean | auto | 菜單是否覆蓋在觸發(fā)它的元素的上面。
|
| subMenuTrigger | string | hover | 子菜單的觸發(fā)方式。
|
| subMenuDelay | int | 200 | 子菜單的觸發(fā)延遲時(shí)間（單位：毫秒），只有在 subMenuTrigger: hover 時(shí)，這個(gè)參數(shù)才有效。 |
方法
| 方法名 | 描述 |
| open() | 打開菜單。 |
| close() | 關(guān)閉菜單。 |
| toggle() | 切換菜單的打開狀態(tài)。 |
事件
| 事件 | 描述 | 目標(biāo) | 事件 |
| open.mdui.menu | 菜單開始打開動(dòng)畫時(shí)，事件將被觸發(fā)。 | <ul class="mdui-menu"></ul> | event.detail.inst：實(shí)例 |
| opened.mdui.menu | 菜單結(jié)束打開動(dòng)畫時(shí)，事件將被觸發(fā)。 | <ul class="mdui-menu"></ul> | event.detail.inst：實(shí)例 |
| close.mdui.menu | 菜單開始關(guān)閉動(dòng)畫時(shí)，事件將被觸發(fā)。 | <ul class="mdui-menu"></ul> | event.detail.inst：實(shí)例 |
| closed.mdui.menu | 菜單結(jié)束關(guān)閉動(dòng)畫時(shí)，事件將被觸發(fā)。 | <ul class="mdui-menu"></ul> | event.detail.inst：實(shí)例 |
CSS 類名列表
| 類名 | 效果 |
| .mdui-menu | 定義一個(gè)菜單組件。 |
| .mdui-menu-cascade | 定義級(jí)聯(lián)菜單。 |
| .mdui-menu-item | 定義菜單項(xiàng)。 |
| .mdui-menu-item-icon | 定義菜單圖標(biāo)。 |
| .mdui-menu-item-helper | 定義菜單的幫助文本。 |
| .mdui-menu-item-more | 含子菜單的菜單項(xiàng)的向右箭頭。 |
更多建議：