JQuery EasyUI Tabs

最新推荐文章于 2023-05-17 11:41:33 发布
原创 最新推荐文章于 2023-05-17 11:41:33 发布 · 491 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端框架 #JQueryEasyUI

Tabs

选项卡显示一组面板。它一次只显示一个选项卡面板。每个选项卡面板都有标题标题和一些迷你按钮工具，包括关闭按钮和其他自定义按钮。
在这里插入图片描述
JQuery EasyUI需要引入的文件有如下4个：

<!-- jquery核心库 -->
<script type="text/javascript" src="easyui/jquery.min.js"></script> 

<!-- easyui核心库 --> 
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

<!-- easyui核心UI文件 css -->  
<link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css"/>

<!-- easyui图标 -->
<link href="easyui/themes/icon.css" rel="stylesheet" type="text/css"/>

JQuery核心库一定要放在easyui核心库前面引入，不然JQuery.easyui.min.js中会报错：JQuery is not defined。

有的时候，我们需要进行国际化，比如一些提醒、日历等，就需要引入easyui的国际化文件，代码如下：

<!-- Easyui国际化文件 --> 
<script type="text/javascript" src="../resource/js/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>

Tabs的定义
通过标记创建标签页（Tabs）
从标记创建标签页（Tabs）更容易，我们不需要写任何 JavaScript 代码。
记住把 ‘easyui-tabs’ class 添加到 div 标记。每个标签页面板（tab panel）通过子 div 标记被创建，其用法与面板（panel）一样。

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
    <div title="Tab1" style="padding:20px;display:none;">
		tab1
    </div>
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
		tab2
    </div>
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
		tab3
    </div>
</div>

编程创建标签页（Tabs）
现在我们编程创建标签页（Tabs），我们同时捕捉 ‘onSelect’ 事件。

$('#tt').tabs({
    border:false,
    onSelect:function(title){
		alert(title+' is selected');
    }
});

添加新的标签页面板（tab panel）
通过迷你工具添加一个新的标签页面板（tab panel），迷你工具图标（8x8）放置在关闭按钮前。

// 添加一个新的标签页面板（tab panel）
$('#tt').tabs('add',{
    title:'New Tab',
    content:'Tab Body',
    closable:true,
    tools:[{
		iconCls:'icon-mini-refresh',
		handler:function(){
			alert('refresh');
		}
    }]
});

获取选中的标签页（Tab）

// 获取选中的标签页面板（tab panel）和它的标签页（tab）对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 相应的标签页（tab）对象

自定义Tabs

<div id="index_tabs" style="overflow: hidden;">
	<div title="首页" data-options="border:false" style="overflow: hidden;">
	</div>
</div>

自定义添加Tabs的方法
iframe标签创建包含另一个文档的行内框架

function addTab(params) {
	var iframe = '<iframe src="'
			+ params.url
			+ '" frameborder="0" style="border:0;width:100%;height:99.5%;"></iframe>';
	var t = $('#index_tabs');
	var opts = {
		title : params.title,
		closable : true,
		iconCls : params.iconCls,
		content : iframe,
		border : false,
		fit : true
	};
	if (t.tabs('exists', opts.title)) {
		t.tabs('select', opts.title);     //如果标签页已经存在 就初始化选中已经存在的
	} else {
		t.tabs('add', opts);    //如果标签页不存在  就添加标签页
	}
}

添加Tabs

layout_west_tree = $('#layout_west_tree').tree(
				{
					url : '${path }/admin/resource/tree',
					parentField : 'pid',
					lines : false,
					onClick : function(node) {
						var url = node.attributes;
						url = url == null ? "" : url;
						if (url.indexOf("http") >= 0) {   //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
							addTab({
								url : url,
								title : node.text,
								iconCls : node.iconCls
							});
						} else if (url) {
							url = '${path }' + node.attributes;
							addTab({
								url : url,
								title : node.text,
								iconCls : node.iconCls
							});
						} else {
							layout_west_tree.tree('toggle', node.target);   //切换节点的展开/折叠状态，target 参数表示节点的 DOM 对象
						}

				},
				onLoadSuccess : function(node, data) {
					$(this).tree('collapseAll');   //折叠所有节点。
				},
				onExpand : function(node) { //在节点展开的时候触发,判断点击的是不是同个节点，如果是就关闭同个节点。不是就打开新节点，找到并关闭上次节点。
					if (layout_west_tree_prenode != node.id) {
						var preNode = layout_west_tree.tree('find', layout_west_tree_prenode); //查找指定节点并返回节点对象。
						if (preNode != null) {
							layout_west_tree.tree('collapse', preNode.target);  //折叠一个节点，'target'参数表示节点的DOM对象
						}
					}
					layout_west_tree_prenode = node.id;
				}
			});

Tabs的属性

名称类型描述默认值
widthnumber标签页（Tabs）容器的宽度。auto
heightnumber标签页（Tabs）容器的高度。auto
plainboolean当设置为 true 时，就不用背景容器图片来呈现 tab 条。false
fitboolean当设置为 true 时，就设置标签页（Tabs）容器的尺寸以适应它的父容器。false
borderboolean当设置为 true 时，就显示标签页（Tabs）容器边框。true
scrollIncrementnumber每按一次 tab 滚动按钮，滚动的像素数。100
scrollDurationnumber每一个滚动动画应该持续的毫秒数。400
toolsarray,selector放置在头部的左侧或右侧的工具栏，可能的值：
1、数组，指示工具组，每个工具选项都和链接按钮（Linkbutton）一样。
2、选择器，指示包含工具的 <div>。

代码实例：
通过数组定义工具。 
     
  1. $('#tt').tabs({
  2. 	tools:[{
  3. 		iconCls:'icon-add',
  4. 		handler:function(){
  5. 			alert('add')
  6. 		}
  7. 	},{
  8. 		iconCls:'icon-save',
  9. 		handler:function(){
  10. 			alert('save')
  11. 		}
  12. 	}]
  13. });
通过已有的 DOM 容器定义工具。 
     
  1. $('#tt').tabs({
  2. 	tools:'#tab-tools'
  3. });
  4. <div id="tab-tools">
  5. 	<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>
  6. 	<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
  7. </div>
null
toolPositionstring工具栏位置。可能的值：'left'、'right'。该属性自版本 1.3.2 起可用。right
tabPositionstring标签页（tab）位置。可能的值：'top'、'bottom'、'left'、'right'。该属性自版本 1.3.2 起可用。top
headerWidthnumber标签页（tab）头部宽度，只有当 tabPosition 设置为 'left' 或 'right' 时才有效。该属性自版本 1.3.2 起可用。150
tabWidthnumbertab 条的宽度。该属性自版本 1.3.4 起可用。auto
tabHeightnumbertab 条的高度。该属性自版本 1.3.4 起可用。27
selectednumber初始化选定的标签页索引。该属性自版本 1.3.5 起可用。0
showHeaderboolean当设置为 true 时，显示标签页（tab）头部。该属性自版本 1.3.5 起可用。true

Tabs的事件

名称参数描述
onLoadpanel当一个 ajax 标签页面板（tab panel）完成加载远程数据时触发。
onSelecttitle,index当用户选择一个标签页面板（tab panel）时触发。
onUnselecttitle,index当用户未选择一个标签页面板（tab panel）时触发。该事件自版本 1.3.5 起可用。
onBeforeClosetitle,index当一个标签页面板（tab panel）被关闭前触发，返回 false 就取消关闭动作。下面的实例演示如何在关闭标签页面板（tab panel）前显示确认对话框。 
     
  1. $('#tt').tabs({
  2.   onBeforeClose: function(title){
  3. 	return confirm('Are you sure you want to close ' + title);
  4.   }
  5. });
  6. // using the async confirm dialog
  7. $('#tt').tabs({
  8.   onBeforeClose: function(title,index){
  9. 	var target = this;
  10. 	$.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){
  11. 		if (r){
  12. 			var opts = $(target).tabs('options');
  13. 			var bc = opts.onBeforeClose;
  14. 			opts.onBeforeClose = function(){};  // allowed to close now
  15. 			$(target).tabs('close',index);
  16. 			opts.onBeforeClose = bc;  // restore the event function
  17. 		}
  18. 	});
  19. 	return false;	// prevent from closing
  20.   }
  21. });
onClosetitle,index当用户关闭一个标签页面板（tab panel）时触发。
onAddtitle,index当一个新的标签页面板（tab panel）被添加时触发。
onUpdatetitle,index当一个标签页面板（tab panel）被更新时触发。
onContextMenue, title,index当一个标签页面板（tab panel）被右键点击时触发。

Tabs的方法

名称参数描述
optionsnone返回标签页（tabs）选项（options）。
tabsnone返回全部的标签页面板（tab panel）。
resizenone调整标签页（tabs）容器的尺寸并做布局。
addoptions添加一个新的标签页面板（tab panel），options 参数是一个配置对象，更多详细信息请参见标签页面板（tab panel）属性。
当添加一个新的标签页面板（tab panel）时，它将被选中。
如需添加一个未选中的标签页面板（tab panel），请记得设置 'selected' 属性为 false。 
     
  1. // add a unselected tab panel
  2. $('#tt').tabs('add',{
  3. 	title: 'new tab',
  4. 	selected: false
  5. 	//...
  6. });
closewhich关闭一个标签页面板（tab panel），'which' 参数可以是要被关闭的标签页面板（tab panel）的标题（title）或索引（index）。
getTabwhich获取指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
getTabIndextab获取指定的标签页面板（tab panel）索引。
getSelectednone获取选中的标签页面板（tab panel）。下面的实例演示如何获取选中的标签页面板（tab panel）的索引。 
     
  1. var tab = $('#tt').tabs('getSelected');
  2. var index = $('#tt').tabs('getTabIndex',tab);
  3. alert(index);
selectwhich选择一个标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
unselectwhich选择一个标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3.5 起可用。
showHeadernone显示标签页（tabs）头部。该方法自版本 1.3.5 起可用。
hideHeadernone隐藏标签页（tabs）头部。该方法自版本 1.3.5 起可用。
existswhich指示指定的面板是否已存在，'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
updateparam更新指定的标签页面板（tab panel），param 参数包含两个属性：
tab：被更新的标签页面板（tab panel）。
options：面板（panel）的选项（options）。

代码实例： 
     
  1. // update the selected panel with new title and content
  2. var tab = $('#tt').tabs('getSelected');  // get selected panel
  3. $('#tt').tabs('update', {
  4. 	tab: tab,
  5. 	options: {
  6. 		title: 'New Title',
  7. 		href: 'get_content.php'  // the new content URL
  8. 	}
  9. });
  10.  
  11. // call 'refresh' method for tab panel to update its content
  12. var tab = $('#tt').tabs('getSelected');  // get selected panel
  13. tab.panel('refresh', 'get_content.php');
enableTabwhich启用指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。

代码实例： 
     
  1. $('#tt').tabs('enableTab', 1);	// enable the second tab panel
  2. $('#tt').tabs('enableTab', 'Tab2');	enable the tab panel that has 'Tab2' title
disableTabwhich禁用指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。

代码实例： 
     
  1. $('#tt').tabs('disableTab', 1);	// disable the second tab panel.
scrollBydeltaX通过指定的像素数滚动标签页（tab）头部，负值表示滚动到右边，正值表示滚动到左边。该方法自版本 1.3.2 起可用。

代码实例： 
     
  1. // scroll the tab header to left
  2. $('#tt').tabs('scroll', 10);

标签页面板（Tab Panel）
标签页面板（tab panel）属性被定义在面板（panel）组件里，下面是一些常用的属性。

名称类型描述默认值
idstring标签页面板（tab panel）的 id 属性。null
titlestring标签页面板（tab panel）的标题文字。
contentstring标签页面板（tab panel）的内容。
hrefstring加载远程内容来填充标签页面板（tab panel）的 URL。null
cacheboolean当设置为 true 时，在设定了有效的 href 特性时缓存这个标签页面板（tab panel）。true
iconClsstring显示在标签页面板（tab panel）标题上的图标的 CSS class。null
widthnumber标签页面板（tab panel）的宽度。auto
heightnumber标签页面板（tab panel）的高度。auto
collapsibleboolean当设置为 true 时，允许标签页面板（tab panel）可折叠。false

Tabs附加属性

名称类型描述默认值
closableboolean当设置为 true 时，标签页面板（tab panel）将显示一个关闭按钮，点击它就能关闭这个标签页面板（tab panel）。false
selectedboolean当设置为 true 时，标签页面板（tab panel）将被选中。false
easyUI快速入门第四讲——easyUI中的tabs（选项卡）组件
李阿昀的博客
10-29 2695
tabs（选项卡）组件的概述 选项卡会显示一批面板，但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。 tabs（选项卡）组件的使用 首先，在所在项目的WebContent目录下新建一个04-tabs目录，并在该目录下新建一个04-tabs.html页面。 <!DOCTYPE html> <html> <h...
easyui的tabs控制
TZyybhs的博客
06-24 581
Tabs（选项卡）依赖关系使用案例创建面板1. 通过标签创建选项卡2. 通过Javascript创建选项卡添加新的选项卡面板获取选择的选项卡属性事件方法选项卡面板代码案例 使用$.fn.tabs.defaults重写默认值对象。 选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。 依赖关系 panel linkbutton 使用案例 创建面板 1. 通过标签创建选项卡 通过标签可以更容易的创建选项卡，我们不需要写任何Jav
easyUI Tabs
weixin_33881140的博客
07-31 171
@author YHC $.fn.tabs.defaults覆盖默认值 tabs显示一个panel的集合,每一次仅仅只是显示一个tab panel,所有tab panel都有标题和一些小的工具按钮,包含close按钮和其他自定义按钮; 使用示例: 创建示例 创建 tabs 1.创建tabs通过标记; 从标记创建tabs非常简单,我们不需要写任何的javascr...
jQuery Easyui tabs组件
qq_45384482的博客
06-24 655
文章目录选项卡的使用1.html中使用动态加载选项卡1.新增tabs2.配合Tree控件3.实现原理鼠标右键关闭标签，全部/其他 选项卡的使用 当用户不需要同时看到多个选项标签中的内容时，这个时候我们就可以用选项卡组件了。 关于选项卡的使用，官方文档提供很多的使用方法及帮助，我们主要围绕官方文档来进行开发。 1.html中使用 我们只需要引入代码，它就会生成tabs页这种写的比较死，我们需要的是点击菜单去打开不同的菜单页和对于的内容。 动态加载选项卡 1.新增tabs 因为我们需要点击菜单去加载并打开
EasyUi之Tabs(选项卡)
qianbihua00的博客
04-02 5038
什么是Tabs 选项卡是最流行的导航模式之一(与菜单栏和垂直导航一样)。 选项卡最大的优点是用户很熟悉，而且经常是持久的内容，所以即使用户在网站或应用程序中跳出刚浏览过的内容，他们也不会迷失。 官方示例 成品示例 Tabs的使用案例 通过标签创建选项卡 通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给 标签添加一个类ID’easyui-tabs’。每个选项卡面板都通过子 标签进行创建，用法和panel(面板)相同。 2. 通过Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
10-21
Tabs是jQuery Easyui中的一个组件，用于制作多页签界面，允许用户在一个视图中切换不同的内容区域。在某些应用场景下，我们可能需要根据特定的属性来打开某个特定的页签。本文主要介绍如何扩展jQuery Easyui Tabs...
jQuery easyui刷新当前tabs的方法
10-21
在jQuery EasyUI框架中，开发人员经常需要处理各种用户界面交互，其中一项常见的需求就是刷新当前活动的选项卡（tabs）。jQuery EasyUI提供了一个简洁的API来实现这一功能，主要涉及`tabs`组件的`update`方法。这篇...
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
12-09
本文实例讲述了jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法。分享给大家供大家参考，具体如下： 我们在使用EasyUI Tabs框架时，在框架最顶层的弹出窗体中需要操作当前Tab的iframe窗体内容或方法，这时候我们...
jQuery EasyUI 获取tabs的实例解析
10-20
在本文中，我们将深入探讨jQuery EasyUI框架中如何管理和操作tabs组件，特别是如何根据用户在左侧tree组件的选择动态添加tabs，以及如何获取tabs的属性、刷新tabs内容。jQuery EasyUI是一个基于jQuery的UI库，它提供...
Easyui--tabs控件
userwang的博客
06-26 254
目录前言tabs控件介绍tabs选项卡案例演示 前言 本章讲解的是easyui tabs控件，以及案例演示。 tabs控件介绍 从标记创建标签页（Tabs）更容易，我们不需要写任何 JavaScript 代码。 记住把 ‘easyui-tabs’ class 添加到 标记。 每个标签页面板（tab panel）通过子 标记被创建，其用法与面板（panel）一样。 <div id="tt" class="easyui-tabs" style="width:500px;height:250px
easyUI tabs 初探
weixin_33817333的博客
02-27 118
下载地址：http://download.youkuaiyun.com/detail/cometwo/9445748 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/...
EasyUI（tabs组件）
m0_46690290的博客
06-24 473
tabs选项卡tabs选项卡简介实现tabs选项卡实现关闭所有选项卡 tabs选项卡简介 1.从easyUI官方文档入手，找到tabs选项卡的简介以及查看demo示例 2.使用案例 (两种方式) 通过标签创建选项卡 通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给标签添加一个类ID’easyui-tabs’。每个选项卡面板都通过子标签进行创建，用法和panel(面板)相同。 示例 <div id="tt" class="easyui-tabs" style="
【EasyUI篇】Tabs选项卡组件
ouYang的博客
08-29 3056
微信公众号：程序yuan 关注可了解更多的教程。问题或建议，请公众号留言; 查看--&gt; 全套EasyUI示例目录 8.Tabs选项卡组件   JSP文件 &lt;%--   Created by IntelliJ IDEA.   User: ooyhao   Date: 2018/7/29 0029   Time: 9:21 --%&gt; &lt;%...
四、easyUI中的tabs（选项卡）组件
weixin_44230693的博客
05-17 1409
四、easyUI中的tabs（选项卡）组件
EasyUI-标签(Tabs)用法
weixin_33676492的博客
10-08 275
用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易，我们不需要写任何JavaScript代码。记住把 'easyui-tabs' 类添加到&lt;div/&gt;标记，每个tab panel 经由子&lt;div/&gt;标记被创建，其用法与Panel一样。 1.  &lt;div id="tt" class="easyui-tabs" style="width:500p...
easyui的tabs控件
小七
06-24 1247
easyui的tabs控件前言一、先去看看前期做的前台和后台吧二、了解什么是tabs控件三、tabs属性的使用四、tabs事件的使用五、tabs方法的使用六、实现tabs的步骤1、我们先建两个jsp备用2、使用easyui中的模板tabs控件3、在index.js中再次使用tabs控件中的模板，进行修改 前言 因为前面做了easyui的前端和后端做铺垫，所以今天还是搞前端要实现的tabs控件 一、先去看看前期做的前台和后台吧 https://blog.youkuaiyun.com/qq_46964039/article
EasyUI tabs
zq爱生活爱代码的博客
05-25 210
Tabs多个页签 <div id="tt" style="width:100%;height:100%;"> <div title="生產報廢統計明細" style="padding:5px;"> <table id="details"></table> </div> <div title="生產報廢統計工站匯總" style="pad.
easyui---tabs(选项卡)
weixin_34221332的博客
03-08 380
配置好easyui环境 1.笔记： tabs(选项卡) class:class="easyui-tabs" //<div class="easyui-tabs" style="width:700px;height:auto"></div> 是否可以关闭：closable:true 选项卡标签的宽度:data-options="tabWidth:200" 下拉菜单: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值