Tab选项卡
过渡动画效果jQuery Tabs选项卡插件
PetitQ
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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
