elem |
绑定元素选择器或 DOM 对象
|
string/DOM |
- |
[data](#options.data)
|
下拉菜单的数据源。格式详见:[#data 格式](#options.data)
|
array |
- |
id |
设定实例唯一索引,以便用于其他方法对例进行相关操作。若该属性未设置,则默认从 `elem` 属性绑定的元素中的 `id` 属性值中获取。
|
string |
- |
trigger |
触发组件的事件类型。支持所有事件,如: `click,hover,mousedown,contextmenu` 等
|
string |
`click`
|
show |
是否渲染即显示组件面板。该属性一般在重载方法中传递。
|
boolean |
`false`
|
align |
下拉面板相对绑定元素的水平对齐方式。支持以下可选值:
- `left` 左对齐(默认)
- `center` 居中对齐
- `right` 右对齐
|
string |
`left`
|
isAllowSpread |
是否允许菜单组展开收缩
|
boolean |
`true`
|
isSpreadItem |
是否初始展开子菜单
|
boolean |
`true`
|
accordion 2.8.18+ |
是否开启手风琴效果
|
boolean |
`false`
|
delay |
延迟触发的毫秒数。当 `trigger: 'hover'` 时才生效。示例:
- `delay: 300` : 表示显示与隐藏的延迟时间均为 300 毫秒
- `delay: [200, 300]` 2.9.2+ : 数组成员值分别表示显示延迟时间和隐藏延迟时间
|
number/array |
`[200, 300]`
|
className |
自定义组件主容器的样式类名,从而在外部重新定义样式。
|
string |
- |
style |
设置组件主容器的 `CSS` 样式。
|
string |
- |
shade 2.8+ |
设置弹出时的遮罩。支持以下方式赋值:
- 若值为 `number` 类型,则表示为遮罩透明度,如:
`shade: 0.3`
- 若值为 `array` 类型,则可同时设置透明度和背景色,如:
`shade: [0.3, '#000']`
|
number array |
`0`
|
templet |
全局定义菜单的列表模板,可添加任意 `html` 字符,且支持 [laytpl](../laytpl/) 模板语法。用法详见:[#示例](#demo-complex)
注 2.8+ : 模板亦可采用函数写法:
```
templet: function(d){
return '> ' + d.title;
}
```
|
string function |
- |
content |
自定义组件内容,从而替代默认的菜单结构。用法详见:[#示例](#demo-content)
|
string |
- |
clickScope 2.8+ |
设置触发点击事件的菜单范围。 支持以下可选值:
- `all` : 即代表父子菜单均可触发事件
默认无需设置,即父级菜单不触发事件
|
string |
- |
[customName](#options.customName) 2.8.14+
|
自定义 `data` 数据源中常用的字段名称。
|
object |
- |
[回调函数](#options.callback)
|
ready |
组件成功弹出后的回调函数。返回的参数如下:
```
ready: function(elemPanel, elem){
console.log(elemPanel); // 组件面板元素对象
console.log(elem); // 当前组件绑定的目标元素对象
}
```
|
[click](#options.click)
|
菜单项被点击时的回调函数。返回的参数如下:
```
click: function(data, othis){
console.log(data); // 当前所点击的菜单项对应的数据
console.log(othis); // 当前所点击的菜单项元素对象
console.log(this.elem); // 当前组件绑定的目标元素对象,批量绑定中常用
// 若返回 false,则点击选项可不关闭面板 --- 2.8+
/*
return false;
*/
}
```
用法详见:[#示例](#examples)
|
close 2.9.7+ |
面板关闭后的回调函数。返回的参数如下:
```
close: function(elem){
console.log(elem); // 当前组件绑定的目标元素对象
}
```
|