【第004篇】JQueryEasyUI-页签右键关闭示例代码

JSP页面代码：

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/base.jsp" %>
<div class="easyui-layout" data-options="fit:true">
	<div data-options="region:'center',border:false">
		<div id="dataquerystatisticsview_main_tabs" class="easyui-tabs main-tabs" data-options="fit:true,border:false"></div>
	</div>
</div>
<div id="dataquerystatisticsview_main_tabs_menus" class="easyui-menu" style="width:120px;">
	<div id="dataquerystatisticsview_main_tabs_menus_closeCurrent" name="closeCurrent" data-options="iconCls:'icon-standard-application-form-delete'">关闭当前</div>
	<div id="dataquerystatisticsview_main_tabs_menus_closeOthers" name="closeOthers" data-options="iconCls:'icon-standard-cancel'">关闭其他</div>
	<div id="dataquerystatisticsview_main_tabs_menus_closeAll" name="closeAll" data-options="iconCls:'icon-standard-cross'">关闭全部</div>
</div>

Javascript代码：

<script type="text/javascript">
var $dataquerystatisticsview_main_tabs=$("#dataquerystatisticsview_main_tabs");//页签
$(function(){	
	/**************************************设置页签右键关闭(开始)**********************************************/
	var $tabMenus=$("#dataquerystatisticsview_main_tabs_menus");
	//屏蔽右键菜单
	$(document).bind("contextmenu", function(e){ return false; });
	 //生成右键菜单 
	$dataquerystatisticsview_main_tabs.tabs({
		onContextMenu: function(e, title, index){
			//选中标签
			$dataquerystatisticsview_main_tabs.tabs('select',index);
			//显示右键菜单
			$tabMenus.menu('show',{
				left: e.pageX,
				top: e.pageY
			});
		}
	});
	var $closeCurrent=$("#dataquerystatisticsview_main_tabs_menus_closeCurrent");//关闭当前
	var $closeOthers=$("#dataquerystatisticsview_main_tabs_menus_closeOthers");//关闭其他
	var $closeAll=$("#dataquerystatisticsview_main_tabs_menus_closeAll");//关闭全部
	//为每个菜单绑定点击事件
	//关闭选中的标签
	$closeCurrent.click(function(){
		//获取选中的标签索引
		var tab=$dataquerystatisticsview_main_tabs.tabs('getSelected');
		var index=$dataquerystatisticsview_main_tabs.tabs('getTabIndex',tab);
		$dataquerystatisticsview_main_tabs.tabs("close",index);
	});

	//关闭选中标签之外的标签
	$closeOthers.click(function(){
		//获取所有标签
		var tabs=$dataquerystatisticsview_main_tabs.tabs("tabs");
		var length=tabs.length;
		//获取选中标签的索引
		var tab=$dataquerystatisticsview_main_tabs.tabs('getSelected');
		var index=$dataquerystatisticsview_main_tabs.tabs('getTabIndex',tab);
		//关闭选中标签之前的标签
		for(var i=0;i<index;i++){
			$dataquerystatisticsview_main_tabs.tabs("close",0);
		}
		//关闭选中标签之后的标签
		for(var i=0;i<length-index-1;i++){
			$dataquerystatisticsview_main_tabs.tabs("close",1);
		}
	});

	//关闭所有标签
	$closeAll.click(function(){
		var tabs=$dataquerystatisticsview_main_tabs.tabs("tabs");
		var length=tabs.length;
		for(var i=0;i<length;i++){
			$dataquerystatisticsview_main_tabs.tabs("close",0);
		}
	});
	/**************************************设置页签右键关闭(结束)**********************************************/
});

</script>