有时，当我们打开很多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. JVM必备指南（转）

    本文由 ImportNew - xiafei 翻译自 anturis.欢迎加入翻译小组.转载请见文末要求. 简介 Java虚拟机(JVM)是Java应用的运行环境,从一般意义上来讲,JVM是通过规范来 ...

  2. POJ3190 Stall Reservations 【贪婪】

    Stall Reservations Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3106   Accepted: 111 ...

  3. varchar 分享影响记忆　试

    准备数据 sysbench --test=oltp --oltp-nontrx-mode=update_key --mysql-table-engine=innodb --oltp-table-siz ...

  4. Jetty开发指导：Jetty Websocket API

    Jetty WebSocket API使用 Jetty提供了功能更强的WebSocket API,使用一个公共的核心API供WebSockets的服务端和client使用. 他是一个基于WebSock ...

  5. cocos2d-x 3.1.1 学习笔记［2］Sprite 精灵

    Sprite应该是用到最多的一个类吧.无法想像一个游戏没有精灵将怎样进行愉快的玩耍. Sprite继承于Node 和 TextureProtocol. Sprite是一个2d的图像. Sprite能够 ...

  6. Java--调试--单步调试，断言，单元测试

    单步调试:主要查看变量内容的变化    1.设置断点位置,设置在可能出现问题的代码 2.以Debug as方式运行 程序 3.F5 --> step into 进入方法内部进行调试    F6 ...

  7. STM32W108无线传感器网络嵌入式uCOS-II的移植及实时环境监測

    基于STM32W108无线开发板,将ucos-ii v2.86内核移植到其上,并加入用户任务.实现对温湿度.超声波.声音.光敏等传感器的控制及实时数据採集. 14.1开发环境说明 硬件:STM32W1 ...

  8. 广东省-IT红黑榜排名公司名称

    红榜Top100 Order Company Name Point Change  1 百富计算机技术(深圳)有限公司  94.00 --  2 中国网通广州分公司  88.00 --  3 深圳市汇 ...

  9. JSP生成word文件

    1.jsp生成word文件,直接改动jsp格式: <%@ page contentType="application/vnd.ms-word;charset=GB2312"% ...

  10. HTTP2.0协议

    HTTP2.0协议 http2协议的草案已经出来了,阅读了一下网上的中文版,http2尽可能的兼容http1.1.改进了http1.1协议的不足. http1.0和http1.1的缺点: 1.http ...