easyUI Tabs
@author YHC
$.fn.tabs.defaults覆盖默认值
tabs显示一个panel的集合,每一次仅仅只是显示一个tab panel,所有tab panel都有标题和一些小的工具按钮,包含close按钮和其他自定义按钮;
使用示例:
创建示例
创建 tabs
1.创建tabs通过标记;
从标记创建tabs非常简单,我们不需要写任何的javascript代码,记得添加"easyui-panel"样式给div标记,每个tab panel的创建通过子div标记,使用和panel是一样的.
[html]
<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>
<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>
2.通过编程的方式创建tabs
现在我们用编程的方式创建tabs,并且捕捉"onSelect"事件;
[javascript] view plaincopyprint?$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
});
$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
}); 添加一个新的 tab panel
添加一个新的tab panel和小工具,小工具的icon(8*8)放在关闭按钮前面;
[javascript] view plaincopyprint?// add a new tab panel
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
// add a new tab panel
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
}); 得到选中 Tab
[javascript] view plaincopyprint?// 得到当前选中的tab panel和他的tab对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 对应的tab对象
// 得到当前选中的tab panel和他的tab对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 对应的tab对象属性
Name Type Description Default
width number tab容器的宽度 . auto
height number tab容器的高度. auto
plain boolean 如果设置True渲染tab 没有背景图片. false
fit boolean 如果设置True将设置tabs容器的大小,适应父容器大小. false
border boolean True显示tabs容器border. true
scrollIncrement number 每次tab滚动按钮被按下时滚动的一个像素值 100
scrollDuration number 每一个滚动动作持续的时间的毫秒值. 400
tools array,selector 右边的工具栏. 可用值:
1. 一个指定的工具数组, 每个tool的选项和linkbutton相同.
2. 一个选择器指向<div/>包含的工具集合.
代码示例:
使用数组定义工具.
$('#tt').tabs({
tools:[{
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
使用一个存在的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
事件
Name Parameters Description
onLoad panel ajax tab panel加载远程服务器端数据结束时候触发.
onSelect title,index 当用户选中一个tab panel的时候触发.
onBeforeClose title,index 在tab panel关闭之前触发,该方法返回false将取消关闭动作. 下面的示例展示,如何显示一个confirm对话框在关闭tabpanel关闭之前.
$('#tt').tabs({
onBeforeClose: function(title){
return confirm('Are you sure you want to close ' + title);
}
});
// using the async confirm dialog
$('#tt').tabs({
onBeforeClose: function(title,index){
var target = this;
$.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){
if (r){
var opts = $(target).tabs('options');
var bc = opts.onBeforeClose;
opts.onBeforeClose = function(){}; // allowed to close now
$(target).tabs('close',index);
opts.onBeforeClose = bc; // restore the event function
