jQuery Tab選項卡插件tabulous.js

拉丁傳說 2018-4-13 1202

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="http://www.dowebok.com/">內容1</a></p>
        </div>
        <div id="tabs-2">
            <p><a href="http://www.dowebok.com/">內容2</a></p>
        </div>
        <div id="tabs-3">
            <p><a href="http://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

演 示 下 載

最新回復 (0)
返回
發新帖
下载麻将游戏四人麻将