`
chengyong
  • 浏览: 29019 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery easyui添加、关闭、刷新Tab页

阅读更多

jquery easyui添加、关闭、刷新Tab页,直接上代码吧!

define(function(require, exports, module) {
	if (!window.cms)
		window.cms = {};
	cms = {
		//添加新Tab页
		addTab : function(data) {
			var content = '<iframe scrolling="auto" frameborder="0"  src="' + data.url + '" style="width:100%;height:100%;"></iframe>';
			if ($('#homePageTabs').tabs('exists', data.title)) {
				// 选 中当前Tab
				$('#homePageTabs').tabs('select', data.title);

				// 重新加载已经存在的Tab内容
				var currTab = $('#homePageTabs').tabs('getTab', data.title);
				$('#homePageTabs').tabs('update', {tab: currTab, options: {content: content, closable: true}});
			} else {
				$('#homePageTabs').tabs('add', {
					title : data.title,
					content : content,
					closable : true
				});
			}
		},
		//关闭指定Tab
		closeTab : function(title) {
			if ($('#homePageTabs').tabs('exists', title)) {
				$('#homePageTabs').tabs('close', title);
			}
		},
		//刷新指定Tab的内容
		refreshTab: function(title){
			if ($('#homePageTabs').tabs('exists', title)){
				var currTab = $('#homePageTabs').tabs('getTab', title),
					iframe = $(currTab.panel('options').content),
					content = '<iframe scrolling="auto" frameborder="0"  src="' + iframe.attr('src') + '" style="width:100%;height:100%;"></iframe>';
				$('#homePageTabs').tabs('update', {tab: currTab, options: {content: content, closable: true}});
			}
		}
	}

}); 

 使用方法:

cms.addTab({
	id : 'homePageTabs',
	title : '更新首页',
	url : '/homePage/intoUpdate'
});

 

分享到:
评论

相关推荐

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

    理解并掌握这些方法和技巧,可以帮助你在开发过程中更高效地处理jQuery EasyUI的Tab刷新问题。希望本文对你有所帮助,如果你在实践中有任何疑问,欢迎进一步探讨。感谢对软件开发领域的关注和支持!

    关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法

    总结来说,处理jQuery EasyUI中Tab选项卡刷新导致页面布局变形的问题,关键在于确保刷新操作针对正确的Tab进行,这需要开发者准确控制Tab选项卡的选中状态和内容更新时机。同时,在编写相关代码时,应注意到代码的...

    easyui tab

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

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

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

    Easyui添加Tab右键菜单

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

    jQuery easyui刷新当前tabs的方法

    在jQuery EasyUI框架中,开发人员经常需要处理各种用户界面交互,其中一项常见的需求就是刷新当前活动的选项卡(tabs)。jQuery EasyUI提供了一个简洁的API来实现这一功能,主要涉及`tabs`组件的`update`方法。这篇...

    easyui iframe 页面重复加载的问题

    easyui的tab组件允许开发者在页面中以标签页的方式组织内容,每个标签页对应一个页面片段。一般情况下,这些页面片段是直接作为HTML内容存在,通过Ajax动态获取,或者通过easyui的content方法加载。但当使用iframe...

    jQuery EasyUI Tab 选项卡问题小结

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列组件,包括 Tab 选项卡,用于构建用户界面。本文将深入探讨在使用 jQuery EasyUI Tab 选项卡时可能会遇到的问题及其解决方案。 首先,让我们理解基本的...

    jquery-easyui总结

    此外,jQuery EasyUI 还提供了Grid(表格)、Tree(树形结构)、Panel(面板)、Tab(选项卡)等多种组件,它们都有丰富的配置项和事件系统,以满足不同场景的需求。开发者可以通过调整这些参数,结合自身的业务逻辑...

    在UpdatePanel内jquery easyui效果失效的解决方法

    当在***中使用UpdatePanel控件时,虽然能够实现部分页面内容的异步更新而无需刷新整个页面,但这却可能导致引入的jQuery EasyUI库的功能失效。jQuery EasyUI是一个基于jQuery的前端UI框架,它提供了一系列的用户界面...

    jQuery EasyUI 获取tabs的实例解析

    在本文中,我们将深入探讨jQuery EasyUI框架中如何管理和操作tabs组件,特别是如何根据用户在左侧tree组件的选择动态添加tabs,以及如何获取tabs的属性、刷新tabs内容。jQuery EasyUI是一个基于jQuery的UI库,它提供...

    最新jquery+easyui_api培训文档

    ### 最新jQuery+EasyUI API培训文档 #### Accordion(可折叠标签) **Accordion** 是一个功能组件,允许用户在有限的空间内展示更多的内容。它通过动态地展开或收起内容区域来帮助优化网页布局。 ##### 实例 下面...

    基于jquery tab切换(防止页面刷新)

    标题中的“基于jQuery的tab切换(防止页面刷新)”是指在网页设计中,使用jQuery库实现一个功能完善的选项卡切换效果,同时确保在用户切换选项卡后,即使页面被刷新,也能保持用户之前选择的选项卡状态不变。...

    为EasyUI的Tab标签添加右键菜单的方法

    前期的准备工作: 1、下载DEMO源码,并升级为最新版本(jquery 1.7.2,Easyui 1.2.6),直接替换就可以啦,升级easyui 是的要把css js theme 全部替换 2、在首页的HTML代码中:将 代码如下: ”mm” class=”easyui-...

    动态增减选项卡

    在描述中提到的“动态增减”,意味着用户可以实时添加新的选项卡,或者删除现有选项卡,而无需刷新整个页面。 要实现动态增减选项卡,首先需要在 HTML 中设置基本结构,包括一个包含多个 panel 的 div 元素,每个 ...

    标签(Tabs)实现多页面切换

    为了确保良好的用户体验,我们需要处理各种边缘情况,比如错误处理(如请求失败)、回退机制(如无网络时显示默认内容)以及浏览器兼容性(考虑使用polyfills或库如jQuery来支持旧版浏览器的Ajax功能)。 总之,...

Global site tag (gtag.js) - Google Analytics