当构造布局的时候,可以通过 $.fn.tabs.defaults 重写默认的 defaults。
这些选项卡显示面板的集合。 一次仅显示一个选项卡面板。 每个选项卡面板都有标题标题和一些迷你按钮工具,包括关闭按钮和其他自定义按钮。
依赖
panellinkbutton属性
属性
方法
标签页面板(Tab Panel)
标签页面板(tab panel)属性被定义在面板(panel)组件里,下面是一些常用的属性。
一些附加的属性。
用法
创建标签页(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)对象