源码：rightmenu.js
layui.define(['element'], function (exports) {
let element = layui.element;
const $ = layui.jquery;
let MOD_NAME = 'rightmenu';
let RIGHTMENUMOD = function () {
this.v = '1.0.0';
this.author = 'raowenjing';
};
String.prototype.format = function () {
if (arguments.length == 0) return this;
let param = arguments[0];
let s = this;
if (typeof(param) == 'object') {
for (var key in param) s = s.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);
return s;
} else {
for (var i = 0; i < arguments.length; i++) s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
return s;
}
}
function createStyle(ulClassName) {
let style = '.{name} {position: absolute;width: 110px;z-index: 9999;display: none;background-color: #fff;padding: 2px;color: #333;border: 1px solid #c2c2c2;border-radius: 2px;cursor: pointer;}.{name} li {text-align: center;display: block;height: 30px;line-height: 32px;}.{name} li:hover {background-color: #666;color: #fff;}'
.format({name: ulClassName});
return style;
}
/**
* 初始化
*/
RIGHTMENUMOD.prototype.render = function (opt) {
createStyle();
if (!opt.container) {
console.error("[ERROR]使用rightmenu组件需要制定'container'属性！");
return;
}
let defaultNavArr = [
];
opt = opt || {};
opt.triggerDom = opt.triggerDom || "li";
opt.boxClassName = opt.boxClassName || "right-click-menu-container";
opt.navArr = opt.navArr || defaultNavArr;
CreateRightMenu(opt,"");
_CustomRightClick(opt);
};
/**
* 创建右键菜单项目
* @param rightMenuConfig
* @constructor
*/
function CreateRightMenu(rightMenuConfig,currentData,callback) {
if($('.'+rightMenuConfig.boxClassName).length>0) $('.'+rightMenuConfig.boxClassName).remove();
$("<style></style>").text(createStyle(rightMenuConfig.boxClassName)).appendTo($("head"));
let li = '';
$.each(rightMenuConfig.navArr, function (index, conf) {
if(!!currentData && typeof conf.showFormat != "undefined"){ // 控制
if(typeof conf.showFormat == "function"){
var isShow = conf.showFormat(currentData);
isShow = !!isShow?true:false;
if(isShow){
li += '<li data-type="{eventName}"><i class="layui-icon {icon}"></i>{title}</li>'
.format({eventName:conf.eventName,icon:conf.icon?conf.icon:"",title:conf.title});
}
}else{
if(!!conf.showFormat){
li += '<li data-type="{eventName}"><i class="layui-icon {icon}"></i>{title}</li>'
.format({eventName:conf.eventName,icon:conf.icon?conf.icon:"",title:conf.title});
}
}
}else{
li += '<li data-type="{eventName}"><i class="layui-icon {icon}"></i>{title}</li>'
.format({eventName:conf.eventName,icon:conf.icon?conf.icon:"",title:conf.title});
}
})
let tmpHtml = '<ul class="{className}">{liStr} </ul>'.format({liStr: li, className: rightMenuConfig.boxClassName})
$(rightMenuConfig.container).after(tmpHtml);
setTimeout(function(){
registerMenuClick(rightMenuConfig);
if(!!callback && typeof callback == "function") callback();
},10)
}
/**
* 绑定右键菜单
* @constructor
*/
function _CustomRightClick(rightMenuConfig) {
$(rightMenuConfig.container).off("click");
$(rightMenuConfig.container).on("click", rightMenuConfig.triggerDom,function () {
$('.'+rightMenuConfig.boxClassName).hide();
});
$(rightMenuConfig.container).off("contextmenu")
$(rightMenuConfig.container).on("contextmenu", rightMenuConfig.triggerDom, function (e) {
// 阻止默认的右键菜单
e.preventDefault();
// 重构菜单
CreateRightMenu(rightMenuConfig,$(this).data(),function(){
let popupmenu = $("."+rightMenuConfig.boxClassName);
let leftValue = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
let topValue = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
popupmenu.css({left: leftValue, top: topValue}).show();
});
// 将该元素的所有数据复制到
$.each($(this).data(), function(key, value) {
$("."+rightMenuConfig.boxClassName).data(key, value);
});
return false;
});
// 点击空白处隐藏弹出菜单
$(document).click(function (event) {
event.stopPropagation();
$("."+rightMenuConfig.boxClassName).hide();
});
}
function registerMenuClick(rightMenuConfig){
$('.' + rightMenuConfig.boxClassName + ' li').prop("onclick",null).off("click");
/**
* 注册tab右键菜单点击事件
*/
$('.' + rightMenuConfig.boxClassName + ' li').click(function () {
rightMenuConfig.registMethod[$(this).attr("data-type")]($(this).parents("."+rightMenuConfig.boxClassName).data());
$("."+rightMenuConfig.boxClassName).hide();
})
}
let rightmenuObj = new RIGHTMENUMOD();
exports(MOD_NAME, rightmenuObj);
})使用示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<div id="app_folder" lay-filter="folder_filter" class="folder-container"></div>
<script src="./js/jquery.min.js"></script>
<script src="./layui/layui.js"></script>
<script>
layui.config({
base: './layui/modules/' //静态资源所在路径
}).use(['rightmenu','tree'], function(){
var tree = layui.tree, rightmenu_ = layui.rightmenu
initFolder();
function initFolder(){
var data = [
{ id: 1, title: "标题标题标题", type: "html" },
{ id: 2, title: "标题标题标题", type: "html", children: [ { id: 3, title: "标题", type: "javascript" } ] },
]
tree.render({
elem: '#app_folder' //默认是点击节点可进行收缩
,data: data
,onlyIconControl: true
,click: function(obj){
}
});
setTimeout(function(){
// 为dom节点添加数据
$("#app_folder .layui-tree-main").each(function(index,item){
var parent = $(this).parent().parent();
var id = parent.data("id");
var dataItem = null;
if(parent.hasClass("layui-tree-setHide")){ // 页面
dataItem = data.find(function(it){ return it.id==id; })
}else{ // 资源
for(var i=0,len=data.length;i<len;i++){
var currentItem = data[i].children.find(function(it){ return it.id==id; })
if(!!currentItem) dataItem = currentItem;
}
}
if(!!dataItem){
for (var key in dataItem) {
$(this).data(key,dataItem[key]);
}
}
})
rightmenu_.render({
container: '#app_folder',
triggerDom: ".layui-tree-main", // 触发右击事件的dom节点
// navArr：对象数组，每个对象包含eventName、title、showFormat属性
navArr: [
{title: "新建页面", eventName: 'createPage'},
{title: "新建资源", eventName: 'createSource'},
{title: "修改", eventName: 'edit'},
{title: "删除", eventName: 'delete'},
{title: "预览", eventName: 'preview', showFormat: function(data){ if(data.source_type=="html"){ return true }else{ return false; } } },
{title: "资源路径", eventName: 'sourcePath', showFormat: function(data){ if(data.source_type=="html"){ return true }else{ return false; } } },
{title: "下载资源", eventName: 'downloadSource', showFormat: function(data){ if(data.source_type=="image" || data.source_type=="file"){ return true }else{ return false; } } },
{title: "清除缓存数据", eventName: 'clearLocalData', showFormat: function(data){ if(data.source_type=="javascript"){ return true }else{ return false; } } }
],
// 注册自定义事件
registMethod: {
'clearLocalData': function(data){
console.log(data);
},
'sourcePath': function(data){
console.log(data);
},
'preview': function(data){
},
'downloadSource': function(data){
},
'edit': function(data){
},
'delete': function(data){
},
'createPage': function(data){
},
'createSource': function(data){
},
}
})
},100);
}
})
</script>
</body>
</html>
效果：
