easyUI选项卡—右键关闭tabs

今天在改一个easyUI界面时，有个这样的需求，要我通过在选项卡上绑定一个右击事件，做到tabs全部关闭，或关闭左右变的。因为自己对easyUI不是很熟，导致搞这个功能花了比较长的事件，现在把代码贴出来，希望跟我遇到一样问题的伙伴能够少走的弯路；

右击事件中弹出的HTMl内容

[html]  view plain  copy

1. <div id="rcmenu" class="easyui-menu" style="">    
2.    <div id="closeall">关闭全部</div>    
3.    <div id="closeother">关闭其他</div>   
4.    <div id="closeright">当前页右侧全部关闭</div>  
5.     <div id="closeleft">当前页左侧全部关闭</div>   
6.  </div>  

js中绑定这个功能，这些内容记得放在function函数里，也就是说页面一加载就绑定这些事件

[html]  view plain  copy

1. <span style="white-space:pre;">     </span>//绑定右键菜单事件  
2.           $(".easyui-tabs").bind('contextmenu',function(e){           
3.          e.preventDefault();    
4.             $('#rcmenu').menu('show', {    
5.                 left: e.pageX,    
6.                 top: e.pageY    
7.             });    
8.         });    
9.         //关闭所有标签页    
10.          $("#closeall").bind("click",function(){    
11.             var tablist =$('#back_mainTab').tabs('tabs');  
12.              console.log(tablist);  
13.           //  return;   
14.             for(var i=tablist.length-1;i>=1;i--){    
15.                 $('#back_mainTab').tabs('close',i);    
16.             }    
17.         });     
18.         //关闭其他页面（先关闭右侧，再关闭左侧）    
19.         $("#closeother").bind("click",function(){    
20.             var tablist = $('#back_mainTab').tabs('tabs');    
21.             var tab = $('#back_mainTab').tabs('getSelected');    
22.             var index = $('#back_mainTab').tabs('getTabIndex',tab);    
23.             for(var i=tablist.length-1;i>index;i--){    
24.                 $('#back_mainTab').tabs('close',i);    
25.             }    
26.             var num = index-1;    
27.             if(num < 1){    
28.                 return;    
29.             }else{    
30.                 for(var i=num;i>=1;i--){    
31.                     $('#back_mainTab').tabs('close',i);    
32.                 }    
33.                 $("#back_mainTab").tabs("select", 1);    
34.             }    
35.         });    
36.         //关闭右边的选项卡  
37.         $("#closeright").bind("click",function(){    
38.             var tablist = $('#back_mainTab').tabs('tabs');    
39.             var tab = $('#back_mainTab').tabs('getSelected');    
40.             var index = $('#back_mainTab').tabs('getTabIndex',tab);    
41.             for(var i=tablist.length-1;i>index;i--){    
42.                 $('#back_mainTab').tabs('close',i);    
43.             }    
44.         });    
45.         //关闭右边的选项卡  
46.         $("#closeleft").bind("click",function(){    
47.             var tablist = $('#back_mainTab').tabs('tabs');    
48.             var tab = $('#back_mainTab').tabs('getSelected');    
49.             var index = $('#back_mainTab').tabs('getTabIndex',tab);    
50.             var num = index-1;    
51.             if(num < 1){    
52.                 return;    
53.             }else{    
54.                 for(var i=num;i>=1;i--){    
55.                     $('#back_mainTab').tabs('close',i);    
56.                 }    
57.                 $("#back_mainTab").tabs("select", 1);    
58.             }     
59.         });    
60.       

这里有个问题一定要记得，是获取easyUI中间面板中的id，如我的就是在中部布局中的div的id，通过它获取你要操作的tabs

[html]  view plain  copy

1. <!-- 中间 -->  
2.     <div id="cc"  
3.         data-options="region:'center',title:'主操作区',  
4.              tools: [{     
5.                 iconCls:'icon-full',  
6.                 handler:function(){full()}     
7.             },{     
8.                 iconCls:'icon-unfull',  
9.                 handler:function(){unFull()}     
10.             }]">  
11.         <div id="back_mainTab" class="easyui-tabs" data-options="fit:true"></div>  
12.   
13.     </div>  

鼠标的右键事件是在EasyUI中通过绑定contextmenu来实现，可以显示右键的选项显示的位置。

其中tabs的关闭时通过操作tabs的索引号进行各种关闭的