Latest web development tutorials

jQuery UI API – 標籤頁部件（Tabs Widget）

所屬類別

小部件（Widgets）

用法

描述：一種多面板的單內容區，每個面板與列表中的標題相關。

版本新增： 1.0

標籤頁（Tabs）通常用於把內容分成多個部分，以便節省空間，就像折疊面板（accordion）一樣。

標籤頁（Tabs）有一組必須使用的特定標記，以便標籤頁能正常工作：

  • 標籤頁（Tabs）必須在一個有序的（ <ol> ）或無序的（ <ul> ）列表中
  • 每個標籤頁的"title"必須在一個列表項（ <li> ）的內部，且必須用一個帶有href屬性的錨（ <a> ）包裹。
  • 每個標籤頁面板可以是任意有效的元素，但是它必須帶有一個id，該id 與相關標籤頁的錨中的哈希相對應。

每個標籤頁面板的內容可以在頁面中定義好，或者可以通過Ajax 加載。 這兩種方式都是基於與標籤頁相關的錨的href上自動處理的。 默認情況下，標籤頁在點擊時激活，但是通過event選項可以改變或覆蓋事件。

下面是一些樣品標記： 

<div id="tabs">
  <ul>
    <li><a href="#fragment-1">一</a></li>
    <li><a href="#fragment-2">二</a></li>
    <li><a href="#fragment-3">三</a></li>
  </ul>
  <div id="fragment-1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

鍵盤交互

當焦點在標籤頁上時，下面的鍵盤命令可用：

  • UP/LEFT：移動焦點到上一個標籤頁。 如果在第一個標籤頁上，則移動焦點到最後一個標籤頁。 在一個短暫的延遲後激活獲得焦點的標籤頁。
  • DOWN/RIGHT：移動焦點到下一個標籤頁。 如果在最後一個標籤頁上，則移動焦點到第一個標籤頁。 在一個短暫的延遲後激活獲得焦點的標籤頁。
  • HOME：移動焦點到第一個標籤頁。 在一個短暫的延遲後激活獲得焦點的標籤頁。
  • END：移動焦點到最後一個標籤頁。 在一個短暫的延遲後激活獲得焦點的標籤頁。
  • SPACE：激活與獲得焦點的標籤頁相關的面板。
  • ENTER：激活或切換與獲得焦點的標籤頁相關的面板。
  • ALT+PAGE UP：移動焦點到上一個標籤頁，並立即激活。
  • ALT+PAGE DOWN：移動焦點到下一個標籤頁，並立即激活。

當焦點在面板上時，下面的鍵盤命令可用：

  • CTRL+UP：移動焦點到相關的標籤頁。
  • ALT+PAGE UP：移動焦點到上一個標籤頁，並立即激活。
  • ALT+PAGE DOWN：移動焦點到下一個標籤頁，並立即激活。

主題化

標籤頁部件（Tabs Widget）使用jQuery UI CSS框架來定義它的外觀和感觀的樣式。 如果需要使用標籤頁指定的樣式，則可以使用下面的CSS class 名稱：

  • ui-tabs ：標籤頁的外層容器。 當設置了collapsible選項時，該元素會另外帶有一個ui-tabs-collapsible class。
    • ui-tabs-nav ：標籤頁列表。
      • 導航中激活的列表項會帶有一個ui-tabs-active class。 內容通過Ajax調用加載的列表項會帶有一個ui-tabs-loading class。
        • ui-tabs-anchor ：用於切換面板的錨。
    • ui-tabs-panel ：與標籤頁相關的面板。 只有與其對應的標籤頁激活時才可見。

依賴

附加說明

  • 該部件要求一些功能性的CSS，否則將無法工作。 如果您創建了一個自定義的主題，請使用小部件指定的CSS 文件作為起點。

實例

一個簡單的jQuery UI 標籤頁（Tabs）。 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>標籤頁部件（Tabs Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>一</span></a></li>
    <li><a href="#fragment-2"><span>二</span></a></li>
    <li><a href="#fragment-3"><span>三</span></a></li>
  </ul>
  <div id="fragment-1">
    <p>第一個標籤是默認激活的：</p>
    <code>$( "#tabs" ).tabs(); </code>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>
 
<script>
$( "#tabs" ).tabs();
</script>
 
</body>
</html>