PWS Tabs jQuery 选项卡插件

PWS Tabs 是一个轻量级 jQuery 选项卡插件，用于创建响应式平面样式选项卡式内容面板，并具有由 CSS3 动画支持的一些很酷的过渡效果。

PWS Tabs jQuery 插件支持多级嵌套选项卡。您可以使用自定义设置在选项卡内添加无限的选项卡。

使用方法：

在head部分中包括 jQuery 库和 jQuery PWS Tabs 插件

<script src="js/jquery-1.10.2.min.js"></script> 
<link type="text/css" rel="stylesheet" href="jquery.pwstabs.css">
<script src="jquery.pwstabs.js"></script>

创建选项卡式面板并使用 HTML5 data-pws-*属性指定选项卡的 ID 和名称。

<div class="hello_world">
    <div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1">
        Our first tab</div>
    <div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2">
        Our second tab</div>
    <div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3">
        Our third tab</div>
</div>

data-pws-tab用于启动选项卡并作为其 ID。

data-pws-tab-name用于选项卡显示名称。

PWS Tabs调用

<script>
jQuery(function($){
   $('.hello_world').pwstabs();
});

jQuery(function($){
   $('.hello_world').pwstabs({

      // scale / slideleft / slideright / slidetop / slidedown / none
      effect: 'scale', 
 
      // The tab to be opened by default
      defaultTab: 1,    
 
      // Set custom container width
      // Any size value (1,2,3.. / px,pt,em,%,cm..)
      containerWidth: '100%',

      // Tabs position: horizontal / vertical
      tabsPosition: 'horizontal',
 
      // Tabs horizontal position: top / bottom
      horizontalPosition: 'top',

      // Tabs vertical position: left / right
      verticalPosition: 'left',
      
      // BETA: Make tabs container responsive: true / false (!!! BETA)
      responsive: false,

      // Themes available: default: '' / pws_theme_violet / pws_theme_green / pws_theme_yellow
      // pws_theme_gold / pws_theme_orange / pws_theme_red / pws_theme_purple / pws_theme_grey
      theme: '',
      
      // Right to left support: true/ false
      rtl: false,
      
      // Before first init callback function
      onBeforeFirstInit: function() {},
      
      // After first init callback function
      onAfterFirstInit: function() {},
      
      // Before init callback function
      onBeforeInit: function() {},
      
      // After init callback function
      onAfterInit: function() {},
      
      // Before tab change callback function
      onBeforeChange: function() {},
      
      // After tab change callback function
      onAfterChange: function() {}

   });        
});
</script>

更多参数

• effect 过渡效果 // scale / slideleft / slideright / slidetop / slidedown / none

• defaultTab 默认选择哪个选项卡 //选项卡 ID 号以 1 开头（1,2,3..）

• containerWidth 选项卡容器宽度 //1,2,3.. / px,pt,em,%,cm..

• tabsPosition 定义选项卡位置 //horizontal / vertical

• horizontalPosition 定义水平位置 // top / bottom

• verticalPosition 定义垂直位置 // left / right

• responsive 是否响应式 //true / false

• rtl 选项卡顺序是否从右到左 //true / false