js部分
/*
* 添加右击table菜单栏事件
*/
$("#tabs").tabs({
//为其附加鼠标右键事件
onContextMenu: function(e, title, index){
//该方法通知浏览器不要执行与此事件关联的默认动作
//即屏蔽了浏览器在tab页上的鼠标右键事件
e.preventDefault();
var mm = $("#tabsmenu");
//显示右键菜单
mm.menu("show",{
top: e.pageY,
left: e.pageX
}).data("tabTitle",title);
//为右键菜单选项绑定事件
mm.menu({
onClick: function(item){
closeTab(this, item.name);
}
});
}
});
/*
* 关闭tabs方法的具体实现
*/
function closeTab(menu, type){
//返回所有的选项卡
var allTabs = $("#tabs").tabs("tabs");
var allTabTitle = [];
// console.log(allTabs);这里是dom节点
$.each(allTabs, function(i, n){
// console.log(n);这里是当前打开的每一个tabs的jQuery对象
//这里是返回的options对象
var opt = $(n).panel("options");
if(opt.closable){//如果显示关闭按钮
//就把当前选中的选项卡的标题放入空数组中
allTabTitle.push(opt.title);
}
});
//这里是将获取当前选项卡的标题
var curTabTitle = $(menu).data("tabTitle");
switch(type){
case 1:
//关闭当前 -- 这里是根据选项卡的标题来关闭选项卡
$("#tabs").tabs("close", curTabTitle);
return false;
break;
case 2:
//关闭其他
for(var i = 0; i < allTabTitle.length; i++){
if(curTabTitle != allTabTitle[i]){
$("#tabs").tabs("close",allTabTitle[i]);
}
}
//这里是关闭完了其他选项卡之后，就选中当前选项卡
$("#tabs").tabs("select",curTabTitle);
break;
case 3:
//关闭右侧
for(var i = 0; i < allTabTitle.length; i++){
//先通过循环遍历，获取出当前选项卡所对应的下标
if(curTabTitle == allTabTitle[i]){//相等的时候表示为当前，如果大于表示右侧，如果小于，表示左侧
//关闭右侧，其实就是关闭下标比当前下标大一些的选项卡
for (var j = i + 1; j < allTabTitle.length; j++) {
//然后这里的循环就从i+1开始，只要小于所有选项卡数组的长度，就直接删除
$("#tabs").tabs("close",allTabTitle[j]);//关闭右侧就关闭i+1
}
}
}
break;
case 4:
//关闭左侧
for(var i = 0; i < allTabTitle.length; i++){
//先通过循环遍历，获取出当前选项卡所对应的下标
if(curTabTitle == allTabTitle[i]){//相等的时候表示为当前，如果大于表示右侧，如果小于，表示左侧
//这里关闭左侧的原理，就是关闭比当前选中选项卡的下标要小的选项卡
for (var j = 0; j < i; j++) {//这里就从0开始删，到i-1结束
//这里就是开始循环删除，只要j是小于i的就直接删除
$("#tabs").tabs("close",allTabTitle[j]);//关闭右侧就关闭i+1
}
}
}
break;
case 5:
//关闭所有
for(var i = 0; i < allTabTitle.length; i++){
$("#tabs").tabs("close",allTabTitle[i]);
}
break;
}
}
});html
<head>
<%@include file="common/header.jsp"%>
<%-- <link rel="stylesheet" href="/static/css/main.css">--%>
<title>Title</title>
<script type="text/javascript" src="/static/js/module/main.js"></script>
</head>
<body class="easyui-layout">
<%--右键关闭选项卡--%>
<div id="tabsmenu" class="easyui-menu" style="width:100px;display: none">
<div data-options="name:1" id="now" iconcls="icon-shield">关闭当前</div>
<div data-options="name:2" id="other" iconcls="icon-shield">关闭非当前</div>
<div data-options="name:3" id="right" iconcls="icon-shield">关闭右侧所有</div>
<div data-options="name:4" id="left" iconcls="icon-shield">关闭左侧所有</div>
<div data-options="name:5" id="all" iconcls="icon-shield">关闭所有</div>
</div>
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。