首页 > Web开发 > 详细

jQuery tab plugin

时间:2016-03-15 08:35:56      阅读:258      评论:0      收藏:0      [点我收藏+]
/*
www.keleyi.com/
*/
; (function ($) {
    $.fn.extend({
        Tabs: function (options) {
            // 处理参数
            options = $.extend({
                event: ‘mouseover‘,
                timeout: 0,
                auto: 0,
                callback: null
            }, options);

            var self = $(this),
                tabBox = self.children(‘div.tab_box‘).children(‘div‘),
                menu = self.children(‘ul.tab_menu‘),
                items = menu.find(‘li‘),
                timer;

            var tabHandle = function (elem) {
                elem.siblings(‘li‘).removeClass(‘current‘).end().addClass(‘current‘);

                tabBox.siblings(‘div‘).addClass(‘hide‘).end().eq(elem.index()).removeClass(‘hide‘);
            },

            delay = function (elem, time) {
                time ? setTimeout(function () { tabHandle(elem); }, time) : tabHandle(elem);
            },

            start = function () {
                if (!options.auto) return;
                timer = setInterval(autoRun, options.auto);
            },

            autoRun = function () {
                var current = menu.find(‘li.current‘),
                firstItem = items.eq(0),
                // li的长度
                len = items.length,

                // 当前元素的索引(0 +1)
                index = current.index() + 1,
               
                // item 就是当前元素 li
                item = index === len ? firstItem : current.next(‘li‘),

                // 当前元素的索引
                i = index === len ? 0 : index;
                current.removeClass(‘current‘);
                item.addClass(‘current‘);

                tabBox.siblings(‘div‘).addClass(‘hide‘).end().eq(i).removeClass(‘hide‘);
                console.log(i);
            };

            //items.bind(options.event, function () {
            //    delay($(this), options.timeout);
            //    if (options.callback) {
            //        options.callback(self);
            //    }
            //});

            if (options.auto) {
                start();
                self.hover(function () {
                    clearInterval(timer);
                    timer = undefined;
                }, function () {
                    start();
                });
            }

            return this;
        }
    });
})(jQuery);

  

jQuery tab plugin

原文:http://www.cnblogs.com/zsongs/p/5277930.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!