easyUI选项卡—右键关闭tabs

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

右击事件中弹出的HTMl内容

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

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

 		//绑定右键菜单事件
	          $(".easyui-tabs").bind('contextmenu',function(e){         
	         e.preventDefault();  
	            $('#rcmenu').menu('show', {  
	                left: e.pageX,  
	                top: e.pageY  
	            });  
	        });  
	        //关闭所有标签页  
	         $("#closeall").bind("click",function(){  
	            var tablist =$('#back_mainTab').tabs('tabs');
	             console.log(tablist);
	          //  return; 
	            for(var i=tablist.length-1;i>=1;i--){  
	                $('#back_mainTab').tabs('close',i);  
	            }  
	        });   
	        //关闭其他页面（先关闭右侧，再关闭左侧）  
	        $("#closeother").bind("click",function(){  
	            var tablist = $('#back_mainTab').tabs('tabs');  
	            var tab = $('#back_mainTab').tabs('getSelected');  
	            var index = $('#back_mainTab').tabs('getTabIndex',tab);  
	            for(var i=tablist.length-1;i>index;i--){  
	                $('#back_mainTab').tabs('close',i);  
	            }  
	            var num = index-1;  
	            if(num < 1){  
	                return;  
	            }else{  
	                for(var i=num;i>=1;i--){  
	                    $('#back_mainTab').tabs('close',i);  
	                }  
	                $("#back_mainTab").tabs("select", 1);  
	            }  
	        });  
	        //关闭右边的选项卡
	        $("#closeright").bind("click",function(){  
	            var tablist = $('#back_mainTab').tabs('tabs');  
	            var tab = $('#back_mainTab').tabs('getSelected');  
	            var index = $('#back_mainTab').tabs('getTabIndex',tab);  
	            for(var i=tablist.length-1;i>index;i--){  
	                $('#back_mainTab').tabs('close',i);  
	            }  
	        });  
	        //关闭右边的选项卡
	        $("#closeleft").bind("click",function(){  
	            var tablist = $('#back_mainTab').tabs('tabs');  
	            var tab = $('#back_mainTab').tabs('getSelected');  
	            var index = $('#back_mainTab').tabs('getTabIndex',tab);  
	            var num = index-1;  
	            if(num < 1){  
	                return;  
	            }else{  
	                for(var i=num;i>=1;i--){  
	                    $('#back_mainTab').tabs('close',i);  
	                }  
	                $("#back_mainTab").tabs("select", 1);  
	            }   
	        });  
		

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

<!-- 中间 -->
	<div id="cc"
		data-options="region:'center',title:'主操作区',
			 tools: [{   
        		iconCls:'icon-full',
       			handler:function(){full()}   
    		},{   
        		iconCls:'icon-unfull',
       			handler:function(){unFull()}   
    		}]">
		<div id="back_mainTab" class="easyui-tabs" data-options="fit:true"></div>

	</div>

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

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