小狐狸事務所: jQuery UI 學習筆記 (四) : 頁籤面板 (Tabs)

頁籤面板是一種容器, 用來將網頁內容分群管理, 所有的內容事實上都放在同一個網頁裡或從檔案載入, 頁籤只是用來切換不同的群而已, 如同活頁筆記本的分類標籤功能. 用頁籤面板來管理內容非常方便, 因為可在單一網頁切換不同資訊內容.

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();

結果如下 :

注意, 此例中頁籤 2 與 3 的內容都是透過 Ajax 從後端載入的, 實際測試可以發現第一次切換到這兩個頁籤時, 內容載入速度較頁籤 1 為慢, 因為頁籤 1 的內容示隨整個網頁載入的.

上面範例呼叫 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": 與頁籤內容同高.

下面是 heightStyle=auto 的範例 :

測試 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 的樣式

小狐狸事務所

2019年3月13日星期三

jQuery UI 學習筆記 (四) : 頁籤面板 (Tabs)

沒有留言:

張貼留言

2019年3月13日 星期三

jQuery UI 學習筆記 (四) : 頁籤面板 (Tabs)

沒有留言:

張貼留言

2019年3月13日星期三