有时，当我们打开很多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. AIX 中以并发模式挂载vg

    要想以并发模式挂载VG 必须要有/usr/sbin/gsclvmd 这个进程,而些进程是安装HACMP 的必要的文件集bos.clvm.enh,同时gsclvmd 也是由HACMP 启动的,多个节点挂 ...

  2. Hibernate常用Annotation标签说明

    @ javax.persistence.Entity 实体类定义,该标签表示当前类是一个Hibernate的数据库实体,对应着数据库中的某个表 位置:用于类级别 参数:无 样例:@Entity 注意: ...

  3. css 简单 返回顶部 代码及注释说明

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  4. Git在下搭建下环境的工具

    (本文稿来自:http://www.open-open.com/news/view/55387) Git是一个快速,可扩展的,分布式的版本控制系统.Git服务器起初是专为Linux开发,后来移植至Wi ...

  5. IOS应用程序生命周期详解

    第一. IOS应用程序的五种状态: 1. Not running:应用还没有启动,或者应用正在运行但是途中被系统停止. 2. Inactive:当前应用正在前台运行,但是并不接收事件(当前或许正在执行 ...

  6. 黄聪：Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (初级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (初级) 企业库提供了一个很强大的验证应用程序模 ...

  7. POJ1163 The Triangle 【DP】

    The Triangle Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 36918   Accepted: 22117 De ...

  8. POJ 2240 Arbitrage(最短路 套汇)

    题意  给你n种币种之间的汇率关系  推断是否能形成套汇现象  即某币种多次换为其他币种再换回来结果比原来多 基础的最短路  仅仅是加号换为了乘号 #include<cstdio> #in ...

  9. [TroubleShooting]&#39;trn\bak&#39; is incorrectly formed. SQL Server cannot process this media family.

     SQL Server online consultants came across an interesting scenario where one of our client was una ...

  10. android 编译调用C代码

    博客地址:www.zalezone.cn 前言 需求来源 这几天帮别人做一个简单的androidclient,也没什么功能,主要就是调用C代码来对手机的Wifi网络进行设置.于是也就引出了技术难点所在 ...