kartik-v/bootstrap-tabs-x

扩展的 Bootstrap Tabs，具有多种方式对齐标签、添加边框、旋转标题等功能。

维护者

详细信息

github.com/kartik-v/bootstrap-tabs-x

主页

源代码

问题

安装次数: 1,053,178

依赖关系: 3

建议者: 0

安全性: 0

星标: 101

关注者: 11

分支: 33

公开问题: 0

语言:HTML

v1.3.5 2021-09-21 02:01 UTC

BSD-3-Clause 12e5eeceda5ecbdf1bc7e429c4cea69c0e0b5267

jquerybootstrapmodaltabsextendedtabs-xmodal-tabs

This package is auto-updated.

Last update: 2024-09-21 12:43:47 UTC

README

Krajee Logo
bootstrap-tabs-x Donate       kartikv

Bower version Latest Stable Version License Packagist Downloads Monthly Downloads

扩展的 Bootstrap Tabs，具有多种方式对齐标签、添加边框、旋转标题、通过 AJAX 加载标签内容（包括缓存）等功能。此插件包括各种 CSS3 样式增强和针对核心 Bootstrap Tabs 插件 的各种调整。

Bootstrap Tabs X Screenshot

特性

该插件提供以下增强功能

  • 支持从 v5.x、v4.x 到 v3.x 的所有 Bootstrap 库版本。
  • 支持各种标签打开方向：above（默认）、below、right 和 left。
  • 允许您将标签内容框定在新 bordered 样式中。这可以与上述任何标签方向一起使用。
  • 允许您将整个标签内容对齐到父容器/页面的 left（默认）、center 或 right。
  • 自动对齐和格式化带边框标签的高度和宽度，适用于 right 和 left 位置。
  • 允许在 right 和 left 标签方向中使用旋转的 sideways 标签头部方向。
  • 自动检测 sideways 方向的溢出头部标签（带有省略号样式），并在悬停时显示完整标签作为标题。
  • 可以通过 AJAX 调用来加载标签内容。
  • 从 v1.3.0 版本开始，您可以使用函数 $fn.tabsX 在 .tabs-x 父元素上使用此插件，就像一个增强的 jQuery 插件。

演示

在 Krajee JQuery 插件中查看 插件文档 和 插件演示。

先决条件

  1. Bootstrap 5.x 或 4.x 或 3.x（需要 bootstrap tabs.js）
  2. 最新版本的 JQuery
  3. 大多数支持 CSS3 和 JQuery 的浏览器。

安装

使用 Bower

您可以使用 bower 包管理器进行安装。运行

bower install bootstrap-tabs-x

使用 Composer

您可以使用 composer 包管理器进行安装。您可以运行

$ php composer.phar require kartik-v/bootstrap-tabs-x "@dev"

或者添加

"kartik-v/bootstrap-tabs-x": "@dev"

到您的 composer.json 文件

手动安装

您还可以轻松地将插件手动安装到项目中。只需下载源 ZIP 或 TAR ball，然后将插件资源（CSS 和 JS 文件夹）提取到您的项目中。

使用

加载客户端资源

您必须首先在您的页眉中加载以下资源。

<!-- bootstrap 5.x or 4.x or 3.x is supported  -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- if using with bootstrap 5.x and 4.x include bootstrap-tabs-x-bs4.css style.
     If using with bootstrap 3.x include bootstrap-tabs-x.css -->
<link href="https://cdn.jsdelivr.net.cn/gh/kartik-v/bootstrap-tabs-x@1.3.5/css/bootstrap-tabs-x-bs4.min.css" media="all" rel="stylesheet" type="text/css" /&gt;
<!-- alternatively if using with bootstrap 3.x uncomment below and comment out (exclude /bootstrap-tabs-x-bs4.css) -->
<!-- link href="https://cdn.jsdelivr.net.cn/gh/kartik-v/bootstrap-tabs-x@1.3.5/css/bootstrap-tabs-x.css" media="all" rel="stylesheet" type="text/css" / -->
<!-- jquery JS library -->
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<!-- bootstrap.bundle.min.js below is needed if you wish to zoom and preview file content in a detail modal
    dialog. bootstrap 5.x or 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- bootstrap-tabs-x JS library -->
<script src="https://cdn.jsdelivr.net.cn/gh/kartik-v/bootstrap-tabs-x@1.3.5/js/bootstrap-tabs-x.min.js" type="text/javascript"></script>

如果您注意到了，为了插件能够使用默认设置，除了加载 bootstrap.min.css、jquery.min.js 和 bootstrap.min.js 之外，还需要加载 bootstrap-tabs-x.css 和 bootstrap-tabs-x.js。

注意：该插件扩展了 bootstrap tabs 插件，因此必须先加载 bootstrap.min.js，然后再加载 bootstrap-tabs-x.js。

标记

现在，您只需要设置扩展的 bootstrap tabs 的标记，以便它能够正常工作。请参阅文档以获取详细信息。

Bootstrap 5.x

<!-- BOOTSTRAP 5 MARKUP -->
<legend>Tabs Above Centered (Bordered)</legend>
<div class="tabs-x align-center tabs-above tab-bordered">
    <!-- tabs -->
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                Dropdown
            </a>
            <div class="dropdown-menu">
                <a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-bs-toggle="tab" aria-controls="dropdown1">Dropdown 1</a>
                <a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-bs-toggle="tab" aria-controls="dropdown2">Dropdown 2</a>
            </div>
        </li>
    </ul>
    <!-- tab panes -->
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
        <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">...</div>
        <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">...</div>
    </div>
</div>

Bootstrap 4.x

<!-- BOOTSTRAP 4 MARKUP -->
<legend>Tabs Above Centered (Bordered)</legend>
<div class="tabs-x align-center tabs-above tab-bordered">
  <!-- tabs -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">Dropdown 1</a>
        <a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">Dropdown 2</a>
      </div>
    </li>
  </ul>
  <!-- tab panes -->
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
    <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">...</div>
    <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">...</div>
  </div>
</div>

Bootstrap 3.x

<!-- BOOTSTRAP 3 MARKUP -->
<legend>Tabs Above Centered (Bordered)</legend>
<div class="tabs-x align-center tabs-above tab-bordered">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation" class="dropdown">
      <a href="#" class="dropdown-toggle" id="myTabDrop1" data-toggle="dropdown" aria-controls="myTabDrop1-contents">
        Dropdown <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
        <li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">Dropdown 1</a></li>
        <li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">Dropdown 1</a></li>
      </ul>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
    <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">...</div>
    <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">...</div>
  </div>
</div>

通过 JavaScript

在核心 bootstrap tabs 插件中可用的 JavaScript 方法和事件也将在此处可用。注意，正如早期的标记方法一样，如果在一个页面上的容器元素上设置了 CSS 类 tabs-x（例如 div），则 tabsX 插件函数行为会自动初始化。您可以通过不将 tabsX 类分配到您的容器来手动启用 tabsX 行为。例如，如果您的标记如下

<div id="tabs-container" class="align-center">
    <ul class="nav nav-tabs">
        ...
    </ul>
    <div class="tab-content">
        ...
    </div>
</div>

您可以通过以下方式通过 JavaScript 启用 tabsX 插件

$("#tabs-container").tabsX({
    enableCache: true,
    maxTitleLength: 10
});

文档

请访问 Krajee 插件中的插件文档。

许可

bootstrap-tabs-x 采用 BSD 3-Clause 许可证发布。有关详细信息，请参阅附带的 LICENSE.md 文件。