EasyUI之选项卡Tabs

最新推荐文章于 2021-04-02 10:17:08 发布
最新推荐文章于 2021-04-02 10:17:08 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： __2.4 EasyUI 文章标签： easyui 选项卡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ya_1249463314/article/details/69668993
版权

1.样式


选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。


2.练习1：构建选项卡

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tabs</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<!-- 引入css文件 -->
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>

<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
	<div id="tabsID" class="easyui-tabs" style="width:500px;height:250px;"
		data-options="plain:false,fit:false,border:true,tools:[
			{
				iconCls:'icon-add',
				handler:function(){
					alert('添加')
				}
			},
			{
				iconCls:'icon-save',
				handler:function(){
					alert('保存')
				}
			}
		],selected:-1">   
	    <div title="标题1" style="padding:20px;display:none;">   
	        	标题1    
	    </div>   
	    <div title="标题2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
	        	标题2   
	    </div>   
	    <div title="标题3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
	        	标题3   
	    </div>   
	</div>  
</body>
</html>
结果：


3.练习2：后台管理系统页面完善

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layout02</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<!-- 引入css文件 -->
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>

<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout" id="layoutID" data-options="fit:true">
        <!-- 北边 -->
        <div data-options="region:'north',border:false" style="height:100px;">
            <h1 style="font-size:24px;text-align:center;">物流管理系统</h1>
        </div>
        <!-- 中间 -->
        <div data-options="region:'center'">
            <div class="easyui-layout" data-options="fit:true">
                <!-- 西边 -->
                <div data-options="region:'west'" style="width:206px;border-top:0;">
                    <div id="accordionID" 
                         class="easyui-accordion" 
                         data-options="fit:true,selected:-1" 
                         style="height:300px;">   
                        <div title="订单管理" data-options="iconCls:'icon-save'">   
                                <a id="btn_add" 
                                   href="#" 
                                   class="easyui-linkbutton" 
                                   data-options="iconCls:'icon-add',plain:true"
                                   style="width:200px;outline:none;">新增订单</a> 
                                <a id="btn_remove" 
                                   href="#" 
                                   class="easyui-linkbutton" 
                                   data-options="iconCls:'icon-remove',plain:true"
                                   style="width:200px;outline:none;">删除订单</a>
                                <a id="btn_update" 
                                   href="#" 
                                   class="easyui-linkbutton" 
                                   data-options="iconCls:'icon-edit',plain:true"
                                   style="width:200px;outline:none;">修改订单</a>
                                <a id="btn_search" 
                                   href="#" 
                                   class="easyui-linkbutton" 
                                   data-options="iconCls:'icon-search',plain:true"
                                   style="width:200px;outline:none;">查询订单</a>
                        </div>   
                        <div title="路线管理" data-options="iconCls:'icon-reload'" style="overflow:auto;padding:10px;">   
                                路线管理  
                        </div>   
                        <div title="人员管理" data-options="iconCls:'icon-add'" style="overflow:auto;padding:10px;">   
                                   人员管理  
                        </div> 
                        <div title="车辆管理" data-options="iconCls:'icon-filter'" style="overflow:auto;padding:10px;">   
                                   车辆管理   
                        </div> 
                        <div title="帮助" data-options="iconCls:'icon-help'" style="overflow:auto;padding:10px;">
                                帮助
                        </div> 
                    </div>  
                </div>
                <!-- 中间 -->
                <div data-options="region:'center'" style="border-top:0;">
                    <div id="tabsID" class="easyui-tabs" data-options="plain:true,fit:true,border:false,selected:-1">   
                        
                    </div>  
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $("#btn_add").click(function(){
                //获取点击按钮的标题
                var title =$(this).text();
                //去空格
                title =$.trim(title);
                if("新增订单" == title){
                    var flag =$("#tabsID").tabs("exists",title);
                    if(!flag){
                        $("#tabsID").tabs("add",{
                            "title":title,
                            "closable":true,
                            "iconCls":"icon-add"
                        });
                    }
                }
            });
        </script>
</body>
</html>
结果：

4.文档

属性

属性名属性值类型描述默认值
widthnumber选项卡容器宽度。auto
heightnumber选项卡容器高度。auto
plainboolean设置为true时，将不显示控制面板背景。false
fitboolean设置为true时，选项卡的大小将铺满它所在的容器。false
borderboolean设置为true时，显示选项卡容器边框。true
scrollIncrementnumber选项卡滚动条每次滚动的像素值。100
scrollDurationnumber每次滚动动画持续的时间，单位：毫秒。400
toolsarray,selector工具栏添加在选项卡面板头的左侧或右侧。可用的值有：
1. 一个工具菜单数组，每个工具选项都和linkbutton相同。
2. 一个指向<div/>容器工具菜单的选择器。

代码示例： 

通过数组定义工具菜单。

$('#tt').tabs({
	tools:[{
		iconCls:'icon-add',
		handler:function(){
			alert('添加')
		}
	},{
		iconCls:'icon-save',
		handler:function(){
			alert('保存')
		}
	}]
});

通过存在的DOM容器定义工具菜单。

$('#tt').tabs({
	tools:'#tab-tools'
});
<div id="tab-tools">
	<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>
	<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
</div>
null
toolPositionstring工具栏位置。可用值：'left','right'。（该属性自1.3.2版开始可用）right
tabPositionstring选项卡位置。可用值：'top','bottom','left','right'。（该属性自1.3.2版开始可用）top
headerWidthnumber选项卡标题宽度，在tabPosition属性设置为'left'或'right'的时候才有效。（该属性自1.3.2版开始可用）150
tabWidthnumber标签条的宽度。（该属性自1.3.4版开始可用）auto
tabHeightnumber标签条的高度。（该属性自1.3.4版开始可用）27
selectednumber初始化选中一个tab页。（该属性自1.3.5版开始可用）0
showHeaderboolean设置为true时，显示tab页标题。（该属性自1.3.5版开始可用）true

 

事件

事件名事件参数描述
onLoadpanel在ajax选项卡面板加载完远程数据的时候触发。
onSelecttitle,index用户在选择一个选项卡面板的时候触发。
onUnselecttitle,index用户在取消选择一个选项卡面板的时候触发。（该属性自1.3.5版开始可用）
onBeforeClosetitle,index在选项卡面板关闭的时候触发，返回false取消关闭操作。下面的例子展示了在关闭选项卡面板之前以何种方式显示确认对话框。 
$('#tt').tabs({
  onBeforeClose: function(title){
	return confirm('您确认想要关闭 ' + title);
  }
});
// 使用异步确认对话框
$('#tt').tabs({
  onBeforeClose: function(title,index){
	var target = this;
	$.messager.confirm('确认','你确认想要关闭'+title,function(r){
		if (r){
			var opts = $(target).tabs('options');
			var bc = opts.onBeforeClose;
			opts.onBeforeClose = function(){};  // 允许现在关闭
			$(target).tabs('close',index);
			opts.onBeforeClose = bc;  // 还原事件函数
		}
	});
	return false;	// 阻止关闭
  }
});
onClosetitle,index在用户关闭一个选项卡面板的时候触发。
onAddtitle,index在添加一个新选项卡面板的时候触发。
onUpdatetitle,index在更新一个选项卡面板的时候触发。
onContextMenue, title,index在右键点击一个选项卡面板的时候触发。

 

方法

方法名方法参数描述
optionsnone返回选项卡属性。
tabsnone返回所有选项卡面板。
resizenone调整选项卡容器大小和布局。
addoptions添加一个新选项卡面板，选项参数是一个配置对象，查看选项卡面板属性的更多细节。在添加一个新选项卡面板的时候它将变成可选的。
添加一个非选中状态的选项卡面板时，记得设置'selected'属性为false。 
// 添加一个未选中状态的选项卡面板
$('#tt').tabs('add',{
	title: '新选项卡面板',
	selected: false
	//...
});
closewhich关闭一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引，以指定要关闭的面板。
getTabwhich获取指定选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
getTabIndextab获取指定选项卡面板的索引。
getSelectednone获取选择的选项卡面板。下面的例子展示了如何获取选择的选项卡面板索引。 
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
alert(index);
selectwhich选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
unselectwhich取消选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。（该方法自1.3.5版开始可用）
showHeadernone显示选项卡的标签头。（该方法自1.3.5版开始可用）
hideHeadernone隐藏选项卡的标签头。（该方法自1.3.5版开始可用）
existswhich表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。
updateparam更新指定的选项卡面板，'param'参数包含2个属性：
tab：要更新的选项卡面板。
options：面板的属性。

代码示例：  
// 更新选择的面板的新标题和内容
var tab = $('#tt').tabs('getSelected');  // 获取选择的面板
$('#tt').tabs('update', {
	tab: tab,
	options: {
		title: '新标题',
		href: 'get_content.php'  // 新内容的URL
	}
});

// 调用 'refresh' 方法更新选项卡面板的内容
var tab = $('#tt').tabs('getSelected');  // 获取选择的面板
tab.panel('refresh', 'get_content.php');
enableTabwhich启用指定的选项卡面板，'which'参数可以是选项卡面板的标题或索引。（该方法自1.3版开始可用）

代码示例：

$('#tt').tabs('enableTab', 1);            // 启用第二个选项卡面板
$('#tt').tabs('enableTab', 'Tab2');     // 启用标题为Tab2的选项卡面板
disableTabwhich禁用指定的选项卡面板，'which'参数可以是选项卡面板的标题或索引。（该方法自1.3版开始可用）

代码示例：

$('#tt').tabs('disableTab', 1); // 禁用第二个选项卡面板

scrollBydeltaX滚动选项卡标题指定的像素数量，负值则向右滚动，正值则向左滚动。（该方法自1.3版开始可用）

代码示例：

// 滚动选项卡标题到左边
$('#tt').tabs('scroll', 10);

 

选项卡面板

选项卡面板属性与panel组件属性的定义类似，下面是2个组件的一些公共属性。

属性名属性值类型描述默认值
idstring选项卡面板的ID属性。null
titlestring选项卡面板的标题文本。 
contentstring选项卡面板的内容。 
hrefstring从URL加载远程数据内容填充到选项卡面板。null
cacheboolean如果为true，在'href'属性设置了有效值的时候缓存选项卡面板。true
iconClsstring定义了一个图标的CSS类ID显示到选项卡面板标题。null
widthnumber选项卡面板宽度。auto
heightnumber选项卡面板高度。auto
collapsibleboolean如果为true，则允许选项卡摺叠。false

下面的是选项卡面板新增且独有的属性。

属性名属性值类型描述默认值
closableboolean在设置为true的时候，选项卡面板将显示一个关闭按钮，在点击的时候会关闭选项卡面板。false
selectedboolean在设置为true的时候，选项卡面板会被选中。false




sunpy 孙培煜
关注
专栏目录
easyUI快速入门第四讲——easyUI中的tabs（选项卡）组件
李阿昀的博客
10-29 2499
tabs（选项卡）组件的概述 选项卡会显示一批面板，但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。 tabs（选项卡）组件的使用 首先，在所在项目的WebContent目录下新建一个04-tabs目录，并在该目录下新建一个04-tabs.html页面。 <!DOCTYPE html> <html> <h...
easyUI Tabs
weixin_33881140的博客
07-31 122
@author YHC $.fn.tabs.defaults覆盖默认值 tabs显示一个panel的集合,每一次仅仅只是显示一个tab panel,所有tab panel都有标题和一些小的工具按钮,包含close按钮和其他自定义按钮; 使用示例: 创建示例 创建 tabs 1.创建tabs通过标记; 从标记创建tabs非常简单,我们不需要写任何的javascr...
EasyUI（tabs组件）
m0_46690290的博客
06-24 399
tabs选项卡tabs选项卡简介实现tabs选项卡实现关闭所有选项卡 tabs选项卡简介 1.从easyUI官方文档入手，找到tabs选项卡的简介以及查看demo示例 2.使用案例 (两种方式) 通过标签创建选项卡 通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给标签添加一个类ID’easyui-tabs’。每个选项卡面板都通过子标签进行创建，用法和panel(面板)相同。 示例 <div id="tt" class="easyui-tabs" style="
EasyUi之Tabs(选项卡)
qianbihua00的博客
04-02 4745
什么是Tabs 选项卡是最流行的导航模式之一(与菜单栏和垂直导航一样)。 选项卡最大的优点是用户很熟悉，而且经常是持久的内容，所以即使用户在网站或应用程序中跳出刚浏览过的内容，他们也不会迷失。 官方示例 成品示例 Tabs的使用案例 通过标签创建选项卡 通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给 标签添加一个类ID’easyui-tabs’。每个选项卡面板都通过子 标签进行创建，用法和panel(面板)相同。 2. 通过Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
01-19
1、 对选项卡面板区域 div 设置 class=”easyui-tabs” 2、 对选项卡面板区域添加多个 div，每个 div 就是一个选项卡（每个面板一定设置 title） 3、 设置面板 fit 为 true ，自适应父容器大小 4、 设置选项卡 ...
jQuery EasyUI Tab 选项卡问题小结
10-21
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列组件，包括 Tab 选项卡，用于构建用户界面。本文将深入探讨在使用 jQuery EasyUI Tab 选项卡时可能会遇到的问题及其解决方案。 首先，让我们理解基本的...
jQuery easyui刷新当前tabs的方法
10-21
通过上述方式，你可以轻松地根据需要刷新jQuery EasyUI选项卡中的内容。这种方法不仅适用于加载动态数据，还适用于更新任何静态内容或重新加载已有的内容。 值得注意的是，使用`update`方法时，确保你的jQuery ...
EasyUI tabs
zq爱生活爱代码的博客
05-25 174
Tabs多个页签 <div id="tt" style="width:100%;height:100%;"> <div title="生產報廢統計明細" style="padding:5px;"> <table id="details"></table> </div> <div title="生產報廢統計工站匯總" style="pad.
jQuery EasyUI 实例演示（菜单、TAB等）
06-17
jQuery EasyUI 实例演示（菜单、TAB等）! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
EasyUI-Basic Panel
dxm809的博客
03-20 211
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Sc...
JQuery EasyUI Tabs
qq_42386143的博客
06-21 414
Tabs 选项卡显示一组面板。它一次只显示一个选项卡面板。每个选项卡面板都有标题标题和一些迷你按钮工具，包括关闭按钮和其他自定义按钮。 JQuery EasyUI需要引入的文件有如下4个： <!-- jquery核心库 --> <script type="text/javascript" src="easyui/jquery.min.js"></script>...
easyui的tabs控件
小七
06-24 1166
easyui的tabs控件前言一、先去看看前期做的前台和后台吧二、了解什么是tabs控件三、tabs属性的使用四、tabs事件的使用五、tabs方法的使用六、实现tabs的步骤1、我们先建两个jsp备用2、使用easyui中的模板tabs控件3、在index.js中再次使用tabs控件中的模板，进行修改 前言 因为前面做了easyui的前端和后端做铺垫，所以今天还是搞前端要实现的tabs控件 一、先去看看前期做的前台和后台吧 https://blog.csdn.net/qq_46964039/article
Easyui--tabs控件
userwang的博客
06-26 193
目录前言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形式
cihongmo6452的博客
05-06 127
1、easyUI实现tabs形式 参考链接：http://www.jeasyui.com/demo/main/index.php?plugin=Tabs&theme=default&dir=ltr&pitem= <div class="easyui-tabs"...
EasyUI 选项卡
phone13144830339的博客
12-24 247
&lt;html&gt; &lt;head&gt; &lt;title&gt;选项卡&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="H:/jQuery EasyUI/jquery-easyui-1.5.3/themes/default/easyui.css"&gt; &
jQuery EasyUI创建和管理Tabs选项卡教程
"jQuery EasyUI API 中文文档 – Tabs标签页/选项卡" jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的 UI 组件，用于快速构建用户界面。在 jQuery EasyUI 中，`Tabs` 组件是用于展示多个面板（或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值