您的位置:首页 > Web前端 > JQuery

jQuery tab plugin

2016-03-15 07:49 711 查看
/*
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);


  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: