使用layui实现的水平导航动态操作tab项以及优化鼠标右键功能

基于之前几篇博客优化layui的tab鼠标右键功能（参考博客https://www.geek-share.com/detail/2730890357.html），使用layui实现的水平导航动态操作tab项，本篇博客主要讲的是：新增基于鼠标焦点（mouseover事件）的鼠标右键功能（包括刷新，关闭其他，关闭右边所有，关闭所有）

该篇文章主要优化tab的鼠标右键事件，之前看了几篇类似文章有鼠标右键事件，但是鼠标右键记录的id都是新增Tab的id，所以右键关闭都是定死的，只能关闭新增的tab，不能实现当我鼠标指向一个tab右键关闭时关闭当前指向的tab。

参考图片的右键事件（基于鼠标焦点（mouseover事件）的鼠标右键功能）

具体动态操作layui的tab（包括动态新增，删除Tab）如果下面文字看不懂的话请参考上述的博客，写的非常清楚了

引入layui.js和layui.css 

[code]<!--改成本地的文件就可以了-->
<link rel="stylesheet" href="client/homePage/layui/css/layui.css"  media="all">
<script src="client/homePage/layui/layui.js" charset="utf-8"></script>

下面是水平导航（layui的Tab和Tab界面）的html代码，包括了鼠标右键功能的代码

[code]<!-- 以下是菜单栏 -->
<ul class="layui-nav">
<li class="layui-nav-item"><a data-url="11" data-id="11" data-title="选项a"  class="site-demo-active"  href="javascript:void(0);">测试1Tab</a></li>
<li class="layui-nav-item"><a data-url="22" data-id="22" data-title="选项b"  class="site-demo-active"  href="javascript:void(0);">测试2Tab</a></li>
</ul>

<!-- 以下是tab界面 -->
<div class="layui-tab layui-tab-card" lay-allowclose="true" lay-filter="home-tabs">
<ul class="layui-tab-title">
<!-- <li lay-id="33" class="layui-this">网站设置</li>
<li>用户基本管理</li>  -->
</ul>

<!-- 以下鼠标右键功能 界面 -->
<ul class="rightmenu" style="display: none;position: absolute;">
<li data-type="refresh">刷新</li>
<li data-type="closeOthers">关闭其他</li>
<li data-type="closeRight">关闭右边所有</li>
<li data-type="closeAll">关闭所有</li>
</ul>
<!-- 以上鼠标右键功能界面 -->

<div class="layui-tab-content" style="height: 745px;background-color: white;">
<!-- <div class="layui-tab-item layui-show">用户基本管理内容</div>
<div class="layui-tab-item">2</div>  -->
</div>
</div>

下面是鼠标右键功能事件的css样式（样式如上上图）

[code].rightmenu {
position: absolute;
width: 100px;
z-index: 9999;
display: none;
background-color: #fff;
padding: 2px;
color: #333;
border: 1px solid #eee;
border-radius: 2px;
cursor: pointer;
}
.rightmenu li { text-align: center; display: block; height: 35px; line-height: 35px; }
.rightmenu li:hover { background-color: #666; color: #fff; }

下面就是具体操作动态layui的Tab的js代码（主要标注新增的鼠标右键功能的代码）

[code]//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var $ = layui.jquery
,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

//触发事件
var active = {
tabAdd: function(json){
//新增一个Tab项
element.tabAdd('home-tabs', {
title: json.title //用于演示
,content: '<iframe data-frameid="'+json.id+'" scrolling="auto" frameborder="0" src="'+json.url+'" style="width:100%;height:745px;"></iframe>'
,id: json.id
});

//通过鼠标mouseover事件  动态将新增的tab下的li标签绑定鼠标右键功能的菜单
//下面的json.id是动态新增Tab的id，一定要传入这个id,避免重复加载mouseover数据
$(".layui-tab-title li[lay-id="+json.id+"]").mouseover(function(){
var tabId = $(this).attr("lay-id");
CustomRightClick(tabId);
});
//-----------以上是动态新增鼠标右键的事件-----------------

}
,tabChange: function(id) {
//切换到指定Tab项
element.tabChange('home-tabs', id); //根据传入的id传入到指定的tab项
},
tabDelete: function (id) {
element.tabDelete('home-tabs', id);//删除
},
tabRefresh: function (id) {//刷新页面
$("iframe[data-frameid='"+id+"']").attr("src",$("iframe[data-frameid='"+id+"']").attr("src"))//刷新框架
}
};

//当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
$('.site-demo-active').on('click', function() {
var dataid = $(this);
var json = {
url : dataid.attr("data-url"),
id : dataid.attr("data-id"),
title : dataid.attr("data-title")
};

//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
if ($(".layui-tab-title li[lay-id]").length <= 0) {
//如果比零小，则直接打开新的tab项
active.tabAdd(json);
} else {
//否则判断该tab项是否以及存在

var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
$.each($(".layui-tab-title li[lay-id]"), function () {
//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
if ($(this).attr("lay-id") == dataid.attr("data-id")) {
isData = true;
}
})
if (isData == false) {
//标志为false 新增一个tab项
active.tabAdd(json);
}
}
//最后不管是否新增tab，最后都转到要打开的选项页面上
active.tabChange(dataid.attr("data-id"));
});

//绑定右键菜单
function CustomRightClick(id) {
// 阻止浏览器鼠标右键单击事件
$('.layui-tab-title li').on('contextmenu', function () { return false; })
//单击取消右键菜单
$('body').click(function () {
$('.rightmenu').hide();
});

//tab点击右键
$('.layui-tab-title li').on('contextmenu', function (e) {
var popupmenu = $(".rightmenu");
popupmenu.find("li").attr("data-id",id);
l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
popupmenu.css({ left: l, top: t }).show();
return false;
});
}

$(".rightmenu li").click(function () {
//当前的tabId
var currentTabId = $(this).attr("data-id");

if ($(this).attr("data-type") == "closeOthers") {//关闭其他
var tabtitle = $(".layui-tab-title li");
$.each(tabtitle, function (i) {
if($(this).attr("lay-id")!=currentTabId){
active.tabDelete($(this).attr("lay-id"))
}
})
} else if ($(this).attr("data-type") == "closeAll") {//关闭全部
var tabtitle = $(".layui-tab-title li");
$.each(tabtitle, function (i) {
active.tabDelete($(this).attr("lay-id"))
})

}else if ($(this).attr("data-type") == "refresh") {//刷新页面
active.tabRefresh($(this).attr("data-id"));

}else if ($(this).attr("data-type") == "closeRight") {//关闭右边所有
//找到当前聚焦的li之后的所有li标签 然后遍历
var tabtitle = $(".layui-tab-title li[lay-id="+currentTabId+"]~li");
$.each(tabtitle, function (i) {
active.tabDelete($(this).attr("lay-id"))
})
}

$('.rightmenu').hide();
})

//默认开始就新增一个tab
var json = {
url : 444,
id : 444,
title : 444
};
active.tabAdd(json);
active.tabChange(json.id);

});

该篇文章主要优化动态绑定鼠标右键功能。

欢迎大家继续优化该功能。