jquery tabs 插件

原创
2014/09/29 12:24
阅读数 6
 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" // 设置鼠标事件,默认为鼠标悬停
    });
});


展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部