layim右键菜单插件(已修复bug)

分享 未结
2 1092
回眸淡然笑
悬赏:20飞吻
效果图

之前分享过右键插件,存在一个bug,那就是显示区域可能会在屏幕外,目前已修复,并且图标支持layui的icon了。
点击这里下载资源 http://ossguoshan.oss-cn-shanghai.aliyuncs.com/contextMenu2.zip
可以在这里体验 https://github.com/shmilylbelva/webim
具体修改如下
layui.define(['jquery','contextMenu'], function (exports) {
var contextMenu = layui.contextMenu;
var $ = layui.jquery;
var ext = {
init : function(){//定义右键操作
$(".layim-list-friend >li > ul > li").contextMenu({
width: 140, // width
itemHeight: 30, // 菜单项height
bgColor: "#fff", // 背景颜色
color: "#333", // 字体颜色
fontSize: 15, // 字体大小
hoverBgColor: "#009bdd", // hover背景颜色
hoverColor: "#fff", // hover背景颜色
target: function(ele) { // 当前元素
$(".ul-context-menu").attr("data-id",ele[0].id);
$(".ul-context-menu").attr("data-name",ele.find("span").html());
$(".ul-context-menu").attr("data-img",ele.find("img").attr('src'));
},
menu: [
{ // 菜单项
text: "发送消息",
icon: "",
callback: function(ele) {
var othis = ele.parent(),
friend_id = othis[0].dataset.id.replace(/^layim-friend/g, ''),
friend_name = othis[0].dataset.name,
friend_avatar = othis[0].dataset.img;
conf.layim.chat({
name: friend_name
,type: 'friend'
,avatar: friend_avatar
,id: friend_id
});
}
},
{
text: "查看资料",
icon: "",
callback: function(ele) {
var othis = ele.parent(),friend_id = othis[0].dataset.id.replace(/^layim-friend/g, '');
im.getInformation({
id: friend_id,
type:'friend'
});
}
},
{
text: "聊天记录",
icon: "",
callback: function(ele) {
var othis = ele.parent(),
friend_id = othis[0].dataset.id.replace(/^layim-friend/g, ''),
friend_name = othis[0].dataset.name;
im.getChatLog({
name: friend_name,
id: friend_id,
type:'friend'
});
}
}
]
});
}
}
exports('ext', ext);
});
引入 contextMenu.css
<link rel="stylesheet" href="../dist/static/css/contextMenu.css">
最后初始化右键菜单的实例
layui.config({
base: '../dist/static/js/' //扩展 JS 所在目录
}).extend({
socket: 'socket'
});

layui.use(['layim', 'socket'], function(layim) {
$ = layui.jquery


layim.on('ready', function(){
layui.ext.init(); //更新右键点击事件
});

//下面是 layim 处理消息的代码
});
回帖
本帖已设置禁止回复