mirror of
https://gitee.com/layui/layui.git
synced 2025-10-26 10:49:18 +08:00
2.6 KiB
2.6 KiB
下拉菜单
下拉菜单
可以绑定任意元素，
比如这段文字
<script>
layui.use(function(){
var dropdown = layui.dropdown;
// 渲染
dropdown.render({
elem: '.demo-dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
data: [{
title: 'menu item 1',
id: 100
},{
title: 'menu item 2',
id: 101
},{
title: 'menu item 3',
id: 102
}],
click: function(obj){
this.elem.find('span').text(obj.title);
}
});
// 绑定输入框
dropdown.render({
elem: '#ID-dropdown-demo-base-input',
data: [{
title: 'menu item 1',
id: 101
},{
title: 'menu item 2',
id: 102
},{
title: 'menu item 3',
id: 103
},{
title: 'menu item 4',
id: 104
},{
title: 'menu item 5',
id: 105
},{
title: 'menu item 6',
id: 106
}],
click: function(obj){
this.elem.val(obj.title);
},
style: 'min-width: 235px;'
});
// 绑定文字
dropdown.render({
elem: '#ID-dropdown-demo-base-text',
data: [{
title: 'menu item 1',
id: 100
},{
title: 'menu item 2',
id: 101,
child: [{ // 横向子菜单
title: 'menu item 2-1',
id: 1011
},{
title: 'menu item 2-2',
id: 1012
}]
},{
title: 'menu item 3',
id: 102
},{
type: '-' // 分割线
},{
title: 'menu group',
id: 103,
type: 'group', // 纵向菜单组
child: [{
title: 'menu item 4-1',
id: 1031
},{
title: 'menu item 4-2',
id: 1032
}]
},{
type: '-' // 分割线
},{
title: 'menu item 5',
id: 104
},{
title: 'menu item 5',
id: 104
}],
click: function(obj){
this.elem.val(obj.title);
}
});
});
</script>