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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!