摘要: 在使用easyui-tabs时,当我们打开许多个tab后,我们希望也能像浏览器窗口一样有一个右键菜单,包含关闭全部、关闭当前、关闭右侧等操作,该文就讲述如何实现此功能。
挂上一图,看看效果,菜单就是easyui的menu组件,使用者可以为菜单选项添加图标,定义样式,甚至可以设置多级结构的菜单。
<div id="rcmenu" class="easyui-menu" style="">
<div data-options="iconCls:'icon-cancel'" id="closecur">
关闭
</div>
<div id="closeall">
关闭全部
</div>
<div id="closeother">
关闭其他
</div>
<div class="menu-sep"></div>
<div id="closeright">
关闭右侧标签页
</div>
<div id="closeleft">
关闭左侧标签页
</div>
</div>
js部分:
$(function(){
$(".tabs-header").bind('contextmenu',function(e){
e.preventDefault();
$('#rcmenu').menu('show', {
left: e.pageX,
top: e.pageY
});
});
//关闭当前标签页
$("#closecur").bind("click",function(){
var tab = $('#tab').tabs('getSelected');
var index = $('#tab').tabs('getTabIndex',tab);
$('#tab').tabs('close',index);
});
//关闭所有标签页
$("#closeall").bind("click",function(){
var tablist = $('#tab').tabs('tabs');
for(var i=tablist.length-1;i>=0;i--){
$('#tab').tabs('close',i);
}
});
//关闭非当前标签页(先关闭右侧,再关闭左侧)
$("#closeother").bind("click",function(){
var tablist = $('#tab').tabs('tabs');
var tab = $('#tab').tabs('getSelected');
var index = $('#tab').tabs('getTabIndex',tab);
for(var i=tablist.length-1;i>index;i--){
$('#tab').tabs('close',i);
}
var num = index-1;
for(var i=num;i>=0;i--){
$('#tab').tabs('close',0);
}
});
//关闭当前标签页右侧标签页
$("#closeright").bind("click",function(){
var tablist = $('#tab').tabs('tabs');
var tab = $('#tab').tabs('getSelected');
var index = $('#tab').tabs('getTabIndex',tab);
for(var i=tablist.length-1;i>index;i--){
$('#tab').tabs('close',i);
}
});
//关闭当前标签页左侧标签页
$("#closeleft").bind("click",function(){
var tab = $('#tab').tabs('getSelected');
var index = $('#tab').tabs('getTabIndex',tab);
var num = index-1;
for(var i=0;i<=num;i++){
$('#tab').tabs('close',0);
}
});
});
$('.tabs-header')为tabs的hearder对象,通过绑定contextmenu事件,并阻止默认的事件,来实现在header区域右键弹出菜单操作。最后运用官方提供的api,来实现tab标签页的关闭。
摘自:https://my.oschina.net/jiangli0502/blog/220595