使⽤layui实现的⽔平导航动态操作tab项以及优化⿏标右键功
能
该篇⽂章主要优化tab的⿏标右键事件，之前看了⼏篇类似⽂章有⿏标右键事件，但是⿏标右键记录的id都是新增Tab的id，所以右键关闭都是定死的，只能关闭新增的tab，不能实现当我⿏标指向⼀个tab右键关闭时关闭当前指向的tab。
参考图⽚的右键事件（基于⿏标焦点（mouseover事件）的⿏标右键功能）
具体动态操作layui的tab（包括动态新增，删除Tab）如果下⾯⽂字看不懂的话请参考，写的⾮常清楚了
引⼊layui.js和layui.css
<!--改成本地的⽂件就可以了-->
<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代码，包括了⿏标右键功能的代码
<!-- 以下是菜单栏 -->
<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" >
<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" >
<!-- <div class="layui-tab-item layui-show">⽤户基本管理内容</div>
<div class="layui-tab-item">2</div> -->
</div>
</div>
下⾯是⿏标右键功能事件的css样式（样式如上上图）
.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代码（主要标注新增的⿏标右键功能的代码）
/
/注意：导航依赖 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+'" ></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);
});
该篇⽂章主要优化动态绑定⿏标右键功能。
欢迎⼤家继续优化该功能。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论