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

当前位置:主页 > jQuery库 > 选项卡 > 带CSS3过渡动画效果的jQuery Tabs选项卡插件
带CSS3过渡动画效果的jQuery Tabs选项卡插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-04-01
    阅读:
麦子学院
简要教程

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(); 
                

配置参数

参数 默认值 描述
tabClass 'tabs' 选项卡的class类
accordionClass 'accordion_tabs' 小屏幕设备中手风琴头部的class类
contentWrapperClass 'tab_content_wrapper' 包裹内容的class类
contentClass 'tab_content' 容器的class类
activeClass 'active' 当前激活tab的class类
responsive true 是否允许在小屏幕设备中转换为手风琴效果
responsiveBelow 600 设置响应式断点
collapsible true 是否在小屏幕中折叠手风琴
useCookie true 是否使用Cookie来记住最后一个激活的Tab
openOnhover false 是否在鼠标滑过时切换Tab
initialTab 1 初始化时打开的Tab,第一个Tab是1不是0
cookieName 'active-tab' 记住最后一个激活的Tab的Cookie名称
cookieExpires 365 Cookie过期时间
cookiePath '' 访问cookie的路径
cookieDomain '' cookie所在的域
cookieSecure false 是否启用Cookie的安全机制(需要Https协议)
tabInTransition 'fadeIn' 显示Tabs中内容的class名称
tabOutTransition 'fadeOut' 隐藏Tabs中内容的class名称
accordionTransition 'slide' 手风琴的过渡效果:normal 或 slide
accordionIntime 500 进入动画的时间,单位毫秒
accordionOutTime 400 离开动画的时间,单位毫秒
before function(){} tab打开之前的回调函数
after function(){} tab关闭之后的回调函数

创建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

网友评论