灵活 jQuery选项卡接口插件 SmartTab

  • 源码大小:285.17KB
  • 所需积分:1积分
  • 源码编号:19JP-3450
  • 浏览次数:552次
  • 最后更新:2023年06月14日
  • 所属栏目:滑块
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

SmartTab是一个强大且高度可定制的jQuery插件,用于创建具有酷炫动画效果的选项卡式界面。

它支持ajax内容、键盘导航、Bootstrap 5、第三方CSS动画库,并与所有主要浏览器兼容。

如何使用它:

1.在网页上包含jQuery库和SmartTab.js脚本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/jquery.smartTab.js"></script>

2.在网页上包含所需的样式表。所有可能的主题:

  • 违约
  • 阻碍
  • 精英
  • 锻造
  • 药丸
<!-- All in one -->
<link href="/path/to/dist/css/smart_tab_all.min.css" rel="stylesheet" />

<!-- Default Theme -->
<link href="/path/to/dist/css/smart_tab.min.css" rel="stylesheet" />

<!-- Blocks Theme -->
<link href="/path/to/dist/css/smart_tab_blocks.min.css" rel="stylesheet" />

<!-- Brick Theme -->
<link href="/path/to/dist/css/smart_tab_brick.min.css" rel="stylesheet" />

<!-- Elite Theme -->
<link href="/path/to/dist/css/smart_tab_elite.min.css" rel="stylesheet" />

<!-- Forge Theme -->
<link href="/path/to/dist/css/smart_tab_forge.min.css" rel="stylesheet" />

<!-- Bootstrap Pills Theme -->
<link href="/path/to/dist/css/smart_tab_pills.min.css" rel="stylesheet" />

3.选项卡式界面所需的标记结构。

<div id="smarttab">

  <!-- Tabs -->
  <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>
  </ul>

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

4.调用吨容器上的插件并完成。

$('#smarttab').smartTab();

5.使用以下选项自定义插件。

$('#smarttab').smartTab({

  // Selected Tab, 0 = first tab
  selected: 0,  

  // theme name
  theme: 'default',

  // Justified layout for tabs
  justified: true,

  // Auto adjust content height
  autoAdjustHeight: true,

  // Supports for Back button
  backButtonSupport: true,
  
  // Enables URL hash
  enableURLhash: true,
    
  // Configs animations here
  transition: {

    // Animation effect on navigation
    // none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
    animation: 'none',
    
    // Animation speed.
    speed: '400',
    
    // Easing function.
    // Requires jQuery easing plugin
    easing: '',
    
    // Only used if animation is 'css'
    prefixCss: '',
    fwdShowCss: '',
    fwdHideCss: '',
    bckShowCss: '',
    bckHideCss: '',

  },

  // Auto switches between tabs
  autoProgress: {
    
    // enable
    enabled: false,
    
    // interval in ms
    interval: 3500,

    // stop on focus
    stopOnFocus: true

  },

  // Keyboard navigation
  keyboardSettings: {

    // enable
    keyNavigation: true,

    // keycodes
    keyLeft: [37, 38],
    keyRight: [39, 40],
    keyHome: [36],
    keyEnd: [35],

  },

  // CSS Class settings
  style: {
    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'
  },

  // Callback function for content loading
  getContent: null,

});

6.覆盖默认的CSS变量来创建自己的样式。

:root {
  --st-background: unset,
  --st-border: 1px solid #eeeeee,
  --st-anchor-default-primary-color: #f8f9fa;
  --st-anchor-default-secondary-color: #b0b0b1;
  --st-anchor-active-primary-color: #009EF7;
  --st-anchor-active-secondary-color: #ffffff;
  --st-anchor-disabled-primary-color: #f8f9fa;
  --st-anchor-disabled-secondary-color: #dbe0e5;
  --st-loader-color: #009EF7;
  --st-loader-background-color: #f8f9fa;
  --st-loader-background-wrapper-color: rgba(255, 255, 255, 0.7);
}

7.API方法。

// goto the next tab
$('#smarttab').smartTab("next");

// back to the previous tab
$('#smarttab').smartTab("prev");

// goto the first tab
$('#smarttab').smartTab("first");

// goto the last tab
$('#smarttab').smartTab("last");

// reset tabs
$('#smarttab').smartTab("reset");

// goto a specific tab
$('#smarttab').smartTab("goToTab", 3);

// update options
$('#smarttab').smartTab("setOptions", options);

// get options
$('#smarttab').smartTab("getOptions");

// get the tab info
$('#smarttab').smartTab("getInfo");

// show/hide the loading animation
$('#smarttab').smartTab("loader", "show");
$('#smarttab').smartTab("loader", "hide");

// adjust the content height of the current step
$('#smarttab').smartTab("fixHeight");

更多示例:

  • 典型的
  • 底部
  • 倍数
  • 竖的

更新日志:

版本4.0.2(2022-07-31)

  • 已修复:快速导航导致页面选择不当
  • 更改:代码改进

版本4.0.1(2022-07-11)

  • 添加:支持jQuery Slim版本
  • 添加:公共函数fixHeight
  • 添加:公共函数getInfo以获取选项卡索引和tota选项卡
  • 添加了:带有force参数的goToTab函数
  • 添加:新主题
  • 添加:颜色可以使用CSS变量动态更改。
  • 添加:Bootstrap 5支持
  • 添加:初始化事件
  • 添加:将CSS类名移动到选项
  • 添加:可以扩展过渡动画
  • 添加:CSS动画支持过渡动画。支持Animate.css
  • 更改:JavaScript和CSS代码被重写
  • 更改:强制所有CSS主题
  • 更改:使大多数选项可以通过setOptions功能更改
  • 更改:用最少且有意义的名称重写选项名称和属性
  • 更改:改进了过渡动画
  • 已移除:黑暗模式已移除。添加了CSS变量支持来更改任何颜色。
  • 删除:删除了方向选项,而是将st垂直CSS类添加到主元素中

2020-06-15

  • v3.1.1:一些优化

2020-05-09

  • v3.0.1:优化了init方法

2020-05-04

  • v3.0全新选项卡。
  • 更新的文档。

2015-02-02

  • 使现代化

预览截图