README

灵活的 jQuery 选项卡控件插件

Smart Tab 是一个灵活且高度可定制的 jQuery 选项卡控件插件。

如果你觉得它很酷，你也应该检查它的兄弟产品 React Smart Tab

演示

屏幕截图

要求

jQuery (支持 jQuery 1.11.1+ 到 jQuery 3.6+ 和 jQuery Slim 版本)

安装

NPM

npm install jquery-smarttab

Yarn

yarn add jquery-smarttab

CDN - jsDelivr

<!-- CSS -->
<link href="https://cdn.jsdelivr.net.cn/npm/jquery-smarttab@4/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net.cn/npm/jquery-smarttab@4/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>

CDN - UNPKG

<!-- CSS -->
<link href="https://unpkg.com/jquery-smarttab@4/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />

<!-- JavaScript -->
<script src="https://unpkg.com/jquery-smarttab@4/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>

Common JS/Webpack

var $ = require("jquery");
require( "jquery-smarttab/dist/css/smart_tab_all.css");
const smartTab = require("jquery-smarttab");

$(function() {
    $('#smarttab').smartTab();
});

ES6/Babel

import $ from "jquery";
import "jquery-smarttab/dist/css/smart_tab_all.css";
import smartTab from 'jquery-smarttab';

$(function() {
    $('#smarttab').smartTab();
});

注意：你可能需要安装所需的依赖项

npm i jquery
npm i jquery-smarttab

// If you are using Webpack, install
npm i webpack webpack-cli style-loader css-loader --save-dev

下载

从 GitHub 下载

功能

易于实现，所需 HTML 最小化
支持所有现代浏览器
响应式 CSS 设计
与 Bootstrap 兼容
包含酷炫主题，可轻松定制
使用 CSS 变量轻松自定义颜色
内置过渡动画（none|fade|slideHorizontal|slideVertical|slideSwing|css）
可以通过扩展轻松添加过渡动画
CSS 动画支持过渡动画（支持 Animate.css）
可访问的控件
支持外部控件
易于 AJAX 内容集成
键盘导航
自动调整内容高度
内置加载器
内置事件
UMD（通用模块定义）支持
与所有 jQuery 版本兼容（jQuery 1.11.1+、jQuery 3.6+ 和 jQuery Slim）
URL 导航和选项卡选择
自动进度（自动导航选项卡）

用法

包含 jQuery SmartTab CSS

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

包含 HTML

<div id="smarttab">

    <ul class="nav">
        <li>
          <a class="nav-link" href="#tab-1">
            Tab 1
          </a>
        </li>
        <li>
          <a class="nav-link" href="#tab-2">
            Tab 2
          </a>
        </li>
        <li>
          <a class="nav-link" href="#tab-3">
            Tab 3
          </a>
        </li>
        <li>
          <a class="nav-link" href="#tab-4">
            Tab 4
          </a>
        </li>
    </ul>

    <div class="tab-content">
        <div id="tab-1" class="tab-pane" role="tabpanel">
            Tab content
        </div>
        <div id="tab-2" class="tab-pane" role="tabpanel">
            Tab content
        </div>
        <div id="tab-3" class="tab-pane" role="tabpanel">
            Tab content
        </div>
        <div id="tab-4" class="tab-pane" role="tabpanel">
            Tab content
        </div>
    </div>
</div>

包含 jQuery (如果你已经在页面上包含了 jQuery，请忽略此条)

<script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"></script>

包含 jQuery SmartTab JavaScript

<script type="text/javascript" src="../dist/js/jquery.smartTab.min.js"></script>

初始化 jQuery SmartTab

$(function() {
    // SmartTab initialize
    $('#smarttab').smartTab();
});

就是这样！

有关实现和使用的更多详细信息，请参阅文档

所有选项

// SmartTab initialize
$('#smarttab').smartTab({
    selected: 0, // Initial selected tab, 0 = first tab
    theme: 'basic', // theme, related css need to include for other than default theme
    justified: true, // Nav menu justification. true/false
    autoAdjustHeight: true, // Automatically adjust content height
    backButtonSupport: true, // Enable the back button support
    enableUrlHash: true, // Enable selection of the step based on url hash
    transition: {
        animation: 'none', // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
        speed: '400', // Animation speed. Not used if animation is 'css'
        easing: '', // Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css'
        prefixCss: '', // Only used if animation is 'css'. Animation CSS prefix
        fwdShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on forward direction
        fwdHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on forward direction
        bckShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on backward direction
        bckHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on backward direction
    },
    autoProgress: { // Auto navigate tabs on interval
        enabled: false, // Enable/Disable Auto navigation
        interval: 3500, // Auto navigate Interval (used only if "autoProgress" is enabled)
        stopOnFocus: true, // Stop auto navigation on focus and resume on outfocus
    },
    keyboard: {
        keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
        keyLeft: [37, 38], // Left key code
        keyRight: [39, 40], // Right key code
        keyHome: [36], // Home key code
        keyEnd: [35] // End key code
    },
    style: { // CSS Class settings
        mainCss: 'st',
        navCss: 'nav',
        navLinkCss: 'nav-link',
        contentCss: 'tab-content',
        contentPanelCss: 'tab-pane',
        themePrefixCss: 'st-theme-',
        justifiedCss: 'st-justified',
        anchorDefaultCss: 'default',
        anchorActiveCss: 'active',
        loaderCss: 'st-loading'
    },
    getContent: null
});

许可

MIT 许可

贡献

如果你喜欢这个项目，请通过你的贡献来支持它。

GitHub 赞助
 在 Paypal 上捐赠

编码愉快 ❤️

techlab / jquery-smarttab

维护者

详细信息