下拉菜单组件文档 |
您所在的位置：网站首页 › layer组件 › 下拉菜单组件文档 |
|
下拉菜单组件文档 - layui.dropdown
dropdown 是基于 layui「基础菜单」结构衍生的多功能通用下拉菜单组件，它将原本静态呈现的菜单，通过各种事件的形式触发，从而以独立面板的形式弹出。不仅可用作常见的「下拉菜单」，更可用于「右键菜单」来实现更多的交互可能。
模块加载名称：dropdown
快速使用
代码
演示效果
下拉菜单
layui.use('dropdown', function(){
var dropdown = layui.dropdown
dropdown.render({
elem: '#demo1' //可绑定在任意元素中，此处以上述按钮为例
,data: [{
title: 'menu item 1'
,id: 100
,href: '#'
},{
title: 'menu item 2'
,id: 101
,href: '{{d.root}}/' //开启超链接
,target: '_blank' //新窗口方式打开
},{type: '-'},{
title: 'menu item 3'
,id: 102
,type: 'group' //菜单类型，支持：normal/group/parent/-
,child: [{
title: 'menu item 3-1'
,id: 103
},{
title: 'menu item 3-2'
,id: 104
,child: [{
title: 'menu item 3-2-1'
,id: 105
},{
title: 'menu item 3-2-2'
,id: 106
}]
},{
title: 'menu item 3-3'
,id: 107
}]
},{type: '-'},{
title: 'menu item 4'
,id: 108
},{
title: 'menu item 5'
,id: 109
,child: [{
title: 'menu item 5-1'
,id: 11111
,child: [{
title: 'menu item 5-1-1'
,id: 2111
},{
title: 'menu item 5-1-2'
,id: 3111
}]
},{
title: 'menu item 5-2'
,id: 52
}]
},{type:'-'},{
title: 'menu item 6'
,id: 6
,type: 'group'
,isSpreadItem: false
,child: [{
title: 'menu item 6-1'
,id: 61
},{
title: 'menu item 6-2'
,id: 62
}]
}]
,id: 'demo1'
//菜单被点击的事件
,click: function(obj){
console.log(obj);
layer.msg('回调返回的参数已显示再控制台');
}
});
});
菜单列表核心的数据来自于 data 参数，详细可参加右边目录「菜单列参数」
基础参数
即核心方法 dropdown.render(options) 中的 options 对应的参数： 参数 说明 类型 默认值 elem 绑定触发组件的元素。必填项 String/DOM - data 菜单列数据项，其参数详见下文。必填项 Array [] trigger 触发组件的事件类型。支持所有事件，如：click/hover/mousedown/contextmenu 等 String click show 是否初始即显示组件面板 Boolean false align 下拉面板相对绑定元素的水平对齐方式（支持: left/center/right） v2.6.8 新增 String left isAllowSpread 是否允许菜单组展开收缩 Boolean true isSpreadItem 是否初始展开子菜单 Boolean true delay 延迟关闭的毫秒数。当 trigger 为 hover 时才生效 Number 300 className 自定义组件的样式类名 String - style 设置组件的 style 属性，从而定义新的样式 String - templet 全局定义菜单的列表模板，添加任意 html 字符，模版将被 laytpl 组件所转义，因此可通过 {{ d.title }} 的方式得到当前菜单配置的数据。#详见 String - content 自定义组件内容，从而替代默认的菜单结构 String - ready 组件成功弹出后的回调，并返回两个参数，如： ready: function(elemPanel, elem){ console.log(elemPanel); 得到组件面板的 DOM 对象 console.log(elem); 得到基础参数 elem 所绑定的元素 DOM 对象 } Function - click 菜单项被点击时的回调，并返回两个参数，如： click: function(data, othis){ console.log(data); 得到当前所点击的菜单项对应的数据 console.log(othis); 得到当前所点击的菜单项 DOM 对象 console.log(this.elem); //得到当前组件绑定的原始 DOM 对象，批量绑定中常用。 } #详细使用参见下文 Function - 菜单项参数即上述基础参数 data 对应的参数，格式为：data: [{title: 'menu item 1', id: 1}, {}, {}] 参数 说明 类型 默认值 title 菜单标题 String - id 菜单 ID。用户菜单项唯一索引 Number/String - href 菜单项的超链接地址。若填写，点击菜单将直接发生跳转。 String false target 菜单项超链接的打开方式，需 href 填写才生效。 一般可设为 _blank 或 _self 等 String _self type 菜单项的类型，当前支持的值如下： normal（默认） group（垂直菜单组） parent（横向父子菜单） -（分割线） String normal 或 不填 child 子级菜单数据项。参数同父级，可无限嵌套。 Array [] templet 自定义当前菜单项模板，优先级高于全局设定的 templet。详见下文。 String - 菜单项被点击的回调 代码 演示效果 列表 1 列表 2 列表 3 layui.use('dropdown', function(){ var dropdown = layui.dropdown ,$ = layui.jquery; dropdown.render({ elem: '.demolist' ,data: [{ title: 'item 1' ,id: 'aaa' }, { title: 'item 2' ,id: 'bbb' }] ,click: function(data, othis){ var elem = $(this.elem) ,listId = elem.data('id'); //表格列表的预埋数据 layer.msg('得到表格列表的 id：'+ listId +'，下拉菜单 id：'+ data.id); } }); }); 自定义菜单项模板通过 templet 参数即可自定义菜单项模板，其字符将被 laytpl 组件所转义，因此可通过 undefined 的方式得到当前菜单配置的数据。 var dropdown = layui.dropdown; //执行菜单 dropdown.render({ elem: '#id' ,data: [{ title: '刷新' //当设定了模板时，菜单项将优先显示模板结构；否则将默认显示标题 ,templet: ' {{d.title}}' ,id: 100 },{ title: 'menu item 2' //该模板由「图片+标题+徽章」组成 ,templet: ' {{d.title}} ' ,id: 101 ,href: '{{d.root}}/' ,target: '_blank' },{ title: 'menu item 3' //未开启模板时，默认直接显示标题 ,id: 103 }] }) 右键菜单当参数设定为 trigger: 'contextmenu'时，即会在所绑定的元素中屏蔽默认的右键菜单，从而呈现 dropdown 组件配置的菜单。 var dropdown = layui.dropdown; //执行菜单 dropdown.render({ elem: '#demo' //在 id="demo" 的元素中触发事件。也可以直接设置为 document，从而重置整个右键菜单 ,trigger: 'contextmenu' //右键事件 ,data: [{ title: 'menu item 1' ,id: 1 },{ title: 'menu item 2' ,id: 'reload' },{type:'-'},{ title: 'menu item 3' ,id: 3 ,child: [{ title: 'menu item 3-1' ,id: 31 },{ title: 'menu item 3-2' ,id: 32 },{ title: 'menu item 3-3' ,id: 33 }] },{type:'-'},{ title: 'menu item 4' ,id: 111 },{ title: 'menu item 5' ,id: 555 },{ title: 'menu item 6' ,id: 666 }] }); 结语该组件使用非常灵活，且弹出的面板进行了坐标的科学判断（基于内部的 lay.js 模块），能始终吸附显示在最佳的位置。 layui - 在每一个细节中，用心与你沟通 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |