README

jquery.autotabs.js 会自动根据应用到的 DOM 元素中的标记生成标签页。

为指定元素中的每个子元素创建一个标签页。可以自定义用于生成标签页的子元素。

向页面添加一组可导航的标签页。标签页的位置可自定义。

每个标签页可以包含静态或动态内容。

请参阅 docs/index.html 中的演示/文档。

要求

jQuery >= 1.9.1

如果您希望 autotabs 记住标签页的状态，您还需要 jQuery.cookie 插件

jquery.cookie.js: >= 1.4

安装

通过 bower 安装

将以下行添加到您的 bower.json 配置文件中

  "dependencies": {
    "autotabs": "~2.0",
  }

下载

或者从以下地址下载

设置

javascripts

    <script src="../dist/js/jquery.js"></script>
    <script src="../dist/js/jquery.cookie.js"></script>    <!-- optional -->
    <script src="../dist/js/jquery.autotabs.min.js"></script>

stylesheets

    <link rel="stylesheet" type="text/css" href="../dist/css/jquery.autotabs.min.css" />

对于垂直标签页，请包含提供的自定义样式表

    <link rel="stylesheet" type="text/css" href="../dist/css/jquery.autotabs.vertical.min.css" />

将以下逻辑添加到您的页面或添加到页面中的插件

$( "#mytabs" ).autotabs(/* { options } */));

标记选项

可以在标记中直接配置标签页设置。以下属性被支持

data-autotabs-label

标签页标签。

data-autotabs-url

标签页内容的远程 URL。

title

标签页标签。

此属性已被 data-autotabs-label 属性取代，可能在未来的版本中删除。

rel (已弃用)

标签页内容的远程 URL。

此属性已被 data-autotabs-url 属性取代，可能在未来的版本中删除。

如何使用

通过 AJAX 动态加载标签页内容

只需将标签页内容的 URL 设置为 data-autotabs-url 属性。

使用 Bootstrap 样式化标签页

要使用 Bootstrap 样式表样式标签页，请使用以下选项

tabs_class: "nav nav-tabs",
tab_class: null,
active_class: "active"

将标签页样式化为药丸形状

tabs_class: "nav nav-pills",
tab_class: null,
active_class: "active"

插件选项

tab_pane_selector

定义用于标识标签页的选择器。

默认值: div, section, .tab-pane

tab_label_selector

定义用于从标签页元素的元素中标识标签标签/标题的选择器。

默认值: h1, h2, h3, h4

tabs_class

为生成的标签元素设置 CSS 类。

默认值: autotabs

tab_class

为每个生成的标签元素设置 CSS 类。

默认值: autotab

tabs_selector

用于标识生成的标签应附加到的元素的选择器。

默认值: none

active_class

为当前选定的标签添加 CSS 类。

默认值: current

active_tab

插件加载时设置为活动的标签的索引。

默认值: null

cookie_name

在其中存储标签页状态的 cookie 的名称。此选项需要 jQuery.cookie.js 插件。

默认值: active_tab

cookie_path

设置 cookie 的路径。此选项需要 jQuery.cookie.js 插件。

默认值: /

force_refresh

在点击时强制刷新每个标签。

默认值: false

tab_orphans

是否将单个（孤立）的 tab-pane 作为标签处理。

默认值: false

loading_icon

包含加载图标元素的 selector。

默认值: #loading

tab_id

一个负责在标记中未提供时生成标签ID的函数。

默认值

function( id ) { return "__" + id; }

tab_label

一个负责在标记中未提供时生成每个标签的函数。

默认值

function( index ) { return "Tab " + ( index + 1 ); },

tab_pane_id

一个负责在标记中未提供时生成每个标签面板ID的函数。

默认值

function( index ) { return "___" + ( index + 1 ); },

vertical

是否垂直对齐标签。

默认值：false

success

定义当点击标签时应用的回调函数。此选项可以是

一个函数，在这种情况下，它应用于所有标签
一个对象，其中属性是标签的ID，值是作为该标签回调函数的函数。

所有函数都应用于标签面板元素。因此，this 指的是标签面板元素。

opichon / autotabs

维护者

详细信息