有时，当我们打开很多tabs当标签,要关闭一个接一个，它只能被关停

显然太麻烦,能够在选项卡的最右边加入一个button 实现关闭所有。

代码例如以下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>

		<title>index.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

		<meta http-equiv="description" content="this is my page">

		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">

		<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">

		<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">

		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>

		<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

	</head>

	<body class="easyui-layout">

		<div data-options="region:'west',title:'West',split:true"

			style="width: 150px;">

			<ul id="mytree">

				<li>

					<span>File1</span>

				</li>

				<li>

					<span>File2</span>

				</li>

				<li>

					<span>File3</span>

				</li>

				<li>

					<span>File4</span>

				</li>

				<li>

					<span>File5</span>

				</li>

			</ul>

		</div>

		<div data-options="fit:true,region:'center',title:'center title'"

			style="padding: 5px; background: #eee;">

			<div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;">

				<div title="首页" data-options="closeable:true" style="padding: 20px; display: none;">

					首页

				</div>

			</div>

		</div>

	</body>

	<script type="text/javascript">

		$.parser.onComplete = function() {

			//......

		}

		//载入树型菜单

		$('#mytree').tree( {

			onSelect : function(node) {

				openMenuTow(node);

			}

		});

		function openMenuTow(node) {

			//树型菜单的名字

			var noteText = $(".tree-title", node.target).text();

			var exist_tab = $('#tt').tabs('getTab', noteText);

			//推断是否已经打开该选项卡

			if (exist_tab) {

				$('#tt').tabs('select', noteText);

				return;

			} else {

				$('#tt').tabs('add', {

					'id' : 'tab',

					title : noteText,

					fit : true,

					content : '',

					closable : true

				});

				//获取最后一个tabs 在新加的选项卡后面加入"关闭所有"

				var li = $(".tabs-wrap ul li:last-child");

				$("#close").remove();

				li.after("<li id='close'><a class='tabs-inner' href='javascript:void()' onClick='javascript:closeAll()'>关闭所有</a></li>");

			}

		}

		function closeAll() {

			$(".tabs li").each(function(index, obj) {

			      //获取所有可关闭的选项卡

				  var tab = $(".tabs-closable", this).text();

				  $(".easyui-tabs").tabs('close', tab);

			});

			$("#close").remove();//同一时候把此button关闭

		}

	</script>

</html>

效果图：


注：上面代码所有拷贝到html文件里就可以执行,由于css、js文件是在线引入的，假设载入过慢

你可以介绍自己easyui本地文件。

版权声明：本文博客原创文章，博客，未经同意，不得转载。

jQuery EasyUI实现全部关闭tabs的更多相关文章

  1. jquery easyui 显示和关闭数据加载的遮罩

    $('#yearReportTable').datagrid('loading');//打开等待div $('#yearReportTable').datagrid('loaded');//关闭等待d ...

  2. 实现jquery EasyUI tabs选项卡关闭图标后载入自己定义事件

    当关闭tabs选项卡时,底部footer须要通过javascript又一次定位calcFooter(),怎样实现呢?选项卡上的关闭图标的方法是easyui自带的,calcFooter()写在onClo ...

  3. 第二百节，jQuery EasyUI，Tabs(选项卡)组件

    jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...

  4. Jquery EasyUI tabs处理

    一 获取选中的 Tab 1.   // 获取选中的 tab panel 和它的 tab 对象 2.  var pp = $('#tt').tabs('getSelected'); 3.  var ta ...

  5. jQuery EasyUI 选项卡面板tabs使用实例精讲

    1. 对选项卡面板区域 div 设置 class=”easyui-tabs” 2. 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title) 3. 设置面板 fi ...

  6. jquery easyui中文培训文档

    目  录 1.... Accordion(可折叠标签)... 2 1.1          实例... 2 1.2          参数... 3 2.... DateBox(日期框)... 4 2 ...

  7. Jquery easyui 教程

            Jquery easyui教程                 目  录 1基本拖放... 4 2构建购物车型拖放... 5 3创建课程表... 8 4菜单和按钮Menu and Bu ...

  8. Jquery EasyUi实战教程布局篇

    转自:http://www.kwstu.com/ArticleView/kwstu_20139413501290 送给大家一个非常好的后台布局模板,本人后来就选择了这个模板http://www.kws ...

  9. jquery easyui二次开发总结（二）

    1.easyui tab增加“关闭所有页”.“关闭非当前页”功能. //tab增加“关闭所有页”和“关闭非当前页”的功能 $("#tabs").tabs({ onAdd:funct ...

随机推荐

  1. 怎样在屏幕上显示多个alv

    本文解说怎样在屏幕上显示多个alv. 实现这种需求关键是下面几点(举例:在屏幕上显示4个alv): 1.须要定义4个alv control 2.由于有4个alv control,于是就须要定义4个容器 ...

  2. OCP-1Z0-051-题目解析-第30题

    30. Evaluate the following CREATE TABLE commands: CREATE TABLE orders (ord_no NUMBER(2) CONSTRAINT o ...

  3. Java Executor 框架

    Java Executor 框架 Executor框架是指java5中引入的一系列并发库中与executor相关的功能类,包括Executor.Executors. ExecutorService.C ...

  4. spring4.1+springmvc4.1+mybatis3.2.8+spring-security3.2.5集成环境建设

    在最近使用的项目ssi+spring-security 结构体.建立你自己的家,这是什么环境. 只有记录的目的. 项目结构: 类文件:                                  ...

  5. 算法战斗：给定一个号码与通配符问号W，问号代表一个随机数字。 给定的整数，得到X，和W它具有相同的长度。 问：多少整数协议W的形式和的比率X大？

    如果说: 给定一个号码与通配符问号W,问号代表一个随机数字. 给定的整数,得到X,和W它具有相同的长度. 问:多少整数协议W的形式和的比率X大? 进格公式 数据的多组,两排各数据的,W,第二行是X.它 ...

  6. 冒泡排序算法（Java）

     冒泡排序即每次遍历.相邻数字间进行比較,前者大于后者进行交换,不断将最大值后移,直至沉至最后位置:算法关键要点在于确定每次循环的边界. 后面两种算法则是对冒泡排序一定程度上的改良,但相对于其它排 ...

  7. 在小发现SQL字符串比较是不是他们的大写和小写敏感

    声明:select  petName from dbo.T_pet order by petName desc 成绩:    petName    An admin A的ascii码小于a,按理说应该 ...

  8. HTML5 Storage API

    原文:HTML5 Storage API Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多. 在 ...

  9. 重新想象 Windows 8 Store Apps (25) - 选取器: 文件选取窗口, 文件夹选取窗口, 文件保存窗口

    原文:重新想象 Windows 8 Store Apps (25) - 选取器: 文件选取窗口, 文件夹选取窗口, 文件保存窗口 [源码下载] 重新想象 Windows 8 Store Apps (2 ...

  10. linux kernel 结构体赋值方法{转载}

    原文地址: http://www.chineselinuxuniversity.net/articles/48226.shtml 这几天看Linux的内核源码,突然看到init_pid_ns这个结构体 ...