使用$.fn.tabs.defaults重寫默認值對象。
選項卡顯示一批面板。但在同一個時間只會顯示一個面板。每個選項卡面板都有頭標題和一些小的按鈕工具菜單，包括關閉按鈕和其他自定義按鈕。
使用案例：
創建面板
通過標簽和Javascript兩種方法來創建選項卡。
1、 通過標簽創建選項卡
通過標簽可以更容易的創建選項卡，我們不需要寫任何Javascript代碼。只需要給<div/>標簽添加一個類ID’easyui-tabs’。每個選項卡面板都通過子<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、通過Javascript創建選項卡
下面的代碼演示如何使用Javascript創建選項卡，當該選項卡被選擇時將會觸發’onSelect’事件。
$(‘#tt’).tabs({
border:false,
onSelect:function(title){
alert(title+’ is selected’);
}
});
添加新的選項卡面板
添加一個新的包含小工具菜單的選項卡面板，小工具菜單圖標(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’);
}
}]
});
獲取選擇的選項卡
// get the selected tab panel and its tab object
var pp = $(‘#tt’).tabs(‘getSelected’);
var tab = pp.panel(‘options’).tab; // the corresponding tab object
屬性：
| 屬性名 | 屬性值類型 | 描述 | 默認值 |
|---|---|---|---|
| width | number | 選項卡容器寬度。 | auto |
| height | number | 選項卡容器高度。 | auto |
| plain | boolean | 設置為true時，將不顯示控制面板背景。 | false |
| fit | boolean | 設置為true時，選項卡的大小將鋪滿它所在的容器。 | false |
| border | boolean | 設置為true時，顯示選項卡容器邊框。 | true |
| scrollIncrement | number | 選項卡滾動條每次滾動的像素值。 | 100 |
| scrollDuration | number | 每次滾動動畫持續的時間，單位：毫秒。 | 400 |
| tools | array,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 |
| toolPosition | string | 工具欄位置。可用值：’left’,’right’。（該屬性自1.3.2版開始可用） | right |
| tabPosition | string | 選項卡位置。可用值：’top’,’bottom’,’left’,’right’。（該屬性自1.3.2版開始可用） | top |
| headerWidth | number | 選項卡標題寬度，在tabPosition屬性設置為’left’或’right’的時候才有效。（該屬性自1.3.2版開始可用） | 150 |
| tabWidth | number | 標簽條的寬度。（該屬性自1.3.4版開始可用） | auto |
| tabHeight | number | 標簽條的高度。（該屬性自1.3.4版開始可用） | 27 |
| selected | number | 初始化選中一個tab頁。（該屬性自1.3.5版開始可用） | 0 |
| showHeader | boolean | 設置為true時，顯示tab頁標題。（該屬性自1.3.5版開始可用） | true |
事件:
| 事件名 | 事件參數 | 描述 |
|---|---|---|
| onLoad | panel | 在ajax選項卡面板加載完遠程數據的時候觸發。 |
| onSelect | title,index | 用戶在選擇一個選項卡面板的時候觸發。 |
| onUnselect | title,index | 用戶在取消選擇一個選項卡面板的時候觸發。（該屬性自1.3.5版開始可用） |
| onBeforeClose | title,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; // 阻止關閉
}
});
|
| onClose | title,index | 在用戶關閉一個選項卡面板的時候觸發。 |
| onAdd | title,index | 在添加一個新選項卡面板的時候觸發。 |
| onUpdate | title,index | 在更新一個選項卡面板的時候觸發。 |
| onContextMenu | e, title,index | 在右鍵點擊一個選項卡面板的時候觸發。 |
方法：
| 方法名 | 方法參數 | 描述 |
|---|---|---|
| options | none | 返回選項卡屬性。 |
| tabs | none | 返回所有選項卡面板。 |
| resize | none | 調整選項卡容器大小和布局。 |
| add | options | 添加一個新選項卡面板，選項參數是一個配置對象，查看選項卡面板屬性的更多細節。在添加一個新選項卡面板的時候它將變成可選的。 添加一個非選中狀態的選項卡面板時，記得設置’selected’屬性為false。
// 添加一個未選中狀態的選項卡面板
$('#tt').tabs('add',{
title: '新選項卡面板',
selected: false
//...
});
|
| close | which | 關閉一個選項卡面板，’which’參數可以是選項卡面板的標題或者索引，以指定要關閉的面板。 |
| getTab | which | 獲取指定選項卡面板，’which’參數可以是選項卡面板的標題或者索引。 |
| getTabIndex | tab | 獲取指定選項卡面板的索引。 |
| getSelected | none | 獲取選擇的選項卡面板。下面的例子展示了如何獲取選擇的選項卡面板索引。
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
alert(index);
|
| select | which | 選擇一個選項卡面板，’which’參數可以是選項卡面板的標題或者索引。 |
| unselect | which | 取消選擇一個選項卡面板，’which’參數可以是選項卡面板的標題或者索引。（該方法自1.3.5版開始可用） |
| showHeader | none | 顯示選項卡的標簽頭。（該方法自1.3.5版開始可用） |
| hideHeader | none | 隱藏選項卡的標簽頭。（該方法自1.3.5版開始可用） |
| exists | which | 表明指定的面板是否存在，’which’參數可以是選項卡面板的標題或索引。 |
| update | param | 更新指定的選項卡面板，’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');
|
| enableTab | which | 啟用指定的選項卡面板，’which’參數可以是選項卡面板的標題或索引。（該方法自1.3版開始可用）代碼示例：
$('#tt').tabs('enableTab', 1); // 啟用第二個選項卡面板
$('#tt').tabs('enableTab', 'Tab2'); // 啟用標題為Tab2的選項卡面板
|
| disableTab | which | 禁用指定的選項卡面板，’which’參數可以是選項卡面板的標題或索引。（該方法自1.3版開始可用）代碼示例：$(‘#tt’).tabs(‘disableTab’, 1); // 禁用第二個選項卡面板 |
| scrollBy | deltaX | 滾動選項卡標題指定的像素數量，負值則向右滾動，正值則向左滾動。（該方法自1.3版開始可用）代碼示例：
// 滾動選項卡標題到左邊
$('#tt').tabs('scroll', 10); |
選項卡面板
選項卡面板屬性與panel組件屬性的定義類似，下面是2個組件的一些公共屬性。
| 屬性名 | 屬性值類型 | 描述 | 默認值 |
|---|---|---|---|
| id | string | 選項卡面板的ID屬性。 | null |
| title | string | 選項卡面板的標題文本。 | |
| content | string | 選項卡面板的內容。 | |
| href | string | 從URL加載遠程數據內容填充到選項卡面板。 | null |
| cache | boolean | 如果為true，在’href’屬性設置了有效值的時候緩存選項卡面板。 | true |
| iconCls | string | 定義了一個圖標的CSS類ID顯示到選項卡面板標題。 | null |
| width | number | 選項卡面板寬度。 | auto |
| height | number | 選項卡面板高度。 | auto |
| collapsible | boolean | 如果為true，則允許選項卡摺疊。 | false |
下面的是選項卡面板新增且獨有的屬性。
| 屬性名 | 屬性值類型 | 描述 | 默認值 |
|---|---|---|---|
| closable | boolean | 在設置為true的時候，選項卡面板將顯示一個關閉按鈕，在點擊的時候會關閉選項卡面板。 | false |
| selected | boolean | 在設置為true的時候，選項卡面板會被選中。 | false |
轉載自：http://www.html5wd.com/archives/1294.html