layui layIM右键菜单集成

    xiaoxiao2021-04-12  30

    效果图:(感谢@ 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

    最新回复(0)