有时，当我们打开很多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. [置顶] quartznet任务调度和消息调度（JAVA与C#版对比）

    quartznet任务调度和消息调度 1.  作用 自动执行任务. 2.  下载地址 NET版本 JAVA版本 1下载 http://quartznet.sourceforge.net/downloa ...

  2. 【转】.net IL 指令解释速查

    名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...

  3. jdbc初步（转）

    1. Jdbc的六个编程步骤 1. 注册一个驱动 注册驱动程序有三种方式: 方式一:Class.forName(“oracle.jdbc.driver.OracleDriver”); JAVA 规范中 ...

  4. android windows 上JNI编程

    昨天学习windows上的JNI编程,JNI说白了就是java和c语言的一个互相沟通的桥梁.java能够调用JNI来完毕调用C语言实现的方法. JNI的全称是(Java native interfac ...

  5. const使用摘要

    const在四种方案如以下: int b = 500; const int *a = &b; ①(底层const) int const *a = &b; ②(底层const) int ...

  6. C#访问MySQL数据库（winform+EF）

    原文:C#访问MySQL数据库(winform+EF) 以前都是C#连接SQLServer,现在MySQL也比较火了,而且是开源跨平台的,这里连接使用一下,主要是体会一下整个流程,这里使用的是winf ...

  7. MySQL的create table as 与 like区别(转)

    对于mysql的复制相同表结构方法,有create table as 和create table like 两种,区别是什么呢? create table t2 as select * from t1 ...

  8. oracle 转 mysql 最新有效法（转）

    关键字:Oracle 转 MySQL . Oracle TO MySQL 没事试用了一下Navicat家族的新产品Navicat Premium,他集 Oracle.MySQL和PostgreSQL管 ...

  9. iOS 购物—个人中心界面

    上一个QQ界面真实无心插柳,想不到一个新手的普通界面可以上首页推荐,在这谢谢那些csdn工作者对新手的支持,谢谢soledadzz  的特别推荐: 以下这个界面也是师傅锻炼我的题目主要是让我熟悉tab ...

  10. APUE读书笔记-第13章-守护进程

    第13章 守护进程 13.1 引言 *守护进程也称精灵进程(daemon)是生存期较长的一种进程.它们常常在系统自举时启动,仅在系统关闭时才终止.因为它们没有控制终端,所以说它们是在后台运行的.UNI ...