add: 添加tab右键菜单
hello
parent
3d659f7670
commit
7fd320189d
|
|
@ -0,0 +1,44 @@
|
|||
.ul-context-menu {
|
||||
list-style:none;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
z-index:9999;
|
||||
padding:5px 0;
|
||||
min-width:80px;
|
||||
margin:0;
|
||||
display:none;
|
||||
font-family:微软雅黑;
|
||||
font-size:14px;
|
||||
background-color:#fff;
|
||||
border:1px solid rgba(0, 0, 0, .15);
|
||||
box-sizing:border-box;
|
||||
border-radius:4px;
|
||||
-webkit-box-shadow:0 4px 12px rgba(0, 0, 0, .1);
|
||||
-moz-box-shadow:0 4px 12px rgba(0, 0, 0, .1);
|
||||
-ms-box-shadow:0 4px 12px rgba(0, 0, 0, .1);
|
||||
-o-box-shadow:0 4px 12px rgba(0, 0, 0, .1);
|
||||
box-shadow:0 4px 12px rgba(0, 0, 0, .1)
|
||||
}
|
||||
.ul-context-menu .ui-context-menu-item {
|
||||
margin:0;
|
||||
padding:0
|
||||
}
|
||||
.ul-context-menu .ui-context-menu-item a {
|
||||
display:block;
|
||||
padding:0 10px;
|
||||
color:#333;
|
||||
white-space:nowrap;
|
||||
text-decoration:none
|
||||
}
|
||||
.ul-context-menu .ui-context-menu-item a:hover {
|
||||
text-decoration:none;
|
||||
color:#262626
|
||||
}
|
||||
.ul-context-menu .ui-context-menu-item .icon {
|
||||
width:16px;
|
||||
height:16px;
|
||||
margin-right:8px;
|
||||
vertical-align:middle;
|
||||
border:0
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import "../lib/layui/css/layui.css";
|
||||
@import "../lib/fonts/iconfont.css";
|
||||
@import "./jquery.contextMenu.css";
|
||||
|
||||
/*边距*/
|
||||
.ptb20{
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
|
||||
|
||||
var objOkTab = "";
|
||||
layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () {
|
||||
layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "jQContextMenu"], function () {
|
||||
var okUtils = layui.okUtils;
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
|
|
@ -23,6 +23,42 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () {
|
|||
* 左侧导航渲染完成之后的操作
|
||||
*/
|
||||
okTab.render(function () {
|
||||
/**tab栏的鼠标右键事件**/
|
||||
$("body .ok-tab").contextMenu({
|
||||
width: 'auto',
|
||||
itemHeight: 30,
|
||||
menu: [
|
||||
{
|
||||
text: "定位所在页",
|
||||
icon: "ok-icon ok-icon-location",
|
||||
callback: function () {
|
||||
okTab.positionTab();
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭当前页",
|
||||
icon: "ok-icon ok-icon-roundclose",
|
||||
callback: function () {
|
||||
okTab.tabClose(1);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭其他页",
|
||||
icon: "ok-icon ok-icon-roundclose",
|
||||
callback: function () {
|
||||
okTab.tabClose(2);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "关闭所有页",
|
||||
icon: "ok-icon ok-icon-roundclose",
|
||||
callback: function () {
|
||||
|
||||
okTab.tabClose(3);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
layui.define(['jquery'], function (exports) {
|
||||
var jQuery = layui.jquery;
|
||||
!function (t, n, e, i) {
|
||||
var o = function (t, n) {
|
||||
this.init(t, n)
|
||||
};
|
||||
o.prototype = {
|
||||
init: function (t, n) {
|
||||
this.ele = t, this.defaults = {
|
||||
menu: [{
|
||||
text: "菜单一", callback: function () {
|
||||
}
|
||||
}, {
|
||||
text: "菜单二", callback: function () {
|
||||
}
|
||||
}], target: function (t) {
|
||||
}, width: 100, itemHeight: 28, bgColor: "#fff", color: "#333", fontSize: 14, hoverBgColor: "#f5f5f5"
|
||||
}, this.opts = e.extend(!0, {}, this.defaults, n), this.random = (new Date).getTime() + parseInt(1e3 * Math.random()), this.eventBind()
|
||||
}, renderMenu: function () {
|
||||
var t = this, n = "#uiContextMenu_" + this.random;
|
||||
if (!(e(n).length > 0)) {
|
||||
var t = this, i = '<ul class="ul-context-menu" id="uiContextMenu_' + this.random + '">';
|
||||
e.each(this.opts.menu, function (t, n) {
|
||||
n.icon ? i += '<li class="ui-context-menu-item"><a href="javascript:void(0);">' +
|
||||
'<icon class="icon ' + n.icon + '" ></icon>' +
|
||||
'<span>' + n.text + "</span></a></li>" : i += '<li class="ui-context-menu-item"><a href="javascript:void(0);"><span>' + n.text + "</span></a></li>"
|
||||
}), i += "</ul>", e("body").append(i).find(".ul-context-menu").hide(), this.initStyle(n), e(n).on("click", ".ui-context-menu-item", function (n) {
|
||||
t.menuItemClick(e(this)), n.stopPropagation()
|
||||
})
|
||||
}
|
||||
}, initStyle: function (t) {
|
||||
var n = this.opts;
|
||||
e(t).css({width: n.width, backgroundColor: n.bgColor}).find(".ui-context-menu-item a").css({
|
||||
color: n.color,
|
||||
fontSize: n.fontSize,
|
||||
height: n.itemHeight,
|
||||
lineHeight: n.itemHeight + "px"
|
||||
}).hover(function () {
|
||||
e(this).css({backgroundColor: n.hoverBgColor})
|
||||
}, function () {
|
||||
e(this).css({backgroundColor: n.bgColor})
|
||||
})
|
||||
}, menuItemClick: function (t) {
|
||||
var n = this, e = t.index();
|
||||
t.parent(".ul-context-menu").hide(), n.opts.menu[e].callback && "function" == typeof n.opts.menu[e].callback && n.opts.menu[e].callback()
|
||||
}, setPosition: function (t) {
|
||||
e("#uiContextMenu_" + this.random).css({left: t.clientX + 2, top: t.clientY + 2}).show()
|
||||
}, eventBind: function () {
|
||||
var t = this;
|
||||
this.ele.on("contextmenu", function (n) {
|
||||
n.preventDefault(), t.renderMenu(), t.setPosition(n), t.opts.target && "function" == typeof t.opts.target && t.opts.target(e(this))
|
||||
}), e(n).on("click", function () {
|
||||
e(".ul-context-menu").hide()
|
||||
})
|
||||
}
|
||||
}, e.fn.contextMenu = function (t) {
|
||||
return new o(this, t), this
|
||||
}
|
||||
}(window, document, jQuery);
|
||||
exports('jQContextMenu', function (obj) {
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -175,8 +175,8 @@ layui.define(["element", "jquery"], function (exports) {
|
|||
okTab.prototype.positionTab = function (contEle, ele) {
|
||||
|
||||
var superEle = $(".ok-tab");//父级元素
|
||||
contEle = $(contEle);//tab内容存放的父元素
|
||||
ele = $(ele);//当前的tab
|
||||
contEle = contEle ? $(contEle) : $("#tabTitle");//(contEle);//tab内容存放的父元素
|
||||
ele = ele ? $(ele) : $("#tabTitle li.layui-this");//当前的tab
|
||||
|
||||
var menuSet = $("#navBar a[lay-id]");//获取所有菜单集合
|
||||
var thatLayId = ele.attr('lay-id');
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ if (!Object.assign) {
|
|||
"okAddlink": "okmodules/okAddlink",
|
||||
"okLayer": "okmodules/okLayer",
|
||||
"okMock": "okmodules/okMock",
|
||||
"jQContextMenu": "okmodules/jQContextMenu",
|
||||
};
|
||||
var modulePath = Object.assign({
|
||||
layer: "modules/layer",
|
||||
|
|
|
|||
Loading…
Reference in New Issue