jQuery UI API - 標(biāo)簽頁部件（Tabs Widget）

所屬類別

小部件（Widgets）

用法

描述：一種多面板的單內(nèi)容區(qū)，每個面板與列表中的標(biāo)題相關(guān)。

版本新增：1.0

標(biāo)簽頁（Tabs）通常用于把內(nèi)容分成多個部分，以便節(jié)省空間，就像折疊面板（accordion）一樣。

標(biāo)簽頁（Tabs）有一組必須使用的特定標(biāo)記，以便標(biāo)簽頁能正常工作：

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

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

下面是一些樣品標(biāo)記：

<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>

鍵盤交互

當(dāng)焦點在標(biāo)簽頁上時，下面的鍵盤命令可用：

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

當(dāng)焦點在面板上時，下面的鍵盤命令可用：

  • CTRL+UP：移動焦點到相關(guān)的標(biāo)簽頁。
  • ALT+PAGE UP：移動焦點到上一個標(biāo)簽頁，并立即激活。
  • ALT+PAGE DOWN：移動焦點到下一個標(biāo)簽頁，并立即激活。

主題化

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

  • ui-tabs：標(biāo)簽頁的外層容器。當(dāng)設(shè)置了 collapsible 選項時，該元素會另外帶有一個 ui-tabs-collapsible class。
    • ui-tabs-nav：標(biāo)簽頁列表。
      • 導(dǎo)航中激活的列表項會帶有一個 ui-tabs-active class。內(nèi)容通過 Ajax 調(diào)用加載的列表項會帶有一個 ui-tabs-loading class。
        • ui-tabs-anchor：用于切換面板的錨。
    • ui-tabs-panel：與標(biāo)簽頁相關(guān)的面板。只有與其對應(yīng)的標(biāo)簽頁激活時才可見。

依賴

附加說明

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

實例

一個簡單的 jQuery UI 標(biāo)簽頁（Tabs）。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>標(biāo)簽頁部件（Tabs Widget）演示</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></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>第一個標(biāo)簽是默認(rèn)激活的：</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>

查看演示