Tabs 的教學文件參考 :
相對於 EasyUI 或 ExtJS 而言, jQuery UI 的頁籤面板功能比簡單陽春, 例如它的頁籤只能在上面, 不能在左右或下方, 參考 :
# ExtJS 4 測試 : 頁籤面板 TabPanel
# jQuery EasyUI 測試 : Tabs 頁籤面板
jQuery UI 頁籤面板的 HTML 結構是由兩層 div 構成, 外層 div 是頁籤本身的容器, 內層 div 容器包括兩部分 :
測試 1 : 頁籤面板測試 : 頁籤內容的三種資料來源 [看原始碼]
HTML 部分 :
<div id="tabs">
<ul>
<li><a href="#tab1">頁籤 1</a></li>
<li><a href="tab2.htm">頁籤 2</a></li>
<li><a href="tab3.php">頁籤 3</a></li>
</ul>
<div id="tab1">
<p>這是頁籤 1 (網頁內提供)</p>
</div>
</div>
頁籤 2 內容來源 tab2.htm 如下 :
<!DOCTYPE html>
<html>
<body>
這是頁籤 2 (tab2.htm 提供)
</body>
</html>
頁籤 3 內容來源 tab3.php 如下 :
<?php
echo "這是頁籤 3 (tab3.php 提供)";
?>
其實就只是簡單地用 echo 回應字串而已.
在 jQuery UI 部分 :
只需要呼叫 tabs() 函數就可以了 :
結果如下 :
注意, 此例中頁籤 2 與 3 的內容都是透過 Ajax 從後端載入的, 實際測試可以發現第一次切換到這兩個頁籤時, 內容載入速度較頁籤 1 為慢, 因為頁籤 1 的內容示隨整個網頁載入的.
上面範例呼叫 tabs() 時未傳入設定參數, 頁籤面板提供 options, method, 以及 event 等設定屬性, 其中 options 常用的屬性如下 :
首先測試 active 與 disabled 選項, 此選項的值是 0 起始的整數, 用來設定預設要開啟的頁籤. disabled 屬性值為陣列, 其元素為頁籤索引, 用來指定哪些頁籤功能要禁止掉, 例如 :
測試 2 : 頁籤面板測試 : active 與 disabled 屬性 [看原始碼]
HTML 部分 :
<div id="tabs">
<ul>
<li><a href="#tab1">頁籤 1</a></li>
<li><a href="#tab2">頁籤 2</a></li>
<li><a href="#tab3">頁籤 3</a></li>
<li><a href="#tab4">頁籤 4</a></li>
</ul>
<div id="tab1">
<p>這是頁籤 1</p>
</div>
<div id="tab2">
<p>這是頁籤 2</p>
</div>
<div id="tab3">
<p>這是頁籤 3</p>
</div>
<div id="tab4">
<p>這是頁籤 4</p>
</div>
</div>
jQuery 程式部分 :
var config={active: 2, disabled: [0,3]};
$("#tabs").tabs(config);
可見因為 active=2, 因此預設開啟的是頁籤 3; 而 disabled=[0, 3] 表示頁籤 1 與 4 被禁能, 無法切換.
其次, collapsible 選項值為 true/false, 用來設定頁籤是否可收合, 預設為 false 不可收合. 當設為 true 時, 則每個頁籤都可收合, 點一下頁籤標題收合起來, 再點一下又開啟, 例如 :
測試 3 : 頁籤面板測試 : collapsible 屬性 [看原始碼]
HTML 部分 : 同上面測試 2.
jQuery 程式部分 :
var config={collapsible: true};
$("#tabs").tabs(config);
若 collapsible=true 同時 active=false, 則每一個頁籤面板預設都會被收合起來, 例如 :
測試 3-1 : 頁籤面板測試 : active 與 collapsible 屬性 [看原始碼]
HTML 部分 : 同上面測試 2.
jQuery 程式部分 :
var config={active: false, collapsible: true};
$("#tabs").tabs(config);
雖然預設都收合起來, 但只要點一下頁籤, 面板內容就會展開了.
接下來測試 heightSyle 選項, 此選項值為如下三種字串 :
測試 4 : 頁籤面板測試 : heightStyle 屬性='auto' [看原始碼]
HTML 部分 :
<div id="tabs">
<ul>
<li><a href="#tab1">頁籤 1</a></li>
<li><a href="#tab2">頁籤 2</a></li>
<li><a href="#tab3">頁籤 3</a></li>
<li><a href="#tab4">頁籤 4</a></li>
</ul>
<div id="tab1">
<p>這是頁籤 1</p>
</div>
<div id="tab2">
<p>這是頁籤 2</p>
<p>這是頁籤 2</p>
</div>
<div id="tab3">
<p>這是頁籤 3</p>
<p>這是頁籤 3</p>
<p>這是頁籤 3</p>
</div>
<div id="tab4">
<p>這是頁籤 4</p>
<p>這是頁籤 4</p>
<p>這是頁籤 4</p>
<p>這是頁籤 4</p>
</div>
</div>
這裡我刻意將四個頁籤的高度與其編號成正比, 即頁籤四高度為頁籤一的四倍 :
jQuery 部分 :
var config={heightStyle: "auto"};
$("#tabs").tabs(config);
可見設定為 auto, 四個頁籤高度都與最高的頁籤 4 相同.
接著測試 event 屬性, 用來設定開啟頁籤面板之事件, 其值為兩個字串之一 : "click" (預設) 與 "mouseover", 下面範例將開啟事件設為 "mouseover" :
測試 5 : 頁籤面板測試 : event 屬性='mouseover' [看原始碼]
HTML 部分 : 與測試 4 相同.
jQuery 部分 :
可見當滑鼠滑過頁籤標題時, 面板就開啟了.
參考 :
# 如何套用 jQuery UI 頁籤 tabs 的樣式
相對於 EasyUI 或 ExtJS 而言, jQuery UI 的頁籤面板功能比簡單陽春, 例如它的頁籤只能在上面, 不能在左右或下方, 參考 :
# ExtJS 4 測試 : 頁籤面板 TabPanel
# jQuery EasyUI 測試 : Tabs 頁籤面板
jQuery UI 頁籤面板的 HTML 結構是由兩層 div 構成, 外層 div 是頁籤本身的容器, 內層 div 容器包括兩部分 :
- 頁籤標題 div (必要) :
由 ul-li 元素組構成, 在每個頁籤標題的 li 元素內用 a 元素指向內容來源, 可以是網頁內的資料, 也可以是其他的網頁檔案如 .htm 或 .php 等後端程式產生的資料, 但基於安全限制, 不可以是跨網域來源. - 網頁內容 div (非必要) :
當頁籤內容來源是網頁內的資料, 這些資料放在此 div 容器內, 頁籤標題的 a 元素須以錨點指向此 div 的 id. 若頁籤內容資料來源是主機下的 htm 或 php 檔案, 則不需要此容器.
測試 1 : 頁籤面板測試 : 頁籤內容的三種資料來源 [看原始碼]
HTML 部分 :
<div id="tabs">
<ul>
<li><a href="#tab1">頁籤 1</a></li>
<li><a href="tab2.htm">頁籤 2</a></li>
<li><a href="tab3.php">頁籤 3</a></li>
</ul>
<div id="tab1">
<p>這是頁籤 1 (網頁內提供)</p>
</div>
</div>
頁籤 2 內容來源 tab2.htm 如下 :
<!DOCTYPE html>
<html>
<body>
這是頁籤 2 (tab2.htm 提供)
</body>
</html>
頁籤 3 內容來源 tab3.php 如下 :
<?php
echo "這是頁籤 3 (tab3.php 提供)";
?>
其實就只是簡單地用 echo 回應字串而已.
在 jQuery UI 部分 :
只需要呼叫 tabs() 函數就可以了 :
$("#tabs").tabs();
結果如下 :
上面範例呼叫 tabs() 時未傳入設定參數, 頁籤面板提供 options, method, 以及 event 等設定屬性, 其中 options 常用的屬性如下 :
常用設定屬性 | 說明 |
active | 預設開啟之頁籤索引 (0 起始, 預設 0), 亦可為 true/false, 見 collapsible |
collapsible | 是否可收合 (預設 false), 當 false 時, 若 active=false 則全部頁籤均收合 |
disabled | 禁能之頁籤索引陣列, 預設 [] (即全部頁籤均致能) |
heightStyle | 頁籤內容高度 : auto (與最高面板同高), fill (與父元素同高), content (與內容同高, 預設) |
event | 設定開啟頁籤面板之事件 ("click"/"mouserover"), 預設為 "click" (按滑鼠左鍵) |
首先測試 active 與 disabled 選項, 此選項的值是 0 起始的整數, 用來設定預設要開啟的頁籤. disabled 屬性值為陣列, 其元素為頁籤索引, 用來指定哪些頁籤功能要禁止掉, 例如 :
測試 2 : 頁籤面板測試 : active 與 disabled 屬性 [看原始碼]
HTML 部分 :
<div id="tabs">
<ul>
<li><a href="#tab1">頁籤 1</a></li>
<li><a href="#tab2">頁籤 2</a></li>
<li><a href="#tab3">頁籤 3</a></li>
<li><a href="#tab4">頁籤 4</a></li>
</ul>
<div id="tab1">
<p>這是頁籤 1</p>
</div>
<div id="tab2">
<p>這是頁籤 2</p>
</div>
<div id="tab3">
<p>這是頁籤 3</p>
</div>
<div id="tab4">
<p>這是頁籤 4</p>
</div>
</div>
jQuery 程式部分 :
var config={active: 2, disabled: [0,3]};
$("#tabs").tabs(config);
可見因為 active=2, 因此預設開啟的是頁籤 3; 而 disabled=[0, 3] 表示頁籤 1 與 4 被禁能, 無法切換.
其次, collapsible 選項值為 true/false, 用來設定頁籤是否可收合, 預設為 false 不可收合. 當設為 true 時, 則每個頁籤都可收合, 點一下頁籤標題收合起來, 再點一下又開啟, 例如 :
測試 3 : 頁籤面板測試 : collapsible 屬性 [看原始碼]
HTML 部分 : 同上面測試 2.
jQuery 程式部分 :
var config={collapsible: true};
$("#tabs").tabs(config);
若 collapsible=true 同時 active=false, 則每一個頁籤面板預設都會被收合起來, 例如 :
測試 3-1 : 頁籤面板測試 : active 與 collapsible 屬性 [看原始碼]
HTML 部分 : 同上面測試 2.
jQuery 程式部分 :
var config={active: false, collapsible: true};
$("#tabs").tabs(config);
雖然預設都收合起來, 但只要點一下頁籤, 面板內容就會展開了.
接下來測試 heightSyle 選項, 此選項值為如下三種字串 :
- "auto" : 所有頁籤面板高度與最高的頁籤相同.
- "fill" : 與父容器 (即瀏覽器) 高度相同.
- "content": 與頁籤內容同高.
測試 4 : 頁籤面板測試 : heightStyle 屬性='auto' [看原始碼]
HTML 部分 :
<div id="tabs">
<ul>
<li><a href="#tab1">頁籤 1</a></li>
<li><a href="#tab2">頁籤 2</a></li>
<li><a href="#tab3">頁籤 3</a></li>
<li><a href="#tab4">頁籤 4</a></li>
</ul>
<div id="tab1">
<p>這是頁籤 1</p>
</div>
<div id="tab2">
<p>這是頁籤 2</p>
<p>這是頁籤 2</p>
</div>
<div id="tab3">
<p>這是頁籤 3</p>
<p>這是頁籤 3</p>
<p>這是頁籤 3</p>
</div>
<div id="tab4">
<p>這是頁籤 4</p>
<p>這是頁籤 4</p>
<p>這是頁籤 4</p>
<p>這是頁籤 4</p>
</div>
</div>
這裡我刻意將四個頁籤的高度與其編號成正比, 即頁籤四高度為頁籤一的四倍 :
jQuery 部分 :
var config={heightStyle: "auto"};
$("#tabs").tabs(config);
可見設定為 auto, 四個頁籤高度都與最高的頁籤 4 相同.
接著測試 event 屬性, 用來設定開啟頁籤面板之事件, 其值為兩個字串之一 : "click" (預設) 與 "mouseover", 下面範例將開啟事件設為 "mouseover" :
測試 5 : 頁籤面板測試 : event 屬性='mouseover' [看原始碼]
HTML 部分 : 與測試 4 相同.
jQuery 部分 :
var config={event: "mouseover"};
$("#tabs").tabs(config);
可見當滑鼠滑過頁籤標題時, 面板就開啟了.
參考 :
# 如何套用 jQuery UI 頁籤 tabs 的樣式
沒有留言 :
張貼留言