easyUI选项卡—右键关闭tabs

妖狐艹你老母 2022-05-28 11:07 381阅读 0赞

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

右击事件中弹出的HTMl内容

**\[html\]**  [view plain][]  [copy][view plain]

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][view plain]

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][view plain]

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的索引号进行各种关闭的

[view plain]: https://blog.csdn.net/PTtaoge/article/details/77133277#