jquery tabs 插件

 jQuery Plugins Code:(function ($) {
    // 插件名稱 tab
    $.fn.tab = function (options) {
        // 默認值初始化
        var defaults = {
            // 默認起始選項
            index: 0,
            // 默認延遲時間
            delay: 100,
            // 默認鼠標懸停
            act: ''
        };
        // 合併 defaults 和 options 修改並返回 defaults
        var set = $.extend(defaults, options);
        // this 指經過當前選擇器獲取的 jQuery 對象
        // 選項卡標籤
        var tag = $('ul.tags > li', this);
        // 選項卡內容
        var pane = $('div.panes > div', this);
 
        /* tagcur */
        var tagcur = $('div.tagsline > div', this);
        tagcur.width(tag.eq(set.index).width());
        tagcur.css('left', tag.eq(set.index).position().left);
        /* end */
 
        // 默認添加起始元素類名
        tag.eq(set.index).addClass('cur');
        // 默認顯示起始元素隱藏同輩元素
        pane.eq(set.index).show().siblings().hide();
 
        // 選項卡切換函數
        function fnTab(obj) {
 
            /* tagcur */
            tagcur.animate({
                width: obj.width(),
                left: obj.position().left
            }, 200);
            /* end */
 
            // 添加當前元素類名刪除同輩元素類名
            obj.addClass('cur').siblings().removeClass('cur');
            // 顯示當前元素隱藏同輩元素
            pane.eq(obj.index()).show().siblings().hide();
        };
 
        // 判斷鼠標單擊事件
        if (set.act == 'click') {
            // 鼠標單擊事件
            tag.click(function (e) {
                var this_tag = $(this);
                // 調用選項卡切換函數
                fnTab(this_tag);
                return false;
            });
        } else {
            var hoverTimer;
            // 鼠標懸停事件
            tag.hover(function (e) {
                var this_tag = $(this);
                // 指定毫秒數後調用選項卡切換函數
                hoverTimer = setTimeout(function (e) {
                    fnTab(this_tag);
                },
                set.delay);
            }, function (e) {
                // 取消延遲執行選項卡切換函數
                clearTimeout(hoverTimer);
            });
        }
    }
})(jQuery);

jQuery Code:$(function ($) {
    $("#tab").tab({
        index: 1,
        // 設置起始選項,默認爲第一項
        delay: 200,
        // 設置延遲時間,默認爲延遲 100 毫秒
        act: "click" // 設置鼠標事件,默認爲鼠標懸停
    });
});
相關文章
相關標籤/搜索