ITOO中的EasyUI—右键关闭选项卡

    最近在做ITOO的主页面，对于EasyUI也更加熟悉了。这几天就沉淀一下，将前台主页面中用到的div+css知识总结一下，开始下一步的学习。

    前台主页面是一个Tabs选项卡，主页面是固定的，因此在右键关闭的时候是不能将主页面关闭的。实现起来也很简单：

1.建立html标签，固定右键弹出的内容。

<span style="font-family:KaiTi_GB2312;font-size:18px;">  <!-- 这里是tabs页面的右键 -->
  <div id="rcmenu" class="easyui-menu" style="">
    <div id="closeall">关闭全部</div>
    <div id="closeother">关闭其他</div>
  </div></span>

2.页面加载完毕，JS绑定鼠标右键事件。

<span style="font-family:KaiTi_GB2312;font-size:18px;">	$(function(){
	  	$(".easyui-tabs").bind('contextmenu',function(e){       
		 e.preventDefault();
	        $('#rcmenu').menu('show', {
	            left: e.pageX,
	            top: e.pageY
	        });
	    });
		
	    //关闭所有标签页
	    $("#closeall").bind("click",function(){
	        var tablist = $('#tt').tabs('tabs');
	        for(var i=tablist.length-1;i>=1;i--){
	            $('#tt').tabs('close',i);
	        }
	    });
	    //关闭其他页面（先关闭右侧，再关闭左侧）
	    $("#closeother").bind("click",function(){
	        var tablist = $('#tt').tabs('tabs');
	        var tab = $('#tt').tabs('getSelected');
	        var index = $('#tt').tabs('getTabIndex',tab);
	        for(var i=tablist.length-1;i>index;i--){
	            $('#tt').tabs('close',i);
	        }
	        var num = index-1;
	        if(num < 1){
				return;
		    }else{
		        for(var i=num;i>=1;i--){
		            $('#tt').tabs('close',i);
		        }
		        $("#tt").tabs("select", 1);
		    }
	    });
	});</span>

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

    关闭选项卡这里分为：关闭全部和关闭其他按钮。

    关闭全部是获取tabs的length，然后循环关闭页面。由于这里有主页的存在，所以循环的时候需要排除主页的索引号。

关闭其他是通过获取该项的索引号，然后先关闭右侧再关闭左侧。同时关闭完毕后，让其选中该tab页面，也就是第一页

    EasyUI实现了很多基础性性的东西，其实好好的研究一下，都能实现大部分的功能。每一次使用EasyUI,都让我对前台，对EasyUI的认识更加清晰，深刻。正如我一直说：权限，深似海。同样：学习，无止境。