在使用easyui进行上左右布局一文中，我们已经使用easyui搭建起了一个简单的上左右布局。在使用的过程中，我们经常会遇到tab页打开的太多，但只能一个一个的关闭的烦恼，这个时候有没有想到eclipse中tab右键菜单的关闭其他和关闭所有选项呢？
下面我们就来使用easyui来实现tab页的关闭其他和关闭所有的功能。
1.在上一篇文章的html结构中添加入menu的结构
<body>
<div id="home-layout">
<!-- 以前的code -->
</div>
<!-- tab页的右键菜单 -->
<div id="home-tabs-menu" class="easyui-menu">
<div data-options="name:1">关闭</div>
<div data-options="name:2">关闭其他</div>
<div data-options="name:3">关闭所有</div>
</div>
</body>
2.为tab组件添加鼠标右键事件
<script>
/*
* 初始化内容区的tabs
*/
$("#home-tabs").tabs({
fit : true,
border : false,
//为其附加鼠标右键事件
onContextMenu: function(e, title, index){ //该方法通知浏览器不要执行与此事件关联的默认动作 //即屏蔽了浏览器在tab页上的鼠标右键事件
e.preventDefault();
var mm = $("#home-tabs-menu");
//显示右键菜单
mm.menu("show",{
top: e.pageY,
left: e.pageX
}).data("tabTitle",title);
//为右键菜单选项绑定事件
mm.menu({
onClick: function(item){
closeTab(this, item.name);
}
});
}
});
</script>
3.closeTab方法
<script>
/*
* 关闭tab
*/
function closeTab(menu, type){
var allTabs = $("#home-tabs").tabs("tabs");
var allTabTitle = [];
$.each(allTabs, function(i, n){
var opt = $(n).panel("options");
if(opt.closable){
allTabTitle.push(opt.title);
}
});
var curTabTitle = $(menu).data("tabTitle");
switch(type){
case 1:
//关闭当前
$("#home-tabs").tabs("close", curTabTitle);
return false;
break;
case 2:
//关闭其他
for(var i = 0; i < allTabTitle.length; i++){
if(curTabTitle != allTabTitle[i]){
$("#home-tabs").tabs("close",allTabTitle[i]);
}
}
$("#home-tabs").tabs("select",curTabTitle);
break;
case 3:
//关闭所有
for(var i = 0; i < allTabTitle.length; i++){
$("#home-tabs").tabs("close",allTabTitle[i]);
}
break;
}
}
</script>
这样就完成了tab页的右键菜单了，是不是使用起来很方便呢？当然，我们还可以继续在此基础上为它添加更多的功能！
时间： 2024-10-24 23:56:05