当前位置:主页 > 网页特效 > TAB标签 >

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

发布时间:2018/07/07 来源:互联网 浏览: 关键词:jquery 选项卡 CSS3 动画效果 tab 
带CSS3过渡动画效果的jQuery Tabs选项卡插件 带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文件。

<linkrel="stylesheet"href="jQueryTab.css"type="text/css"media="screen"/>
<linkrel="stylesheet"href="animation.css"type="text/css"media="screen"/>
<scriptsrc="js/jquery.min.js"></script>
<scriptsrc="js/jQueryTab.js"></script>     

HTML结构

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

<divclass="tabs-1">
  <ulclass="tabs">
      <li><ahref="#tab1">General</a></li>
      <li><ahref="#tab2">Social Media</a></li>
      <li><ahref="#tab-copyright">Copyright</a></li>
      <li><ahref="#tab4">Contact</a></li>
  </ul>
  <sectionclass="tab_content_wrapper">
          <articleclass="tab_content"id="tab1">
              <p>General calidis mundum caligine coeperunt. </p>
          </article>
          <articleclass="tab_content"id="tab2">
              <p>Social Media conversa egens spectent tum sed diremit haec. </p>
          </article>
          <articleclass="tab_content"id="tab-copyright">
              <p>Copyright eurus supplex undae fulgura congestaque locis.</p>
          </article>
          <articleclass="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:topcenter;
    -moz-transform-origin:topcenter;
    -ms-transform-origin:topcenter;
    transform-origin:topcenter;
    opacity:1;
    transition-delay: .3s;
}   

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

.swingRightOut {
    -webkit-transform-origin:topcenter;
    -moz-transform-origin:topcenter;
    -ms-transform-origin:topcenter;
    transform-origin:topcenter;
    -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

共有人阅读,期待你的评论!评论
Top