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);
相关文章推荐
- jquery插件-表单提交插件-jQuery.Form
- jQuery性能优化
- 基于jquery实现百度新闻导航菜单滑动动画
- Tab选项卡交互示例1
- jQuery之input
- JQuery中ajax的相关方法
- JQuery中的工具函数总结
- 模拟Jquery选择器
- Jquery的样式切换
- 01.阅读JQUERY源码——定义函数
- jQuery 关于 end() 方法的详细解释
- 00.阅读JQUERY源码——简目录
- Jquery页面滚动
- jQuery 中 children() 与 find() 用法的区别
- Jquery动态绑定事件
- jQuery省市区三级联动插件
- jquerymobile动态添加元素之后
- Jquery validate配置项
- jQuery resize() 和 scroll() 的优化
- 【深入浅出jQuery】源码浅析--整体架构