下拉菜单(主要解决table中的下拉菜单不显示)

分享 未结
1 336
凉宫
凉宫 7天前
悬赏:20飞吻
1. 单独使用的下拉菜单

<div class="urp-dropdown">
<button class="layui-btn urp-dropdown-btn">
Action
<i class="layui-icon layui-icon-down"></i>
</button>
<ul class="urp-dropdown-menu">
<li>
<a href="javascript:;">
<i class="layui-icon layui-icon-senior"></i>
action
</a>
</li>
<li>
<a href="javascript:;">
<i class="layui-icon layui-icon-website"></i>
Another action
</a>
</li>
</ul>
</div>
说明:
1. 默认左对齐,给 .urp-dropdown添加 .urp-dropdown-right类右对齐
2. 默认为关闭状态,给 .urp-dropdown添加 .open类则初始打开
2. table中使用


/*表格toolbar模板*/
<script type="text/html" id="barDemo">
<div class="urp-dropdown urp-dropdown-table">
<button class="layui-btn layui-btn-primary layui-btn-xs urp-dropdown-btn" lay-event="dropdown">
操作<i class="layui-icon layui-icon-down"></i>
</button>
</div>
</script>
table.on('tool(test)', function (obj) {
var data = obj.data;
if (obj.event === 'dropdown') {
var options = [
{
title: "百度", // 按钮显示内容
icon: "layui-icon-release", // 图标样式
url: "http://baidu.com" // 按钮跳转地址(与event二选一)
},
{
title: "事件",
icon: "layui-icon-release",
event: function() {
// 按钮触发事件
layer.alert("触发了事件",{icon: 1});
}
}
];
dropdown(options);
}
})
说明:
1. 引入dropdown模块和css文件
2. 以 urp- 开头的class为必需的
3. dropdown(options):options参数为数组,数组中的每个对象代表一个按钮
4. options参数:
{
title: "查看", // 按钮显示内容
icon: "layui-icon-form", // 图标样式
url: "http://baidu.com", // 按钮跳转地址(与event二选一)
event: function () {
// 按钮触发事件
}
}
源码
演示地址
回帖
  • TeAmo
    3天前
    前排支持一下。。。
    0 回复