帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jquery(Skeletabs)简单tab选项卡特效插件

帝国模板之家 2020-11-11 网页特效 评论

Skeletabs是一个功能齐全的jquery tabs切换插件,可以创建一个响应迅速、可访问、可定制的选项卡结构,方便在不同内容之间切换。

主要特点:

  • 可以使用键盘交互。

  • 自适应小屏幕设备。

  • 支持自动切换。

  • 黑色和白色主题。

  • 自动更新URL标记。

  • 4个CSS3动画:"fade", "fade-scale", "drop", "rotate".

  • 均衡内容高度。

  • 自定义触发器事件:  'Click' or 'hover'.

1.在html页面底部加载样式表skeletabs.min.css以及JavaScript文件skeletabs.min.js。

<head>
  ...
  <link href="skeletabs.min.css" rel="stylesheet">
</head>

<body>
  ...
  <script src="//code.jquery.com/jquery.min.js"></script>
  <script src="dist/skeletabs.min.js"></script>
</body>

2. 添加选项卡html结构代码

<div id="container">
  <!-- tabGroup -->
  <ul class="skltbs-tab-group">
    <!-- tabItem -->
    <li class="skltbs-tab-item">
      <!-- tab -->
      <button class="skltbs-tab">{{Tab 1}}</button>
    </li>
    <li class="skltbs-tab-item">
      <button class="skltbs-tab">{{Tab 2}}</button>
    </li>
  </ul>
  <!-- panelGroup -->
  <div class="skltbs-panel-group">
  <!-- panel -->
    <div class="skltbs-panel">{{Panel 1}}</div>
    <div class="skltbs-panel">{{Panel 2}}</div>
  </div>
</div>

3. 初始化插件

$('#container').skeletabs();

4. 通过data-skeletabs自动初始化tabs插件。

<!-- Default Options -->
<div data-skeletabs>
  ...
</div>

<!-- With Options -->
<div data-skeletabs data-skeletabs='{ "autoplay": true, "panelHeight": "adaptive" }'>
  ...
</div>

5. 插件包含了黑色和白色两个主题

<!-- Light Theme -->
<div class="skltbs-theme-light">
  ...
</div>

<!-- Dark Theme -->
<div class="skltbs-theme-dark">
  ...
</div>

6. 设置插件切换过渡效果。

<!-- Fade -->
<div class="use-fade">
  ...
</div>

<!-- Fade Toggle -->
<div class="use-fade-toggle">
  ...
</div>

<!-- Drop -->
<div class="use-drop">
  ...
</div>

<!-- Rotate -->
<div class="use-rotate">
  ...
</div>

7. 所有默认设置

$("#container").skeletabs({

  // enable autoplay
  autoplay: false,
  autoplayInterval: 3000,
  pauseOnFocus: true,
  pauseOnHover: false,

  // breakpoint in pixels
  breakpoint: 640,

  // or 'destroy
  breakpointLayout: 'accordion',

  // default tab index
  startIndex: 0,

  // disabled tab index
  disableTab: null,

  // 'replace' | 'push' | false
  history: 'replace', 

  // 'select' | 'focus' | false
  keyboard: 'select', 
  keyboardAccordion: 'vertical',
  keyboardTabs: 'horizontal',

  // 'auto' | 'equal' | 'adaptive'
  panelHeight: 'auto', 
  
  // resize timeout in ms
  resizeTimeout: 100,

  // 'click' | 'hover'
  selectEvent: 'click', 

  // enable sliding accordion
  slidingAccordion: false,
  
  // animation duration in ms
  transitionDuration: 500

});

8. API方法.

// go to a specific tab
$('#container').skeletabs('goTo', 3);

// go to the panel that matches a given URL hash
$('#container').skeletabs('goTo', window.location.hash);

// go to the next tab
$("#container").skeletabs("next");

// go to the previous
$("#container").skeletabs("prev");

// add a new tab (panel)
$('#container').skeletabs('add', {
  tab: 'New tab',
  panel: '<p>Added a <strong>new tab</strong>.</p>'
});

// methods for autoplay
$("#container").skeletabs("play");
$("#container").skeletabs("pause");

// reload 
$("#container").skeletabs("reload");

// destroy the instance
$("#container").skeletabs("destroy");

// remove a tab (panel)
$('#container').skeletabs('remove', index);

// get the current info
$("#container").skeletabs("getCurrentInfo");

9. 事件

$('#container')
.on('skeletabs:move', function(event, info) {
  // $container jQuery.Element — container element
  // $currentPanel jQuery.Element — currently active panel element
  // $currentTab jQuery.Element — currently active tab element
  // $nextPanel jQuery.Element — panel element we are moving onto
  // $nextTab jQuery.Element — tab element we are moving onto
  // $panels jQuery.Element — panel elements
  // $tabs jQuery.Element — tab elements
  // currentIndex number — currently active index
  // nextIndex number — index of the tab we are moving onto
  // currentLayout string — currently used layout ('tabs' or 'accordion')
  // size number — length of panels
})
.on('skeletabs:moved', function(event, info) {
  // $container jQuery.Element — container element
  // $currentPanel jQuery.Element — currently active panel element
  // $currentTab jQuery.Element — currently active tab element
  // $previousPanel jQuery.Element — panel element we have moved from
  // $previousTab jQuery.Element — tab element we have moved from
  // $panels jQuery.Element — panel elements
  // $tabs jQuery.Element — tab elements
  // currentIndex number — currently active index
  // nextIndex number — index of the tab we are moving onto
  // currentLayout string — currently used layout ('tabs' or 'accordion')
  // size number — length of panels
})
.on('skeletabs:layoutchange', function(event, info) {
  // $container jQuery.Element — container element
  // $currentPanel jQuery.Element — currently active panel element
  // $currentTab jQuery.Element — currently active tab element
  // $panels jQuery.Element — panel elements
  // $tabs jQuery.Element — tab elements
  // currentIndex number — currently active index
  // currentLayout string — currently used layout ('tabs' or 'accordion')
  // size number — length of panels
})
.on('skeletabs:init', function(event, info) {
  // $container jQuery.Element — container element
  // $currentPanel jQuery.Element — currently active panel element
  // $currentTab jQuery.Element — currently active tab element
  // $nextPanel jQuery.Element — panel element we are moving onto
  // $nextTab jQuery.Element — tab element we are moving onto
  // $panels jQuery.Element — panel elements
  // $tabs jQuery.Element — tab elements
  // currentIndex number — currently active index
  // nextIndex number — index of the tab we are moving onto
  // currentLayout string — currently used layout ('tabs' or 'accordion')
  // size number — length of panels
})

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言