效果图:(感谢@
JOHNSON
提供的jquery插件,jquery插件改成layui模块化)
menu.js代码包:
右键菜单资源包
2016-12-19 menu.js代码更新,修复IE 8下对象属性的bug
https://github.com/fanpan26/LayIM_NetClient/blob/master/LayIM_SignalR/LayIM_SignalR_Chat.V1.0/Scripts/menu.js
自定义扩展模块
//自定义模块
layui.extend({
menu:'/scripts/menu'
});
引用menu.js
layui.use(['layim', 'menu'], function (l, m) {
var menu = m;
//其他代码 在onready 事件中初始化menu
layim.on('ready', function (res) {
//初始化菜单
menu.init({
menu: [
{
id:1,
ele: 'li[data-type="friend"]',
items: [
{ text: '即时聊天', name: 'chat', icon: '', group: 'g1' },
{ text: '历史记录', name: 'history', icon: '', group: 'g1' },
{ text: '删除好友', name: 'delete', icon: 'ဇ', group: 'g3' },
{
text: '移动至', group: 'g2', child: [
{ text: '我的好友', name: 'myfriend', icon: '' },
{ text: '大学同学', name: 'collage', icon: '' },
{ text: '公司同事', name: 'worker', icon: '' }
]
},
]
},
{
id:2,
ele: 'li[data-type="group"]',
items: [
{ text: '即时聊天', name: 'chat', group: 'g1' },
{ text: '历史记录', name: 'history', group: 'g1' },
{ text: '屏蔽消息', name: 'delete', group: 'g1' },
{ text: '解散群', name: 'delete', group: 'g1' },
{ text: '转移群', name: 'delete',group: 'g1' },
]
},
{
id:3,
ele: 'h5',
items: [
{ text: '删除分组', name: 'chat', group: 'g1' },
{ text: '刷新好友', name: 'history', group: 'g1' },
{ text: '修改名称', name: 'delete', group: 'g1' }
]
}
]
});
});
});
监听菜单点击事件
//监听事件
menu.on('menuclick', function (othis, name) {
console.log(othis);
console.log(name);
})
说明:具体测试可能还有bug,图标采用 诸如 င 这种
原文:http://fly.layui.com/jie/6036.html
转载请注明原文地址: https://ju.6miu.com/read-667529.html