`
weichao202
  • 浏览: 96466 次
  • 性别: Icon_minigender_1
  • 来自: 陕西
社区版块
存档分类
最新评论

easyui 如何清空Tab

阅读更多
今天在清空easyui的Tab上耗时不少,不过还是搞定了,可能是我道行浅,老绝得easyui有时很诡异。整理一下代码,希望可以帮到大伙。
具体javaScirpt如下:
我自己的解决办法是把所有的title先存到数组里,然后再遍历,不知网上还没更好的解决方法没,学习一下。
//清空所有的Tab
	 function closeAllTabs(id){
	     var arrTitle = new Array();
	     var id = "#"+id;//Tab所在的层的ID
	     var tabs = $(id).tabs("tabs");//获得所有小Tab
	     var tCount = tabs.length;
	     if(tCount>0){
                     //收集所有Tab的title
		     for(var i=0;i<tCount;i++){
		         arrTitle.push(tabs[i].panel('options').title)
		     }
                     //根据收集的title一个一个删除=====清空Tab
		     for(var i=0;i<arrTitle.length;i++){
		         $(id).tabs("close",arrTitle[i]);
		     }
	     }
	 }   

html如下:
<div id="tabs_bgcom" class="easyui-tabs" data-options="fit:true,plain:true">
</div>

添加Tab
for(var i=0;i<5;i++) {
  $('#tabs_bgcom').tabs('add',{
     cache:false,
     title:"title"+i,
     href:"show!showSubTabCom.do"
  });
}

如何使用
closeAllTabs('tabs_bgcom');

如果使用如下代码不行,tabs.length不稳定会变
//清空所有的Tab
	 function closeAllTabs(id){
	     var id = "#"+id
	     var tabs = $(id).tabs("tabs");
	     if(tabs.length>0){
		for(var i=0;i<tabs.length;i++){
		     $(id).tabs("close",tabs[i].panel('options').title);
		 }
	     }
	 }   

下面这样也不行,var count = tabs.length,
//清空所有的Tab
	 function closeAllTabs(id){
	     var id = "#"+id
	     var tabs = $(id).tabs("tabs");
	     var tCount = tabs.length;
	     if(tCount>0){
		     for(var i=0;i<tCount;i++){
		        $(id).tabs("close",tabs[i].panel('options').title);
		     }
	     }
	 }   
2
0
分享到:
评论
1 楼 hcjzsw 2017-07-07  
学习了,关于tabs长度会变的问题,最后一种方式获取长度存到变量后,遍历删除时是否可以将tabs[i]改为tabs[0]

相关推荐

    easyui tab

    EasyUI Tab是一个基于jQuery和EasyUI框架的优秀Tab选项卡插件,它为网页应用程序提供了简单、高效且灵活的选项卡管理功能。EasyUI是一个轻量级的前端开发框架,集合了众多实用的组件,如表格、对话框、菜单、树形...

    Easyui添加Tab右键菜单

    在本示例中,我们将关注如何在EasyUI的Tab组件上添加右键菜单,实现包括刷新、关闭、全部关闭、关闭左侧和关闭右侧等操作。 首先,我们需要理解EasyUI的Tab组件。Tab组件是EasyUI中的一个核心组件,用于展示多个...

    关闭easyui 的tab 释放iframe的内存

    ### 关闭EasyUI的Tab并释放Iframe内存的方法 #### 背景介绍 在使用EasyUI框架开发Web应用程序时,经常会用到`Tabs`组件。`Tabs`组件允许用户在一个容器内创建多个标签页,每个标签页可以独立加载不同的内容。其中一...

    jQuery EasyUI 实例演示(菜单、TAB等)

    jQuery EasyUI 是一款基于 jQuery 的前端开发框架,它简化了网页界面的构建,提供了丰富的组件,如菜单、TAB页、对话框、表格等,帮助开发者快速实现交互式用户界面。这个实例演示集主要展示了如何使用 jQuery ...

    UI的dialogr和easyui中的tab的结合使用

    本文将深入探讨如何将Dialogr(一个对话框插件)与EasyUI的Tab组件相结合,以实现类似浏览器中多标签页的效果。 EasyUI 是一个基于 jQuery 的轻量级框架,它提供了丰富的组件,如面板、表格、表单、下拉菜单、按钮...

    实例代码讲解jquery easyui动态tab页

    本文将深入讲解如何使用 jQuery EasyUI 动态添加和刷新 Tab 页面。 首先,添加一个新的 Tab 页面主要通过调用 `tabs('add')` 方法来实现。在提供的代码示例中,`addTab` 函数接收三个参数:`title`(标签页标题)、...

    easyui layout+tab+tree实现网站基本布局

    本话题将详细探讨如何利用EasyUI的layout、tab和tree组件来实现一个基本的网站布局。 首先,`EasyUI layout` 是一种强大的布局工具,它允许开发者将页面划分为多个区域(如北、南、东、西、中),每个区域可以独立...

    easyui iframe 页面重复加载的问题

    在使用easyui框架开发Web应用时,特别是在使用tab布局的时候,开发者可能会遇到页面内容被放置在iframe中时,页面多次加载的问题。这种情况尤其会在使用easyui的tab布局时发生,因为easyui会默认加载所有tab的内容,...

    EasyUI datetimebox修改按钮 添加清空

    EasyUI默认的datetimebox并没有内置的“清空”按钮,但我们可以自定义一个按钮并绑定相应的操作,例如清空选择的时间。这需要通过jQuery来操作DOM,并监听按钮的点击事件。 ```html 清空 ``` ```javascript $("#...

    jquery-easyui关闭tab自动切换到前一个tab

    标题中的“jquery-easyui关闭tab自动切换到前一个tab”指的是在使用jQuery EasyUI库创建的多标签界面中,当用户关闭一个tab时,系统能够自动切换到被关闭tab的前一个tab,以提供更好的用户体验。jQuery EasyUI是基于...

    如何解决jQuery EasyUI 已打开Tab重新加载问题

    本文将详细介绍如何解决jQuery EasyUI中已打开Tab的重新加载问题。 首先,我们需要理解`tabs`组件的一些基本操作。`tabs('exists', subtitle)`方法用于检查是否存在指定标题的Tab,如果不存在,则创建新的Tab。`...

    扩展EasyUI tabs 组件,加载tab页时添加遮罩

    标题"扩展EasyUI tabs 组件,加载tab页时添加遮罩"指出了我们将在EasyUI的tabs组件上进行自定义,以便在新tab页内容加载期间显示一个遮罩层。遮罩层是一种常见的视觉提示,用于告知用户页面正在处理数据或加载内容,...

    jQuery easyui后台管理页面tab布局样式代码

    在本案例中,我们关注的是"jQuery EasyUI后台管理页面的tab布局样式代码"。 Tab布局是jQuery EasyUI中的一个重要特性,它允许在一个页面上展示多个并行的内容区域,每个区域被一个标签页所代表,用户可以通过点击...

    easyui tabs 右键关闭

    最后,标签中的 "easyui tab menu 右键 关闭" 概括了这个话题的关键点:使用 EasyUI 的选项卡组件,结合右键菜单功能,实现用户可以右键点击选项卡关闭的功能。 总结一下,要实现“easyui tabs 右键关闭”,你需要...

    为jQuery-easyui的tab组件添加右键菜单功能的简单实例

    在本文中,我们将探讨如何为jQuery-easyui的tab组件添加右键菜单功能。这个功能在许多Web应用程序中非常有用,允许用户通过右键点击选项卡来执行特定操作,如关闭当前选项卡、关闭所有选项卡等。我们将分为以下几个...

    Easyui tabs 标题居左,文字竖着

    Easyui tabs 标题居左,文字竖着

    jQuery Easyui datagrid/treegrid 清空数据

    本文将详细探讨如何在使用jQuery Easyui的datagrid/treegrid时清空数据。 ### datagrid/treegrid清空数据的方法 在进行数据操作时,清空数据意味着需要移除grid中的所有行,以及与之相关的数据,这可以通过两种...

Global site tag (gtag.js) - Google Analytics