jQuery Tab选项卡插件tabulous.js
简介
tabulous.js 是一个简单小巧的 jQuery Tab 选项卡插件,它没有太多花哨的东西,主要特点是使用了 CSS3 的过度效果,它提供 4 种过度效果,分别是 scale、slideLeft、scaleUp 和 flip。
兼容
浏览器兼容:兼容 IE8 及以上版本和其他主流浏览器,由于 IE8 和 IE9 不支持 CSS3 过度效果,所以没有效果,但能正常使用。
jQuery 兼容:兼容 1.7 及以上版本。
使用方法
1、引入文件
<link rel="stylesheet" href="css/tabulous.css"> <script src="js/jquery.min.js"></script> <script src="js/tabulous.js"></script>
2、HTML
<div class="tabs"> <ul> <li><a href="#tabs-1">Tab 1</a></li> <li><a href="#tabs-2">Tab 2</a></li> <li><a href="#tabs-3">Tab 3</a></li> </ul> <div id="tabs_container"> <div id="tabs-1"> <p><a href="//www.dowebok.com/">内容1</a></p> </div> <div id="tabs-2"> <p><a href="//www.dowebok.com/">内容2</a></p> </div> <div id="tabs-3"> <p><a href="//www.dowebok.com/">内容3</a></p> </div> </div> </div>
注意:id=”tabs_container” 是必须的,不能缺省或更改,因为 tabulous.js 需要找到这个对象,如果一个页面中有多 Tab 选项卡,那么都要加上。这就导致了 id 重复,在某些情况下会带来一定的麻烦。
3、JavaScript
$(function(){ $('.tabs').tabulous({ effect: 'scale' }); });
配置
tabulous.js 只有 1 个参数 —— effect,即定义过度效果。
参数/方法 | 类型 | 默认值 | 说明 |
---|---|---|---|
effect | 字符串 | scale | 过度效果,可选 scale / slideLeft / scaleUp / flip |
tabulous.js 主页://git.aaronlumsden.com/tabulous.js/
github 地址:https://github.com/aarondo/tabulous.js