EasyUI-标签(Tabs)用法
用法示例
創(chuàng)建tabs
1. 經(jīng)由標(biāo)記創(chuàng)建Tabs
從標(biāo)記創(chuàng)建Tabs更容易，我們不需要寫任何JavaScript代碼。記住把 'easyui-tabs' 類添加到<div/>標(biāo)記，每個(gè)tab panel 經(jīng)由子<div/>標(biāo)記被創(chuàng)建，其用法與Panel一樣。
1. <div id="tt" class="easyui-tabs">
2. <div title="Tab1">
3. tab1
4. </div>
5. <div title="Tab2" closable="true">
6. tab2
7. </div>
8. <div title="Tab3" iconCls="icon-reload" closable="true">
9. tab3
10. </div>
11. </div>
2. 編程創(chuàng)建Tabs
現(xiàn)在我們編程創(chuàng)建 Tabs，我們同時(shí)捕捉 'onSelect' 事件。
1. $('#tt').tabs({
2. border:false,
3. onSelect:function(title){
4. alert(title+' is selected');
5. }
6. });
增加新的 tab panel
1. // 增加一個(gè)新的 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; // 相應(yīng)的 tab 對象
特性
|
名稱 |
類型 |
說明 |
默認(rèn)值 |
|
width |
number |
Tabs 容器的寬度。 |
auto |
|
height |
number |
Tabs 容器的高度。 |
auto |
|
plain |
boolean |
True 就不用背景容器圖片來呈現(xiàn) tab 條。 |
false |
|
fit |
boolean |
True 就設(shè)置 Tabs 容器的尺寸以適應(yīng)它的父容器。 |
false |
|
border |
boolean |
True 就顯示 Tabs 容器邊框。 |
true |
|
scrollIncrement |
number |
每按一次tab 滾動(dòng)按鈕，滾動(dòng)的像素?cái)?shù)。 |
100 |
|
scrollDuration |
number |
每一個(gè)滾動(dòng)動(dòng)畫應(yīng)該持續(xù)的毫秒數(shù)。 |
400 |
|
tools |
array |
右側(cè)工具欄，每個(gè)工具選項(xiàng)都和 Linkbutton 一樣。 |
null |
事件
|
名稱 |
參數(shù) |
說明 |
|
onLoad |
panel |
當(dāng)一個(gè) ajax tab panel 完成加載遠(yuǎn)程數(shù)據(jù)時(shí)觸發(fā)。 |
|
onSelect |
title |
當(dāng)用戶選擇一個(gè) tab panel 時(shí)觸發(fā)。 |
|
onBeforeClose |
title |
當(dāng)一個(gè) tab panel 被關(guān)閉前觸發(fā)，返回 false 就取消關(guān)閉動(dòng)作。 |
|
onClose |
title |
當(dāng)用戶關(guān)閉一個(gè) tab panel 時(shí)觸發(fā)。 |
|
onAdd |
title |
當(dāng)一個(gè)新的 tab panel 被添加時(shí)觸發(fā)。 |
|
onUpdate |
title |
當(dāng)一個(gè) tab panel 被更新時(shí)觸發(fā)。 |
|
onContextMenu |
e, title |
當(dāng)一個(gè) tab panel 被右鍵點(diǎn)擊時(shí)觸發(fā)。 |
方法
|
名稱 |
參數(shù) |
說明 |
|
options |
none |
返回 tabs options。 |
|
tabs |
none |
返回全部 tab panel。 |
|
resize |
none |
調(diào)整 tabs 容器的尺寸并做布局。 |
|
add |
options |
增加一個(gè)新的 tab panel，options 參數(shù)是一個(gè)配置對象，更多詳細(xì)信息請參見 tab panel 特性。 |
|
close |
title |
關(guān)閉一個(gè) tab panel，title 參數(shù)是指被關(guān)閉的 panel。 |
|
getTab |
title |
獲取指定的 tab panel。 |
|
getSelected |
none |
獲取選中的 tab panel。 |
|
select |
title |
選擇一個(gè) tab panel。 |
|
exists |
title |
是指是否存在特定的 panel。 |
|
update |
param |
更新指定的 tab panel，param 包含兩個(gè)特性： |
Tab Panel
Tab panel 特性被定義在 panel 組件里，下面是一些常用的特性。
|
名稱 |
類型 |
說明 |
默認(rèn)值 |
|
title |
string |
Tab panel 的標(biāo)題文字。 |
|
|
content |
string |
Tab panel 的內(nèi)容。 |
|
|
href |
string |
加載遠(yuǎn)程內(nèi)容來填充 tab panel 的 URL。 |
null |
|
cache |
boolean |
True 就在設(shè)定了有效的 href 特性時(shí)緩存這個(gè) tab panel。 |
true |
|
iconCls |
string |
顯示在tab panel 標(biāo)題上的圖標(biāo)的 CSS 類。 |
null |
|
width |
number |
Tab panel 的寬度。 |
auto |
|
height |
number |
Tab panel 的高度。 |
auto |
一些附加的特性
|
名稱 |
類型 |
說明 |
默認(rèn)值 |
|
closable |
boolean |
當(dāng)設(shè)置為 true 時(shí)，tab panel 將顯示一個(gè)關(guān)閉按鈕，點(diǎn)擊它就能關(guān)閉這個(gè)tab panel。 |
false |
|
selected |
boolean |
當(dāng)設(shè)置為 true 時(shí)，tab panel 將被選中。 |
false |
jQuery
EasyUI 標(biāo)簽(Tabs)用法
[ad#content]這里介紹一下標(biāo)簽(Tabs)用法以及參數(shù)，首先我們可以先看一下面板功能可以做什么，下圖就是一個(gè)面板的實(shí)例。
同樣我們來通過一個(gè)小例子來學(xué)習(xí)一下這些參數(shù)，HTML代碼如下：
1
<div
id="tt">
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);
也可以給面板函數(shù)添加一些參數(shù):
13
$('#tt').tabs('add',{
14
title:'New Tab',
15
content:'Tab Body',
16
closable:true
17
});
參數(shù)
|
參數(shù)名 |
參數(shù) |
描述 |
默認(rèn)值 |
|
width |
數(shù)字 |
標(biāo)簽容器的寬度 |
auto |
|
height |
數(shù)字 |
標(biāo)簽容器的高度 |
auto |
|
idSeed |
數(shù)字 |
The |
0 |
|
plain |
布爾 |
如果為ture標(biāo)簽沒有背景圖片 |
false |
|
fit |
布爾 |
如果為ture則設(shè)置標(biāo)簽的大小以適應(yīng)它的容器的父容器 |
false |
|
border |
布爾 |
如果為true則顯示標(biāo)簽容器的邊框 |
true |
|
scrollIncrement |
數(shù)字 |
滾動(dòng)按鈕每次被按下時(shí)滾動(dòng)的像素值 |
100 |
|
scrollDuration |
數(shù)字 |
每次滾動(dòng)持續(xù)的毫秒數(shù) |
400 |
事件
|
事件名 |
參數(shù) |
描述 |
|
onLoad |
arguments |
當(dāng)一個(gè)AJAX標(biāo)簽加載遠(yuǎn)程數(shù)據(jù)完成時(shí)被觸發(fā)，參數(shù)和jQuery.ajax成功返回的回調(diào)函數(shù)相同 |
|
onSelect |
title |
當(dāng)用戶選擇一個(gè)標(biāo)簽面板時(shí)被觸發(fā) |
|
onClose |
title |
當(dāng)用戶關(guān)閉一個(gè)標(biāo)簽面板時(shí)被觸發(fā) |
方法
|
方法名 |
參數(shù) |
描述 |
|
resize |
none |
調(diào)整標(biāo)簽容器的大小和布局 |
|
add |
options |
添加新標(biāo)簽面板，可選參數(shù)是一個(gè)配置對象，詳細(xì)信息可以查看下面的標(biāo)簽面板屬性 |
|
close |
title |
關(guān)閉一個(gè)標(biāo)簽面板，標(biāo)題參數(shù)表明被關(guān)閉的面板 |
|
select |
title |
選擇一個(gè)標(biāo)簽面板 |
|
exists |
title |
指示特定的標(biāo)簽是否存在 |
標(biāo)簽面板屬性
|
屬性名 |
類型 |
描述 |
默認(rèn)值 |
|
id |
字符串 |
標(biāo)簽面板的ID屬性 |
null |
|
title |
字符串 |
標(biāo)簽面板的文本標(biāo)題 |
|
|
content |
字符串 |
標(biāo)簽面板的主體內(nèi)容 |
|
|
href |
字符串 |
填充標(biāo)簽內(nèi)容的遠(yuǎn)程URL地址 |
null |
|
cache |
布爾 |
如果為true，當(dāng)設(shè)置href時(shí)，對標(biāo)簽面板進(jìn)行緩存 |
true |
|
icon |
字符串 |
標(biāo)簽面板上標(biāo)題的圖標(biāo)CSS類 |
null |
|
closable |
布爾 |
如果為true，標(biāo)簽面板會顯示出關(guān)閉按鈕，點(diǎn)擊可以關(guān)閉選項(xiàng)卡面板。 |
false |
|
selected |
布爾 |
如果為true，標(biāo)簽標(biāo)簽面板將被選中 |
false |
|
width |
數(shù)字 |
標(biāo)簽面板的寬度 |
auto |
|
height |
數(shù)字 |
標(biāo)簽面板的高度 |
auto |
總結(jié)發(fā)布jQuery
EasyUI 中文API—Layout(Tabs)
Tabs【標(biāo)簽】
創(chuàng)建一個(gè)tab標(biāo)簽
使用說明
使用到的頭文件：easyui.css、icon.css、jquery-1.4.2.min.js、jquery.easyui.min.js
HTML代碼
1
<div id="tt">
2
<div title="Tab1">
3
tab1
4
</div>
5
<div title="Tab2" closable="true">
6
tab2
7
</div>
8
<div title="Tab3" icon="icon-reload" closable="true">
9
tab3
10 </div>
11 </div>
JQuery代碼
12 //創(chuàng)建一個(gè)標(biāo)簽容器
13 $('#tt').tabs(options);
14
15 //增加一個(gè)tab面板
16 $('#tt').tabs('add',{
17 title:'New Tab',
18 content:'Tab Body',
19 closable:true
20 });
Tabs Container特性說明
|
Tabs Container事件說明
|
名稱 |
參數(shù) |
描述 |
|
onLoad |
arguments |
ajax面板加載完畢后觸發(fā)，參數(shù)調(diào)用跟jQuery.ajax調(diào)功能一樣 |
|
onSelect |
title |
選中標(biāo)簽面板觸發(fā) |
|
onClose |
title |
關(guān)閉標(biāo)簽面板觸發(fā) |
Tabs Container方法說明
|
名稱 |
參數(shù) |
描述 |
|
resize |
none |
調(diào)整容器的布局 |
|
add |
options |
添加一個(gè)新的標(biāo)簽面板,選擇一個(gè)配置對象參數(shù),看標(biāo)簽面板的特性說明 |
|
close |
title |
關(guān)閉一個(gè)標(biāo)簽面板,標(biāo)題參數(shù)顯示的面板被關(guān)閉。 |
|
select |
title |
選中一個(gè)標(biāo)簽面板 |
|
exists |
title |
指明特殊面板顯示存在。 |
Tab Panel特性說明
|
名稱 |
類型 |
描述 |
默認(rèn)值 |
|
id |
string |
標(biāo)簽面板id |
null |
|
title |
string |
標(biāo)簽面板的title |
|
|
content |
string |
標(biāo)簽面板的content. |
|
|
href |
string |
面板遠(yuǎn)程加載進(jìn)來數(shù)據(jù)的地址. |
null |
|
cache |
boolean |
設(shè)置true，緩存標(biāo)簽面板 |
true |
|
icon |
string |
標(biāo)簽面板標(biāo)題上圖標(biāo)css。 |
null |
|
closable |
boolean |
設(shè)置true，標(biāo)題上顯示一個(gè)關(guān)閉按鈕 |
false |
|
selected |
boolean |
設(shè)置true，標(biāo)簽面板被選中【默認(rèn)那個(gè)顯示在前】 |
false |
|
width |
number |
標(biāo)簽面板寬度 |
auto |
|
height |
number |
標(biāo)簽面板高度 |
auto |
有些覺得翻譯的牽強(qiáng)，肯定也有錯(cuò)的地方，謝謝指出來。
總結(jié)
以上是生活随笔為你收集整理的EasyUI-标签(Tabs)用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpeedTest.cn：华为 Mate
- 下一篇： Macaca自动化测试工具环境搭建