220 lines
9.4 KiB
JavaScript
220 lines
9.4 KiB
JavaScript
layui.define(['element'], function (exports) {
|
||
let element = layui.element;
|
||
const $ = layui.jquery;
|
||
|
||
let MOD_NAME = 'tabrightmenu';
|
||
let RIGHTMENUMOD = function () {
|
||
this.v = '1.0.0';
|
||
this.author = 'TangHanF';
|
||
this.email = 'guofu_gh@163.com';
|
||
this.filter = '';//Tab选项卡的事件过滤
|
||
|
||
};
|
||
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: 180px;z-index: 9999;display: none;background-color: #fff;padding: 2px;color: #333;border: 1px solid #d2d2d2;border-radius: 2px;cursor: pointer;box-shadow: 0 2px 4px rgba(0,0,0,.12); }.{name} li {text-align: left;padding:0px 5px 0 20px; display: block;height: 30px;line-height: 32px;color:#444; border:1px solid white;border-radius:5px;}.{name} li:hover {background-color: #eaf2ff;border:1px solid #b7d2ff;border-radius:5px;color: black;}'
|
||
.format({ name: ulClassName });
|
||
return style;
|
||
}
|
||
|
||
/**
|
||
* 初始化
|
||
*/
|
||
RIGHTMENUMOD.prototype.render = function (opt) {
|
||
createStyle();
|
||
|
||
if (!opt.container) {
|
||
console.error("[ERROR]使用rightmenu组件需要制定'container'属性！");
|
||
return;
|
||
}
|
||
if (!opt.filter) {
|
||
console.error("[ERROR]使用rightmenu组件需要制定'filter'属性！");
|
||
return;
|
||
}
|
||
this.filter = opt.filter;
|
||
|
||
let defaultNavArr = [
|
||
{ eventName: 'refresh', title: '刷新' },
|
||
{ eventName: 'closethis', title: '关闭当前' },
|
||
{ eventName: 'closeall', title: '关闭所有' },
|
||
{ eventName: 'hr', title: '分割线' },
|
||
{ eventName: 'closeothers', title: '关闭其它' },
|
||
{ eventName: 'closeleft', title: '关闭左侧所有' },
|
||
{ eventName: 'closeright', title: '关闭右侧所有' },
|
||
{ eventName: 'openinnewwin', title: '在新的窗体打开' },
|
||
|
||
];
|
||
opt = opt || {};
|
||
opt.navArr = opt.navArr || defaultNavArr;
|
||
CreateRightMenu(opt);
|
||
};
|
||
|
||
|
||
/**
|
||
* 创建右键菜单项目
|
||
* @param rightMenuConfig
|
||
* @constructor
|
||
*/
|
||
function CreateRightMenu(rightMenuConfig) {
|
||
// 使用"filter"属性作为css样式名称
|
||
$("<style></style>").text(createStyle(rightMenuConfig.filter)).appendTo($("head"));//将样式添加的head中去了
|
||
let li = '';
|
||
$.each(rightMenuConfig.navArr, function (index, conf) {
|
||
// li += '<li data-type="' + conf.eventName + '"><i class="layui-icon layui-icon-face-smile"></i> ' + conf.title + '</li>';
|
||
if (conf.eventName == "hr") {//添加分割线
|
||
li += "<hr/>";
|
||
} else {
|
||
li += '<li data-type="{eventName}"><div class="layui-icon {icon}"></div> {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.filter })
|
||
$(rightMenuConfig.container).after(tmpHtml);//先添加隐藏的右键菜单
|
||
_CustomRightClick(rightMenuConfig);//
|
||
}
|
||
|
||
|
||
/**
|
||
* 绑定右键菜单
|
||
* @constructor
|
||
*/
|
||
function _CustomRightClick(rightMenuConfig) {
|
||
|
||
//屏蔽Tab右键
|
||
//$("#" + rightmenuObj.filter + ' li').on('contextmenu', function () {
|
||
// return false;
|
||
//})
|
||
$(document).on("click", "#" + rightmenuObj.filter + ' li', function () {
|
||
|
||
return false;
|
||
})
|
||
|
||
//$('#' + rightmenuObj.filter + ',' + rightmenuObj.filter + ' li').click(function () {
|
||
// $('.' + rightMenuConfig.filter).hide();
|
||
//});
|
||
$(document).on("contextmenu", '#' + rightmenuObj.filter + ',' + rightmenuObj.filter + ' li', function () {
|
||
|
||
$('.' + rightMenuConfig.filter).hide();
|
||
});
|
||
console.log("[事件绑定，元素]" + rightmenuObj.filter + ' li')
|
||
//$("#" + rightmenuObj.filter + ' li').on('contextmenu', function (e) {
|
||
// let popupmenu = $("." + rightMenuConfig.filter);
|
||
// 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();
|
||
// return false;
|
||
//});
|
||
$(document).on("contextmenu", "#" + rightmenuObj.filter + ' li', function (e) {
|
||
$(this).click();
|
||
let popupmenu = $("." + rightMenuConfig.filter);
|
||
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 - 2, top: topValue - 2 }).show();
|
||
return false;
|
||
})
|
||
// 点击空白处隐藏弹出菜单
|
||
$(document).on("mouseleave", "." + rightmenuObj.filter, function (event) {
|
||
event.stopPropagation();
|
||
$("." + rightMenuConfig.filter).hide();
|
||
});
|
||
|
||
|
||
/**
|
||
* 注册tab右键菜单点击事件
|
||
*/
|
||
console.log("[注册tab右键菜单点击事件]" + '.' + rightMenuConfig.filter + ' li');
|
||
//$('.' + rightMenuConfig.filter + ' li').click(function () {
|
||
$(document).on("click", '.' + rightMenuConfig.filter + ' li', function () {
|
||
let currentActiveTabID = $("#" + rightMenuConfig.filter + ">li[class='layui-this']").attr('lay-id');// 获取当前激活的选项卡ID
|
||
let tabtitle = $("#" + rightMenuConfig.filter + " li");
|
||
let allTabIDArr = [];
|
||
$.each(tabtitle, function (i) {
|
||
allTabIDArr[i] = $(this).attr("lay-id");
|
||
})
|
||
|
||
// 事件处理
|
||
switch ($(this).attr("data-type")) {
|
||
case "closethis"://关闭当前，如果开始了tab可关闭，实际意义不大
|
||
tabDelete(currentActiveTabID, rightMenuConfig.filter);
|
||
break;
|
||
case "closeall"://关闭所有
|
||
tabDeleteAll(allTabIDArr, rightMenuConfig.filter);
|
||
break;
|
||
case "closeothers"://关闭非当前
|
||
$.each(allTabIDArr, function (i) {
|
||
let tmpTabID = allTabIDArr[i];
|
||
console.log(tmpTabID);
|
||
if (currentActiveTabID != tmpTabID && (rightMenuConfig.lockId == null || tmpTabID != rightMenuConfig.lockId))
|
||
tabDelete(tmpTabID, rightMenuConfig.filter);
|
||
})
|
||
break;
|
||
case "closeleft"://关闭左侧全部
|
||
let indexCloseleft = allTabIDArr.indexOf(currentActiveTabID);
|
||
tabDeleteAll(allTabIDArr.slice(0, indexCloseleft));
|
||
break;
|
||
case "closeright"://关闭右侧全部
|
||
let indexCloseright = allTabIDArr.indexOf(currentActiveTabID);
|
||
tabDeleteAll(allTabIDArr.slice(indexCloseright + 1));
|
||
break;
|
||
case "refresh":
|
||
// 重新加载iFrame，实现更新。注意：如果你不是使用的iFrame则无效，具体刷新实现自行处理
|
||
// document.getElementById(currentActiveTabID).contentWindow.location.reload(true);
|
||
refreshiFrame();
|
||
break;
|
||
case "openinnewwin":
|
||
opennewWin();
|
||
break;
|
||
default:
|
||
let currentTitle = $("#" + rightMenuConfig.filter + ">li[class='layui-this']").text();
|
||
rightMenuConfig.registMethod[$(this).attr("data-type")](currentActiveTabID, currentTitle, rightMenuConfig.container, $(this)[0]);
|
||
|
||
}
|
||
$('.rightmenu').hide();
|
||
event.stopPropagation();
|
||
$("." + rightMenuConfig.filter).hide();
|
||
})
|
||
}
|
||
|
||
let tabDelete = function (id, currentNav) {
|
||
console.log("删除的TabID：" + id + ",所属组：" + currentNav);
|
||
element.tabDelete(currentNav, id);//删除
|
||
}
|
||
let tabDeleteAll = function (ids, currentNav) {
|
||
$.each(ids, function (i, item) {
|
||
element.tabDelete(currentNav, item);
|
||
})
|
||
}
|
||
/**
|
||
* 重新加载iFrame，实现更新
|
||
* @returns {boolean}
|
||
*/
|
||
let refreshiFrame = function () {
|
||
let $curFrame = $('iframe:visible');
|
||
$curFrame.attr("src", $curFrame.attr("src"));
|
||
return false;
|
||
}
|
||
/**
|
||
*复制打开新的页面
|
||
* @returns {boolean}
|
||
*/
|
||
let opennewWin = function () {
|
||
let $curFrame = $('iframe:visible').attr("src");
|
||
window.open($curFrame);
|
||
return false;
|
||
}
|
||
|
||
let rightmenuObj = new RIGHTMENUMOD();
|
||
exports(MOD_NAME, rightmenuObj);
|
||
}) |