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>