mirror of
https://gitee.com/layui/layui.git
synced 2026-01-28 19:11:26 +08:00
1670cbab8f
* refactor: 重构 dropdown 打开与关闭逻辑 * chore: 优化变量 * refactor: 保留采用 elem 的 jQuery Data 进行面板打开状态的判断 * fix: 优化延时移除面板时的实例不一致的问题
2.3 KiB
2.3 KiB
开启全局右键菜单
<script>
layui.use(function(){
var dropdown = layui.dropdown;
var util = layui.util;
// 右键菜单
dropdown.render({
elem: '#ID-dropdown-demo-contextmenu', // 也可绑定到 document，从而重置整个右键
trigger: 'contextmenu', // contextmenu
isAllowSpread: false, // 禁止菜单组展开收缩
style: 'width: 200px', // 定义宽度，默认自适应
data: [{
title: 'menu item 1',
id: 'test'
}, {
title: 'Printing',
id: 'print'
},{
title: 'Reload',
id: 'reload'
},{type:'-'},{
title: 'menu item 3',
id: '#3',
child: [{
title: 'menu item 3-1',
id: '#1'
},{
title: 'menu item 3-2',
id: '#2'
},{
title: 'menu item 3-3',
id: '#3'
}]
},
{type: '-'},
{
title: 'menu item 4',
id: ''
},{
title: 'menu item 5',
id: '#1'
},{
title: 'menu item 6',
id: '#1'
}],
click: function(obj, othis){
if(obj.id === 'test'){
layer.msg('click');
} else if(obj.id === 'print'){
window.print();
} else if(obj.id === 'reload'){
location.reload();
}
}
});
// 其他操作
util.event('lay-on', {
// 改变触发右键菜单的目标元素
contextmenu: function(othis){
var ID = 'ID-dropdown-demo-contextmenu';
if (!othis.data('open')) {
dropdown.reload(ID, {
elem: document // 设置全局元素右键
});
layer.msg('已开启全局右键菜单，请尝试在页面任意处单击右键。')
othis.html('取消全局右键菜单');
othis.data('open', true);
} else {
dropdown.reload(ID, {
elem: '#'+ ID // 设置局部元素右键
});
layer.msg('已取消全局右键菜单，恢复默认右键菜单')
othis.html('开启全局右键菜单');
othis.data('open', false);
}
}
});
});
</script>