EasyUI：Tabs 标签页/选项卡

当构造布局的时候,可以通过 $.fn.tabs.defaults 重写默认的 defaults。
这些选项卡显示面板的集合。一次仅显示一个选项卡面板。每个选项卡面板都有标题标题和一些迷你按钮工具，包括关闭按钮和其他自定义按钮。

依赖

panel
linkbutton

属性

名称	类型	描述	默认值
width	number	标签页（Tabs）容器的宽度。	auto
height	number	标签页（Tabs）容器的高度。	auto
plain	boolean	当设置为 true 时，就不用背景容器图片来呈现 tab 条。	false
fit	boolean	当设置为 true 时，就设置标签页（Tabs）容器的尺寸以适应它的父容器。	false
border	boolean	当设置为 true 时，就显示标签页（Tabs）容器边框。	true
scrollIncrement	number	每按一次 tab 滚动按钮，滚动的像素数。	100
scrollDuration	number	每一个滚动动画应该持续的毫秒数。	400
tools	array,selector	放置在头部的左侧或右侧的工具栏，可能的值：放置在头部的左侧或右侧的工具栏，可能的值： 1、数组，指示工具组，每个工具选项都和链接按钮（Linkbutton）一样。 2、选择器，指示包含工具的 <div>。代码示例: 通过数组定义工具: 通过已有的 DOM 容器定义工具。
toolPosition	string	工具栏位置。可能的值：‘left’、‘right’。该属性自版本 1.3.2 起可用。	right
tabPosition	string	标签页（tab）位置。可能的值：‘top’、‘bottom’、‘left’、‘right’。该属性自版本 1.3.2 起可用。	top
headerWidth	number	标签页（tab）头部宽度，只有当 tabPosition 设置为 ‘left’ 或 ‘right’ 时才有效。该属性自版本 1.3.2 起可用。	150
tabWidth	number	tab 条的宽度。该属性自版本 1.3.4 起可用。	auto
tabHeight	number	tab 条的高度。该属性自版本 1.3.4 起可用。	27
selected	number	初始化选定的标签页索引。该属性自版本 1.3.5 起可用。	0
showHeader	boolean	当设置为 true 时，显示标签页（tab）头部。该属性自版本 1.3.5 起可用。	true

属性

名称	参数	描述
onLoad	panel	当一个 ajax 标签页面板（tab panel）完成加载远程数据时触发。
onSelect	title,index	当用户选择一个标签页面板（tab panel）时触发。
onUnselect	title,index	当用户未选择一个标签页面板（tab panel）时触发。该事件自版本 1.3.5 起可用。
onBeforeClose	title,index	当一个标签页面板（tab panel）被关闭前触发，返回 false 就取消关闭动作。下面的实例演示如何在关闭标签页面板（tab panel）前显示确认对话框。
onClose	title,index	当用户关闭一个标签页面板（tab panel）时触发。
onAdd	title,index	当一个新的标签页面板（tab panel）被添加时触发。
onUpdate	title,index	当一个标签页面板（tab panel）被更新时触发。
onContextMenu	e, title,index	当一个标签页面板（tab panel）被右键点击时触发。

方法

名称	参数	描述
options	none	返回标签页（tabs）选项（options）。
tabs	none	返回全部的标签页面板（tab panel）。
resize	none	调整标签页（tabs）容器的尺寸并做布局。
add	options	添加一个新的标签页面板（tab panel），options 参数是一个配置对象，更多详细信息请参见标签页面板（tab panel）属性。当添加一个新的标签页面板（tab panel）时，它将被选中。如需添加一个未选中的标签页面板（tab panel），请记得设置 ‘selected’ 属性为 false。
close	which	关闭一个标签页面板（tab panel），‘which’ 参数可以是要被关闭的标签页面板（tab panel）的标题（title）或索引（index）。
getTab	which	获取指定的标签页面板（tab panel），‘which’ 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
getTabIndex	tab	获取指定的标签页面板（tab panel）索引。
getSelected	none	获取选中的标签页面板（tab panel）。下面的实例演示如何获取选中的标签页面板（tab panel）的索引。
select	which	选择一个标签页面板（tab panel），‘which’ 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
unselect	which	选择一个标签页面板（tab panel），‘which’ 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3.5 起可用。
showHeader	none	显示标签页（tabs）头部。该方法自版本 1.3.5 起可用。
hideHeader	none	隐藏标签页（tabs）头部。该方法自版本 1.3.5 起可用。
exists	which	指示指定的面板是否已存在，‘which’ 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
update	param	更新指定的标签页面板（tab panel），param 参数包含两个属性： tab：被更新的标签页面板（tab panel）。 options：面板（panel）的选项（options）。代码实例：
enableTab	which	启用指定的标签页面板（tab panel），‘which’ 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。代码实例：
disableTab	which	禁用指定的标签页面板（tab panel），‘which’ 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。代码实例：
scrollBy	deltaX	通过指定的像素数滚动标签页（tab）头部，负值表示滚动到右边，正值表示滚动到左边。该方法自版本 1.3.2 起可用。代码实例：

标签页面板（Tab Panel）

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

名称	类型	描述	默认值
id	string	标签页面板（tab panel）的 id 属性。	null
title	string	标签页面板（tab panel）的标题文字。
content	string	标签页面板（tab panel）的内容。
href string		加载远程内容来填充标签页面板（tab panel）的 URL。	null
cache	boolean	当设置为 true 时，在设定了有效的 href 特性时缓存这个标签页面板（tab panel）。	true
iconCls	string	显示在标签页面板（tab panel）标题上的图标的 CSS class。	null
width	number	标签页面板（tab panel）的宽度。	auto
height	number	标签页面板（tab panel）的高度。	auto
collapsible	boolean	当设置为 true 时，允许标签页面板（tab panel）可折叠。	false

一些附加的属性。

名称	类型	描述	默认值
closable	boolean	当设置为 true 时，标签页面板（tab panel）将显示一个关闭按钮，点击它就能关闭这个标签页面板（tab panel）。	false
selected	boolean	当设置为 true 时，标签页面板（tab panel）将被选中。	false

用法

创建标签页（Tabs）

通过标记创建标签页（Tabs）
从标记创建标签页（Tabs）更容易，我们不需要写任何 JavaScript 代码。记住把 ‘easyui-tabs’ class 添加到

标记。每个标签页面板（tab panel）通过子

标记被创建，其用法与面板（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）对象

EasyUI：Tabs 标签页/选项卡相关推荐

easyui打开新的选项卡_Easyui Tabs 标签页/选项卡_EasyUI 插件
通过 $.fn.tabs.defaults 重写默认的 defaults. The tabs display a collection of panel. It shows only one tab ...
Tabs标签页修改样式
ElementUI 的 Tabs标签页修改样式去除底部灰色线条 <style lang="scss" scoped> //去掉el-tab-pane底部灰色线条 /d ...
【Axure】制作Tabs标签页
最近工作中使用到了Tabs标签页,所以写篇操作步骤文,以免自己隔段时间不用忘记后供查看. 1.先把静态的原型制作好,如下图: 2. 把放内容的区域转换成动态面板,双击打开面板状态管理,添加面板,如下图 ...
Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
EasyUI中Tabs标签页的简单使用
场景效果属性 tabs none 返回全部的标签页面板(tab panel). resize none 调整标签页(tabs)容器的尺寸并做布局. add options 添加一个新的标签页面板( ...
vue 循环tabs 标签页组件_Vue render函数实战--实现tabs选项卡组件
用过Element ui库的童鞋肯定知道组件,简单.好用.可以自定义标签页,不知道广大童鞋们在刚开始使用组件的时候有没有想过它是如何实现的?我咋刚开始使用组件的时候就有去想过,也想去实现一个超级简单的 ...
Vue+ElementUI+Tabs实现选项卡|标签页|美化标签页面|局部替换样式|好看的标签页|选项卡
因为elementUI自带的标签页实在太丑了,所以给他美化了以下,样式截图如下 1.使用 css 父级选择器来限制样式覆盖的范围, 不然会全局修改的代码中最外层的样式 class="hom ...
JavaScript提高：005：ASP.NET使用easyUI TABS标签显示问题
前面使用easy ui来实现了一个tabs标签(http://blog.csdn.net/yysyangyangyangshan/article/details/38307477),只是在ASP.NE ...
a标签的onclick事件_JavaScript提高：ASP.NET使用easyUI TABS标签显示问题
前面使用easy ui来实现了一个tabs标签(http://blog.csdn.net/yysyangyangyangshan/article/details/38307477),不过在ASP.NE ...
vue 循环tabs 标签页组件_vue学习笔记--v-for循环标签页label并实现根据不同label表格切换...
目标:用标签页组件实现点击不同标签显示表格内容,标签页内lab le 和表格数据都是循环得到的. 效果如图: 2.png 首先实现pane 循环出header. v-model="tabK ...