jQuery UI API - 标签页部件（Tabs Widget）

jQuery UI API - 标签页部件（Tabs Widget）

网址参考：http://www.runoob.com/jqueryui/api-tabs.html

用法

描述：一种多面板的单内容区，每个面板与列表中的标题相关。

版本新增：1.0

标签页（Tabs）通常用于把内容分成多个部分，以便节省空间，就像折叠面板（accordion）一样。

标签页（Tabs）有一组必须使用的特定标记，以便标签页能正常工作：

• 标签页（Tabs）必须在一个有序的（<ol>）或无序的（<ul>）列表中
• 每个标签页的 "title" 必须在一个列表项（<li>）的内部，且必须用一个带有 href 属性的锚（<a>）包裹。
• 每个标签页面板可以是任意有效的元素，但是它必须带有一个 id，该 id 与相关标签页的锚中的哈希相对应。

每个标签页面板的内容可以在页面中定义好，或者可以通过 Ajax 加载。这两种方式都是基于与标签页相关的锚的 href 上自动处理的。默认情况下，标签页在点击时激活，但是通过 event 选项可以改变或覆盖事件。

键盘交互

当焦点在标签页上时，下面的键盘命令可用：

• 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：与标签页相关的面板。只有与其对应的标签页激活时才可见。

转载于:https://www.cnblogs.com/LiuMingfeng/p/7741782.html