easyUI中tab选项鼠标反键关闭全部，关闭左侧，关闭右侧，关闭其他。

最新推荐文章于 2023-04-16 10:08:28 发布

小勇Oo

最新推荐文章于 2023-04-16 10:08:28 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： js篇

本文链接：https://blog.youkuaiyun.com/qq383264679/article/details/41868391

js篇专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一个工作流管理平台的页面布局设计，包括使用了jQuery EasyUI框架进行选项卡、菜单和右键菜单的实现。文章详细阐述了如何创建、添加、选择和关闭选项卡，以及右键菜单的触发和关闭操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页面布局</title>
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css" />
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
	<link rel="stylesheet" type="text/css" href="common.css" />
<script type="text/javascript">
	//tabs选项
	$(function() {
		//点击a下面有title的出发事件
		$("a[title]").click(function() {
			  var src = $(this).attr("title");
			  var title = $(this).text();
			  	
			  var flag = $("#tt").tabs("exists",title);	
			  if(!flag) {
				  //在tab中添加选项卡
				  $('#tt').tabs('add',{   
						title: title,   
						content:'Tab Body',   
						closable:true  
				  }); 
			  } else {
			  	  $("#tt").tabs("select",title);			  
			  }
		});
		
		//tab右键触发时候所触发的函数
		$("#tt").tabs({
			onContextMenu:function(e, title) {
				//在每个菜单选项中添加title值
				var $divMenu = $("#tab_rightmenu div[id]");
				$divMenu.each(function() {
					$(this).attr("id", title);
				});
				
				//显示menu菜单
				$('#tab_rightmenu').menu('show', {   
				    left: e.pageX,	
					top: e.pageY   
				}); 
				e.preventDefault();
			}
		});
		//实例化menu点击触发事件
		$('#tab_rightmenu').menu({
			"onClick":function(item) {
				closeTab(item.id,item.text);
			}
		});
	});
	//关闭
	function closeTab(title, text) {
		if(text == '关闭全部标签') {
			$(".tabs li").each(function(index, obj) {
          		  //获取所有可关闭的选项卡
         		  var tabTitle = $(".tabs-closable", this).text();
          		  $("#tt").tabs("close", tabTitle);
     		 });
		}
		
		if(text == '关闭其他标签') {
			$(".tabs li").each(function(index, obj) {
          		  //获取所有可关闭的选项卡
         		  var tabTitle = $(".tabs-closable", this).text();
				  if(tabTitle != title) {
				  	$("#tt").tabs("close", tabTitle);
				  }
     		 });
		}
		
		if(text == '关闭右侧标签') {
			 var $tabs = $(".tabs li");
			 for(var i = $tabs.length - 1; i >= 0; i--) {
			 	//获取所有可关闭的选项卡
         	    var tabTitle = $(".tabs-closable", $tabs[i]).text();
			    if(tabTitle != title) {
					$("#tt").tabs("close", tabTitle);
				} else {
					break;
				}
			 }
		}
		
		if(text == '关闭左侧标签') {
			 var $tabs = $(".tabs li");
			 for(var i = 0; i < $tabs.length; i++) {
			 	//获取所有可关闭的选项卡
         	    var tabTitle = $(".tabs-closable", $tabs[i]).text();
			    if(tabTitle != title) {
					$("#tt").tabs("close", tabTitle);
				} else {
					break;
				}
			 }
		}
	}










</script>	
</head>
<style type="text/css">
	body {
		width:960px;
		height:600px;
		padding:0px;
	}
	center 
	{
      margin:0px;
      padding:0px;
      background-color:#E7EAEB;
      font-family:"微软雅黑","黑体","宋体";
      font-size:12px;
      height:63px;
            
	}
</style>
<body  class="easyui-layout">
      <div region="north" title="" split="false" style="height:65px;">
	  		<center><font size="+3" color="#0033CC">Activiti工作流设计器</font></center>
	  </div>  
	  <div region="west" split="true" title="工作流选项" style="width:200px;" iconCls="icon-undo">
	  			<!--accordion 选项卡 -->
		  <div id="aa" class="easyui-accordion" style="width:300px;height:200px;" fit=true>  
			<div title="模型" iconCls="icon-save" style="overflow:auto;padding:10px;" selected="true">  
				<a title="src" href="#">模型列表</a>
			</div> 
			 
			<div title="流程管理" iconCls="icon-reload" style="padding:10px;">  
				<a title="aaa" href="#">流程定义及部署</a> <br />
				<a title="aaavv" href="#">运行中的流程</a>
			</div>  
			
			<div title="综合流程" style="overflow:auto;padding:10px;">  
				<a title="" href="#">流程列表</a> <br />
				<a title="" href="#">任务列表(综合)</a> <br />
				<a title="" href="#">运行中的流程(综合)</a> <br />
				<a title="" href="#">已结束的流程(综合)</a> <br /> 
			</div>  
			
			<div title="语言" style="overflow:auto;padding:10px;">  
				<a title="" href="#">英语</a> <br />
				<a title="" href="#">汉语</a> 
			</div> 
			
			<div title="业务办理" style="overflow:auto;padding:10px;">  
				<a title="" href="#">模型</a>
			</div> 
	     </div>  

	  </div>  
	  
	  
      <div region="center" title="center title" style="padding:5px;background:#eee;">
	  		<!-- tab选项卡 -->
			<div id="tt" class="easyui-tabs" style="width:500px;height:250px;" fit=true>  
				<div title="首页" style="padding:20px;display:black;">  
						欢迎来到工作流管理平台   
				</div>   
		    </div>  
	  </div>  
	  
<!--关闭tab选项菜单-->
<div id="tab_rightmenu" class="easyui-menu" style="width:120px; display:none"> 
	<div name="tab_menu-tabcloseall" id="closeAll">
		关闭全部标签
	</div> 

	<div name="tab_menu-tabcloseother" id="closeOthor">
		关闭其他标签
	</div> 

	<div class="menu-sep"></div> 

	<div name="tab_menu-tabcloseright" id="closeRight">
		关闭右侧标签
	</div> 	
	<div name="tab_menu-tabcloseleft" id="closeLeft">
		关闭左侧标签
	</div> 
</div>  
</body>
</html>