13 Jquery UI Tabs 选项卡插件

Posted 2021-01-02 工作在浏览器上人-YangBobin

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

一、实例

一个简单的 jQuery UI 标签页（Tabs）。

代码

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

查看演示

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

四、快速导航

1、Options

• active：当前打开哪一个panel（面板）。
• collapsible：当设置为 true时，激活的panel（面板）可以被关闭。
• disabled：哪些标签被禁用。
• event：激活选项卡的事件类型。 要悬停（hover）激活选项卡，用"mouseover"。
• heightStyle：控制Tab（选项卡）部件和每个panel（面板）的高度。 可能的值：
• "auto": 所有的panel（面板）将会被设置为最高的panel（面板）的高度。
• "fill": 基于 tabs 的父元素的高度，扩展到可用的高度。
• "content": 每个panel（面板）的高度取决于它的内容。
• hide：panel（面板）隐藏时的动画效果。
• show：panel（面板）显示时的动画效果。

2、Methods

• destroy()：完全移除 Tab（选项卡） 功能. 这将使元素返回到之前的初始化状态。
• disable()：禁用全部的 tabs（选项卡）。
• enable()：启用全部或某个的 tabs（选项卡）。
• load()：加载远程选项卡的面板内容。
• option()：获取当前与指定的 optionName 关联的值。
• refresh()：处理任何在 DOM 中直接添加或移除的标题和面板，并重新计算 tabs（选项卡） 的高度。结果取决于内容和 heightStyle 选项。
• widget()：返回一个包含 tabs（选项卡） 的 jQuery 对象。

3、Events

• activate( event, ui )：面板被激活后触发（在动画完成之后）。如果 tabs（选项卡） 之前是关闭的，则 ui.oldTab 和 ui.oldPanel 将是空的 jQuery 对象。如果 tabs（选项卡） 正在折叠，则 ui.newTab 和 ui.newPanel 将是空的 jQuery 对象。
• beforeActivate( event, ui )：tabs（选项卡）被激活前直接触发。可以取消以防止tabs（选项卡）被激活。如果 tabs（选项卡） 当前是关闭的，则 ui.oldTab 和 ui.oldPanel 将是空的 jQuery 对象。如果 accordion 正在折叠，则 ui.newTab 和 ui.newPanel 将是空的 jQuery 对象。
• beforeLoad( event, ui )：在一个远程选项卡被加载之前，beforeActivate事件之后，触发该事件。可以取消，以防止 tabs（选项卡）面板加载内容;虽然面板仍然会被激活。 该事件被触发Ajax请求发送之前，这样可以使用ui.jqXHR 和 ui.ajaxSettings修改。
• create( event, ui )：当创建 tabs（选项卡) 时触发。如果 tabs（选项卡) 是关闭的，ui.tab 和 ui.panel 将是空的 jQuery 对象。
• load( event, ui )：远程选项卡加载后触发该事件。