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

所屬類別

小部件（Widgets）

用法

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

版本新增：1.0

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

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

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

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

下面是一些樣品標(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)焦點(diǎn)在標(biāo)簽頁上時(shí)，下面的鍵盤命令可用：

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

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

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

主題化

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

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

依賴

附加說明

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

實(shí)例

一個(gè)簡單的 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>第一個(gè)標(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>

查看演示