jQuery EasyUI实现关闭全部tabs

最新推荐文章于 2022-04-09 22:17:36 发布
最新推荐文章于 2022-04-09 22:17:36 发布
阅读量1.6k 收藏
点赞数 3
分类专栏： EasyUI

Easyui技术学习，更多知识请访问https://www.itkc8.com

有时候当我们打开很多tabs选项卡时,要关闭它只能一个一个的进行关闭

 

显然太麻烦,这时可以在选项卡的最右边添加一个按钮 实现关闭全部。

 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.     <head>  
  4.         <title>index.html</title>  
  5.   
  6.         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  7.         <meta http-equiv="description" content="this is my page">  
  8.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  9.   
  10.         <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">  
  11.         <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">  
  12.         <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">  
  13.         <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>  
  14.         <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>  
  15.   
  16.     </head>  
  17.     <body class="easyui-layout">  
  18.         <div data-options="region:'west',title:'West',split:true"  
  19.             style="width: 150px;">  
  20.             <ul id="mytree">  
  21.                 <li>  
  22.                     <span>File1</span>  
  23.                 </li>  
  24.                 <li>  
  25.                     <span>File2</span>  
  26.                 </li>  
  27.                 <li>  
  28.                     <span>File3</span>  
  29.                 </li>  
  30.                 <li>  
  31.                     <span>File4</span>  
  32.                 </li>  
  33.                 <li>  
  34.                     <span>File5</span>  
  35.                 </li>  
  36.             </ul>  
  37.         </div>  
  38.   
  39.         <div data-options="fit:true,region:'center',title:'center title'"  
  40.             style="padding: 5px; background: #eee;">  
  41.             <div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;">  
  42.                 <div title="首页" data-options="closeable:true" style="padding: 20px; display: none;">  
  43.                     首页  
  44.                 </div>  
  45.             </div>  
  46.         </div>  
  47.     </body>  
  48.     <script type="text/javascript">  
  49.         $.parser.onComplete = function() {  
  50.             //......  
  51.         }  
  52.         //加载树型菜单   
  53.         $('#mytree').tree( {  
  54.             onSelect : function(node) {  
  55.                 openMenuTow(node);  
  56.             }  
  57.         });  
  58.       
  59.         function openMenuTow(node) {  
  60.             //树型菜单的名字   
  61.             var noteText = $(".tree-title", node.target).text();  
  62.             var exist_tab = $('#tt').tabs('getTab', noteText);  
  63.             //判断是否已经打开该选项卡  
  64.             if (exist_tab) {  
  65.                 $('#tt').tabs('select', noteText);  
  66.                 return;  
  67.             } else {  
  68.                 $('#tt').tabs('add', {  
  69.                     'id' : 'tab',  
  70.                     title : noteText,  
  71.                     fit : true,  
  72.                     content : '',  
  73.                     closable : true  
  74.                 });  
  75.                 //获取最后一个tabs 在新加的选项卡后面添加"关闭全部"  
  76.                 var li = $(".tabs-wrap ul li:last-child");  
  77.                 $("#close").remove();  
  78.                 li.after("<li id='close'><a class='tabs-inner' href='javascript:void()' onClick='javascript:closeAll()'>关闭全部</a></li>");  
  79.             }  
  80.         }  
  81.       
  82.         function closeAll() {  
  83.             $(".tabs li").each(function(index, obj) {  
  84.                   //获取所有可关闭的选项卡  
  85.                   var tab = $(".tabs-closable", this).text();  
  86.                   $(".easyui-tabs").tabs('close', tab);  
  87.             });  
  88.             $("#close").remove();//同时把此按钮关闭  
  89.         }  
  90.     </script>  
  91. </html>  

 

 

 

 

 

效果图：

 

 

 

注：上面代码全部复制到html文件中即可运行,因为css、js文件是在线引入的，如果加载过慢

可自行引入easyui本地文件。

 

Easyui技术学习，更多知识请访问https://www.itkc8.com

最是那一低头的温柔
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery easyui刷新当前tabs的方法
10-21
给大家介绍了jquery easyui刷新当前tabs的方法，本文涉及到param参数的属性知识点，本文通过实例给大家介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
关闭easyui Tabs,有意思的JS异步处理
weixin_30951389的博客
04-23 126
因业务需要，需要将关闭windows窗口内的所有Tabs关闭掉，因此写了个方法，执行结果把我惊了一下。 function closeAllTabs() { var tabsCount = $("#winTabs").tabs("tabs").length;//获得Tabs个数 for (var i = 0; i < t...
easyui_tabs组件以及菜单关闭
m0_46699799的博客
06-23 559
easyui_tabs组件以及菜单关闭tabs组件静态数据的使用方法代码效果js创建的使用方法代码效果tabs的动态使用举例代码效果tabs的菜单关闭代码效果总结 tabs组件 选项卡显示一批面板。但在同一个时间只会显示一个面板 tabs的属性： tabs的事件： tabs的方法： 使用有两种方法： 静态数据的使用方法 通过标签创建选项卡 通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给标签添加一个类ID 'easyui-tabs’。每个选项卡面板都通过子标签进行
EasyUI(分页&模糊查询)
qq_63845026的博客
04-09 1498
目录 一、创建数据库 二、创建包结构 三、页面搭建 四、entity层开发 五、dao层开发 六、service层开发 七、servlet开发 前言： 这次的功能是基于上一次的项目做的，如果有不懂可以看上一节 ...
easyui 如何清空Tab
weichao202的专栏
11-16 1330
今天在清空easyui的Tab上耗时不少，不过还是搞定了，可能是我道行浅，老绝得easyui有时很诡异。整理一下代码，希望可以帮到大伙。 具体javaScirpt如下： 我自己的解决办法是[b]把所有的title先存到数组里，然后再遍历[/b]，不知网上还没更好的解决方法没，学习一下。 [code="js"] //清空所有的Tab function closeAllTabs(id){...
jQuery EasyUI 选项卡面板tabs的使用实例讲解
10-18
下面小编就为大家分享一篇jQuery EasyUI 选项卡面板tabs的使用实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jQuery EasyUI Layout实现tabs标签的实例
10-19
主要介绍了jQuery EasyUI Layout实现tabs标签的实例的相关资料,希望通过本文能帮助到大家实现这样的功能，需要的朋友可以参考下
jQuery-easyui实现关闭全部tabs
weixin_30757793的博客
01-07 194
有时候当我们打开很多tabs选项卡时,要关闭它只能一个一个的进行关闭,显然太麻烦,这时可以在选项卡的最右边添加一个按钮 实现关闭全部。 function openTab(text, url, iconCls) { if ($("#tabs").tabs("exists", text)) { $("#tabs").tabs(...
EasyUI tabs添加右键关闭菜单
03-28
NULL 博文链接：https://xiaofengtoo.iteye.com/blog/1263362
tabs关闭其他或关闭全部选项
蔚蓝色的天空
06-05 4407
&lt;!-- 右键菜单 --&gt;            &lt;div id="rcmenu"  class="menu"&gt;                &lt;div  onclick="closeAllTab()"&gt;关闭全部&lt;/div&gt;                &lt;div  onclick="closeOtherTab()
easyUI选项卡—右键关闭tabs
迷默的博客
08-13 5183
今天在改一个easyUI界面时，有个这样的需求，要我通过在选项卡上绑定一个右击事件，做到tabs全部关闭，或关闭左右变的。因为自己对easyUI不是很熟，导致搞这个功能花了比较长的事件，现在把代码贴出来，希望跟我遇到一样问题的伙伴能够少走的弯路； 右击事件中弹出的HTMl内容 关闭全部 关闭其他 当前页右侧全部关闭 当前页左侧全部关闭
easyUI中tab选项鼠标反键关闭全部，关闭左侧，关闭右侧，关闭其他。
qq383264679的专栏
12-11 4370
页面布局 //tabs选项 $(function() { //点击a下面有title的出发事件 $("a[title]").click(function() { var src = $(this).attr("title"); var title = $(this).text(); var flag = $("#tt
EasyUI(3) 页面tabs选项卡右击实现选择关闭全部，其他，左侧，右侧标签功能
郑清
11-25 2670
效果图： 代码： <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>智销系统</title> <%@ include file="/WEB-INF/views/head.jsp"%&g...
拓展06-EasyUI实现tabs右击关闭全部/关闭当前/关闭其他
vivid9527的博客
12-13 571
1、效果图 2、main.jsp 为了能够让id对应到main.js中，全部贴上来了。注意看重点 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@include file="/WEB-INF/views/head.jsp" %> <html> <head> ...
easyui中关闭所有的tab标签
紫竹星云
08-16 4990
//关闭所有的tab function closeAll(){ var tiles = new Array(); var tabs = $('#tt').tabs('tabs'); var len = tabs.length; if(len>0){ for(var j=0;j<len;j++){ var a = tabs[j].pane
只用easyui怎样实现tabs选项卡中的内容变大操作
最新发布
07-12
要实现EasyUI中Tabs选项卡中的内容放大操作，您可以使用JavaScript动态修改内容的字体大小。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Tabs内容放大示例</title> <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/themes/default/easyui.css"> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/jquery.easyui.min.js"></script> </head> <body style="margin: 0;"> <div id="tt" class="easyui-tabs" style="width:100%;height:100%;"> <div title="Tab 1" style="padding:10px;"> <div class="content"> 这是Tab 1的内容 </div> </div> <div title="Tab 2" style="padding:10px;"> <div class="content"> 这是Tab 2的内容 </div> </div> </div> <script type="text/javascript"> function zoomIn() { var zoomValue = 1.5; // 放大倍数 var $content = $('.easyui-tabs .content'); // 调整内容字体大小 var fontSize = parseFloat($content.css('font-size')); $content.css('font-size', fontSize * zoomValue); } $(function() { $('#tt').tabs(); $('<a href="#" class="easyui-linkbutton">放大</a>') .appendTo($('.tabs-wrap')) .click(function() { zoomIn(); }); }); </script> </body> </html> ``` 在上述代码中，通过点击"放大"按钮，调整了Tabs选项卡中内容的字体大小，从而实现了内容的放大效果。这里使用了`easyui-linkbutton`组件来创建按钮，并在页面加载完成后通过JavaScript代码将按钮添加到Tabs的标题栏中。通过选择相应的选择器，可以找到要放大的内容，并通过修改其字体大小来实现放大效果。您可以根据实际需求进行调整和优化。希望对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值