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是一样的.

<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"事件;

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

添加一个新的 tab panel

添加一个新的tab panel和小工具,小工具的icon(8*8)放在关闭按钮前面;

// 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

// 得到当前选中的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 } }); return false; // prevent from closing } });
onClose	title,index	当用户关闭一个tab panel的时候触发.
onAdd	title,index	当一个新的tab panel被添加进来的时候触发.
onUpdate	title,index	当一个tab panel更新的时候触发.
onContextMenu	e, title,index	当在一个tab panel上右键的时候触发.

方法

Name	Parameter	Description
options	none	返回 tab panel 的 options选项.
tabs	none	返回所有的 tab panel对象.
resize	none	调整tab 容器的大小布局.
add	options	添加一个新的tab panel, 这个 options的参数是一个配置对象, 请见tab panel 属性获得更多详细信息. 当添加一个新的tab panel的时候,它将成为当前被选中panel.  添加一个不选中的tab panel,请记住设置 'selected' 属性为false. // 代码示例 添加一个新的补选中的tab panel $('#tt').tabs('add',{ title: 'new tab', 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的下标. var tab = $('#tt').tabs('getSelected'); var index = $('#tt').tabs('getTabIndex',tab); alert(index);//输出下标
select	which	选中一个 tab panel, 'which' 参数可以是tab panel的title(标题)或者index(下标) .
exists	which	指明如果一个特定的tab panel是存在的, 'which' 参数可以是tab panel的title(标题)或者index(下标).
update	param	更新特定的 tab panel,param 参数包含2个属性: tab: 需要更新的tab panel. options: panel options配置选项. 示例代码: //更新选择的panel的内容和标题 var tab = $('#tt').tabs('getSelected'); //得到选中的panel $('#tt').tabs('update', { tab: tab, options: { title: 'New Title', href: 'get_content.php' // 请求新的内容的URL } });
enableTab	which	启用一个特定的 tab panel,'which' 参数可以是tab panel的title(标题)或者是index(下标). 这个方法从1.3版本以后可用. 示例代码: $('#tt').tabs('enableTab', 1); //启用第二个tab panel $('#tt').tabs('enableTab', 'Tab2');//启用标题为'Tab2'的tab panel
disableTab	which	禁用特定的 tab panel, 'which' 参数可以是tab panel的title(标题)或者index(下标).这个方法从1.3版本开始可用. 示例代码: $('#tt').tabs('disableTab', 1); //禁用第二个tab panel.

Tab Panel

tab panel属性是定义在panel组件里,下面是一些常见的属性:

Name	Type	Description	Default
id	string	tab panel的id属性.	null
title	string	tab panel 标题文本.
content	string	tab panel 内容.
href	string	一个URL加载远程数据内容来填充tab panel.	null
cache	boolean	True 将缓存 tab panel, 当href被设置时该选项有效.	true
iconCls	string	一个icon 的css样式显示在tab panel标题上.	null
width	number	tab panel宽度.	auto
height	number	tab panel高度.	auto

一些新增的属性.

Name	Type	Description	Default
closable	boolean	当设置为 true时, tab panel将显示一个可关闭按钮,可以点击关闭tab panel.	false
selected	boolean	当设置为true时, tab panel将被选中.	false



以上如果有错误信息请指出,thanks!