用法示例
創建tabs
1. 經由標記創建Tabs
從標記創建Tabs更容易，我們不需要寫任何JavaScript代碼。記住把 'easyui-tabs' 類添加到<div/>標記，每個tab panel 經由子<div/>標記被創建，其用法與Panel一樣。
1. <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
2. <div title="Tab1" style="padding:20px;display:none;">
3. tab1
4. </div>
5. <div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">
6. tab2
7. </div>
8. <div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">
9. tab3
10. </div>
11. </div>
2. 編程創建Tabs
現在我們編程創建 Tabs，我們同時捕捉 'onSelect' 事件。
1. $('#tt').tabs({
2. border:false,
3. onSelect:function(title){
4. alert(title+' is selected');
5. }
6. });
增加新的 tab panel
1. // 增加一個新的 tab panel
2. $('#tt').tabs('add',{
3. title:'New Tab',
4. content:'Tab Body',
5. closable:true
6. });
獲取選中的 Tab
1. // 獲取選中的 tab panel 和它的 tab 對象
2. var pp = $('#tt').tabs('getSelected');
3. var tab = pp.panel('options').tab; // 相應的 tab 對象
特性
| 名稱 |
類型 |
說明 |
默認值 |
| width |
number |
Tabs 容器的寬度。 |
auto |
| height |
number |
Tabs 容器的高度。 |
auto |
| plain |
boolean |
True 就不用背景容器圖片來呈現 tab 條。 |
false |
| fit |
boolean |
True 就設置 Tabs 容器的尺寸以適應它的父容器。 |
false |
| border |
boolean |
True 就顯示 Tabs 容器邊框。 |
true |
| scrollIncrement |
number |
每按一次tab 滾動按鈕，滾動的像素數。 |
100 |
| scrollDuration |
number |
每一個滾動動畫應該持續的毫秒數。 |
400 |
| tools |
array |
右側工具欄，每個工具選項都和 Linkbutton 一樣。 |
null |
事件
| 名稱 |
參數 |
說明 |
| onLoad |
panel |
當一個 ajax tab panel 完成加載遠程數據時觸發。 |
| onSelect |
title |
當用戶選擇一個 tab panel 時觸發。 |
| onBeforeClose |
title |
當一個 tab panel 被關閉前觸發，返回 false 就取消關閉動作。 |
| onClose |
title |
當用戶關閉一個 tab panel 時觸發。 |
| onAdd |
title |
當一個新的 tab panel 被添加時觸發。 |
| onUpdate |
title |
當一個 tab panel 被更新時觸發。 |
| onContextMenu |
e, title |
當一個 tab panel 被右鍵點擊時觸發。 |
方法
| 名稱 |
參數 |
說明 |
| options |
none |
返回 tabs options。 |
| tabs |
none |
返回全部 tab panel。 |
| resize |
none |
調整 tabs 容器的尺寸並做布局。 |
| add |
options |
增加一個新的 tab panel，options 參數是一個配置對象，更多詳細信息請參見 tab panel 特性。 |
| close |
title |
關閉一個 tab panel，title 參數是指被關閉的 panel。 |
| getTab |
title |
獲取指定的 tab panel。 |
| getSelected |
none |
獲取選中的 tab panel。 |
| select |
title |
選擇一個 tab panel。 |
| exists |
title |
是指是否存在特定的 panel。 |
| update |
param |
更新指定的 tab panel，param 包含兩個特性： |
Tab Panel
Tab panel 特性被定義在 panel 組件里，下面是一些常用的特性。
| 名稱 |
類型 |
說明 |
默認值 |
| title |
string |
Tab panel 的標題文字。 |
|
| content |
string |
Tab panel 的內容。 |
|
| href |
string |
加載遠程內容來填充 tab panel 的 URL。 |
null |
| cache |
boolean |
True 就在設定了有效的 href 特性時緩存這個 tab panel。 |
true |
| iconCls |
string |
顯示在tab panel 標題上的圖標的 CSS 類。 |
null |
| width |
number |
Tab panel 的寬度。 |
auto |
| height |
number |
Tab panel 的高度。 |
auto |
一些附加的特性
| 名稱 |
類型 |
說明 |
默認值 |
| closable |
boolean |
當設置為 true 時，tab panel 將顯示一個關閉按鈕，點擊它就能關閉這個tab panel。 |
false |
| selected |
boolean |
當設置為 true 時，tab panel 將被選中。 |
false |
jQuery EasyUI 標簽(Tabs)用法
[ad#content]這里介紹一下標簽(Tabs)用法以及參數，首先我們可以先看一下面板功能可以做什么，下圖就是一個面板的實例。
同樣我們來通過一個小例子來學習一下這些參數，HTML代碼如下：
1 <div id="tt" style="width:500px;height:250px;">
2 <div title="Tab1" style="padding:20px;display:none;">
3 tab1
4 </div>
5 <div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">
6 tab2
7 </div>
8 <div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">
9 tab3
10 </div>
11 </div>
然后按照《jQuery EasyUI框架使用文檔》包含必要文件后，只要在$(function(){ }); 里添加一行代碼來生成面板：
12 $('#tt').tabs(options);
也可以給面板函數添加一些參數:
13 $('#tt').tabs('add',{
14 title:'New Tab',
15 content:'Tab Body',
16 closable:true
17 });
參數
| 參數名 |
參數 |
描述 |
默認值 |
| width |
數字 |
標簽容器的寬度 |
auto |
| height |
數字 |
標簽容器的高度 |
auto |
| idSeed |
數字 |
The base id seed to generate tab panel’s DOM id attribute. |
0 |
| plain |
布爾 |
如果為ture標簽沒有背景圖片 |
false |
| fit |
布爾 |
如果為ture則設置標簽的大小以適應它的容器的父容器 |
false |
| border |
布爾 |
如果為true則顯示標簽容器的邊框 |
true |
| scrollIncrement |
數字 |
滾動按鈕每次被按下時滾動的像素值 |
100 |
| scrollDuration |
數字 |
每次滾動持續的毫秒數 |
400 |
事件
| 事件名 |
參數 |
描述 |
| onLoad |
arguments |
當一個AJAX標簽加載遠程數據完成時被觸發，參數和jQuery.ajax成功返回的回調函數相同 |
| onSelect |
title |
當用戶選擇一個標簽面板時被觸發 |
| onClose |
title |
當用戶關閉一個標簽面板時被觸發 |
方法
| 方法名 |
參數 |
描述 |
| resize |
none |
調整標簽容器的大小和布局 |
| add |
options |
添加新標簽面板，可選參數是一個配置對象，詳細信息可以查看下面的標簽面板屬性 |
| close |
title |
關閉一個標簽面板，標題參數表明被關閉的面板 |
| select |
title |
選擇一個標簽面板 |
| exists |
title |
指示特定的標簽是否存在 |
標簽面板屬性
| 屬性名 |
類型 |
描述 |
默認值 |
| id |
字符串 |
標簽面板的ID屬性 |
null |
| title |
字符串 |
標簽面板的文本標題 |
|
| content |
字符串 |
標簽面板的主體內容 |
|
| href |
字符串 |
填充標簽內容的遠程URL地址 |
null |
| cache |
布爾 |
如果為true，當設置href時，對標簽面板進行緩存 |
true |
| icon |
字符串 |
標簽面板上標題的圖標CSS類 |
null |
| closable |
布爾 |
如果為true，標簽面板會顯示出關閉按鈕，點擊可以關閉選項卡面板。 |
false |
| selected |
布爾 |
如果為true，標簽標簽面板將被選中 |
false |
| width |
數字 |
標簽面板的寬度 |
auto |
| height |
數字 |
標簽面板的高度 |
auto |
總結發布jQuery EasyUI 中文API—Layout(Tabs)
Tabs【標簽】
創建一個tab標簽
使用說明
使用到的頭文件：easyui.css、icon.css、jquery-1.4.2.min.js、jquery.easyui.min.js
HTML代碼
1 <div id="tt" style="width:500px;height:250px;">
2 <div title="Tab1" style="padding:20px;display:none;">
3 tab1
4 </div>
5 <div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">
6 tab2
7 </div>
8 <div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">
9 tab3
10 </div>
11 </div>
JQuery代碼
12 //創建一個標簽容器
13 $('#tt').tabs(options);
14
15 //增加一個tab面板
16 $('#tt').tabs('add',{
17 title:'New Tab',
18 content:'Tab Body',
19 closable:true
20 });
Tabs Container特性說明
|
Tabs Container事件說明
| 名稱 |
參數 |
描述 |
| onLoad |
arguments |
ajax面板加載完畢后觸發，參數調用跟jQuery.ajax調功能一樣 |
| onSelect |
title |
選中標簽面板觸發 |
| onClose |
title |
關閉標簽面板觸發 |
Tabs Container方法說明
| 名稱 |
參數 |
描述 |
| resize |
none |
調整容器的布局 |
| add |
options |
添加一個新的標簽面板,選擇一個配置對象參數,看標簽面板的特性說明 |
| close |
title |
關閉一個標簽面板,標題參數顯示的面板被關閉。 |
| select |
title |
選中一個標簽面板 |
| exists |
title |
指明特殊面板顯示存在。 |
Tab Panel特性說明
| 名稱 |
類型 |
描述 |
默認值 |
| id |
string |
標簽面板id |
null |
| title |
string |
標簽面板的title |
|
| content |
string |
標簽面板的content. |
|
| href |
string |
面板遠程加載進來數據的地址. |
null |
| cache |
boolean |
設置true，緩存標簽面板 |
true |
| icon |
string |
標簽面板標題上圖標css。 |
null |
| closable |
boolean |
設置true，標題上顯示一個關閉按鈕 |
false |
| selected |
boolean |
設置true，標簽面板被選中【默認那個顯示在前】 |
false |
| width |
number |
標簽面板寬度 |
auto |
| height |
number |
標簽面板高度 |
auto |
有些覺得翻譯的牽強，肯定也有錯的地方，謝謝指出來。