带CSS3过渡动画效果的jQuery Tabs选项卡插件

jQueryTab是一款带CSS3过渡动画效果的jQuery Tabs选项卡插件。它是轻量级插件，使用简单，采用响应式设计，并支持多种CSS3动画过渡效果。它的特点还有：

• 响应式设计：在平板、手机等小屏幕设备中自动转换为手风琴样式。
• 支持Cookie：插件会使用Cookie记住用户点击的最后一个Tab。
• CSS3动画过渡：支持的动画过渡效果有：fade, slideUp, slideRight, flip, rotate, swingRight, scaleDown, scaleUp。你也可以定义动画。
• 手风琴效果：在小屏幕设备中可对手风琴进行折叠。
• 可在初始化时选择某个Tab来显示。
• URL Hash：可以在URL地址中直接打开某个Tab。
• 回调函数：提供before和after回调函数。
• 事件：可以在点击和鼠标滑过事件之间切换。

使用方法

使用该Tabs选项卡插件需要在页面中引入jQuery、jQueryTab.css、animation.css和jQueryTab.js文件。

<link rel="stylesheet" href="jQueryTab.css" type="text/css" media="screen" />
<link rel="stylesheet" href="animation.css" type="text/css" media="screen" />
<script src="js/jquery.min.js"></script>
<script src="js/jQueryTab.js"></script>                  
                

HTML结构

Tabs选项卡的基本HTML结构如下：

<div class="tabs-1">
  <ul class="tabs">
      <li><a href="#tab1">General</a></li>
      <li><a href="#tab2">Social Media</a></li>
      <li><a href="#tab-copyright">Copyright</a></li>
      <li><a href="#tab4">Contact</a></li>
  </ul>
  <section class="tab_content_wrapper">
          <article class="tab_content" id="tab1">
              <p>General calidis mundum caligine coeperunt. </p>
          </article>
          <article class="tab_content" id="tab2">
              <p>Social Media conversa egens spectent tum sed diremit haec. </p>
          </article>
          <article class="tab_content" id="tab-copyright">
              <p>Copyright eurus supplex undae fulgura congestaque locis.</p>
          </article>
          <article class="tab_content" id="tab4">
              <p>Contact erat pugnabant diffundi pondere temperiemque. </p>
          </article>
  </section>
</div>            
                

初始化插件

在页面DOM元素加载完毕之后，可以通过jQueryTab()方法来初始化该选项卡插件。

$('.tabs-1').jQueryTab(); 
                

配置参数

创建Class动画类

创建Tab的进入动画过渡类：

.swingRightIn {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    opacity: 1;
    transition-delay: .3s;
}                  
                

创建Tab的离开动画过渡类：

.swingRightOut {
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
}                  
                

然后可以在初始化该选项卡插件时传入这些class类。

$('.tabs-1').jQueryTab({
    tabInTransition: 'swingRightIn',
    tabOutTransition: 'swingRightOut',
    cookieName: 'active-tab-1' 
});                  
                

jQueryTab选项卡插件的github地址为：https://github.com/dharmapoudel/jQueryTab