jQuery EasyUI 教程-Tabs（選項卡）
選項卡顯示一批面板。但在同一個時間只會顯示一個面板。每個選項卡面板都有頭標題和一些小的按鈕工具選單，包括關閉按鈕和其他自定義按鈕。
使用案例：
建立面板
通過標籤和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