有时，当我们打开很多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. SVNKIT一段代码的分析

    打印SVNkit版本库中的结构: 函数如下: 调用方法如下: listEntries(repository, ""); System.out.println("XXXXX ...

  2. js面向对象编程：命名空间

    在其它语言中为了避免类和方法重名问题,都有一个类似命名空间的概念,在js中实现类似的功能吗? 能够实现,主要是借助于js中对象的概念来实现,比如:  1 在命名空间中定义方法属性 var GiantC ...

  3. 屌丝程序猿赚钱之道之taobao 2

    续上篇,之前写的案例,都是比較0基础的. 案例4:  代写情书.软文.论文等等. 这是我一个同学的真实故事.     我隔壁寝室的小王平时没事就爱谢谢博客.逛逛论坛.大二的时候接触了威客网,開始在网上 ...

  4. POJ 3181 Dollar Dayz 简单DP

    这DP虽然简单 但是思考一下还是挺好的 题意是 1,2,3,4....k 用加法凑成N 每个数可取不限个数 令dp[i][j] 表示前i种数凑成j的方案数 然后dp[i][j] = dp[i - 1] ...

  5. SICP 1.20经验

    1.20 两者之间的主要区别是,使我们明白的操作顺序. 网上找一些答案,都死了扩大. 我们所从事的IT的. 展开搞死人IT实践. 首先考虑应用程序 我们得到 gcd(206, 40) -> gc ...

  6. hihocoder第42周 3*N骨牌覆盖（状态dp+矩阵快速幂）

    http://hihocoder.com/contest/hiho42/problem/1 给定一个n,问我们3*n的矩阵有多少种覆盖的方法 第41周做的骨牌覆盖是2*n的,状态转移方程是dp[i] ...

  7. simplePagination API

    simplePagination API simplePagination.js 一个简单的jQuery分页插件,主题和Bootstrap支持CSS 3 分页button样式 "light- ...

  8. uva 11396Claw Decomposotion（二分图判定)

     题目大意:给出一个简单无向图,每一个点的度为3.推断是否能将此图分解成若干爪的形式.使得每条边都仅仅出如今唯一的爪中. (点能够多次出如今爪中) 这道题实质上就是问这个图是否为二分图,dfs判定 ...

  9. javascript实现倒计时-------Day28

    先来两张图片,看一看今天写什么: 看到图片右上角是什么了么看到图片以下是什么了么 相信这个大家都不会陌生吧.那些生活中等着秒杀,等着抢小米人们,焦躁等待的你曾一秒一秒的盯着它看么,我不知道答案,可我知 ...

  10. Fire Net HDU

    Fire Net Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Subm ...