借鉴网上的大神做法,并改良之;
个人认为以名字去关闭实非上策,tabs重名就解决不了,匪夷所思,easyui为什么用title?
敝人使用索引关闭,以下实例,有图有真相:
1.菜单的html
<div id="mainTabDiv" data-options="region:'center'" style="background: #eee; border: none;"></div>
<div id="mm" class="easyui-menu" style="display: none;">
<div id="mm-tabclose" data-options="iconCls:'icon_cancle'" name="cur">关闭当前</div>
<div id="mm-tabcloseall" data-options="iconCls:'icon_cross'" name="all">关闭全部</div>
<div id="mm-tabcloseother" data-options="iconCls:'icon_no'" name="oth">关闭其他</div>
</div>
2.构建tab页脚本
var frameId = 'mainFrame_' + node.id;
var newTab = {
id: node.id,
title: node.text,
iconCls: node.iconCls,
content:'<iframe id="'+frameId+'" name="'+frameId+'" src="" height="100%" width="100%" frameborder="0" marginwidth="0" marginheight="0" />',
closable:true
};
$('#mainTabDiv').tabs('add',newTab);
$('#mainTabDiv').tabs({
onContextMenu: function(e, title, index){
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
}).data("index", index);
$("#mm").menu({
onClick : function (item) {
closeTab(this, item.name);
}
});
}
});
3.菜单响应事件
/**
* tab标签页右键菜单
* @param menu
* @param type
* @return
*/
function closeTab(menu, type){
var allTabs = $("#mainTabDiv").tabs('tabs');
var len = allTabs.length;
var index = $(menu).data("index");
if ('cur' == type) {
$("#mainTabDiv").tabs("close", index);
} else if ('all' == type) {
for( var i = 0; i < len; i++) {
$('#mainTabDiv').tabs('close', 0);
}
} else if ('oth' == type) {
for( var i = 0; i < len; i++) {
if(index > i){
$('#mainTabDiv').tabs('close', 0);
}else {
$('#mainTabDiv').tabs('close', 1);
}
}
}
}
终于完毕啦,睡觉~~~