/*
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的更多相关文章

  1. (转)jQuery Validation Plugin客户端表单证验插件

    jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...

  2. 给大家分享一个jQuery TAB插件演示

    jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...

  3. 简单的jquery tab

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jquery tab 插件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jquery tab

    jquery tab <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  6. 30个非常流行的提示信息插件(jQuery Tooltip Plugin)

    在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...

  7. JQuery多媒体插件jQuery Media Plugin使用详解

    malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...

  8. jQuery DataTables Plugin Meets C#

    Over the weekend, I was doing some work on the internal CMS we use over at eagleenvision.net and I w ...

  9. 20 个最棒的 jQuery Tab 插件

    jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件.Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 ...

随机推荐

  1. WebDriver 页面等待

    selenium2.4.0版本提供了页面等待处理. 显示等待元素可见: protected void WaitElementVisible(By by,int timeOutInSeconds, lo ...

  2. semantic-ui dropdown is not a function

    按照semantic-ui官网示例,编写了如下示例,却不见效果. <div class="ui secondary menu"> <a class="i ...

  3. java 内部类3(匿名内部类)

    匿名内部类: 1.没有类名的类就叫匿名内部类 2.好处:简化书写. 3.使用前提:必须有继承或实现关系......不要想着你自己没有钱你没可是你爸有 4.一般用于于实参.(重点) class Oute ...

  4. java视频格式转换代码

    http://blog.163.com/zzf_fly/blog/static/20958915820127217443816/ package com.gkzx.online.action; imp ...

  5. eclipse 中发布 maven 项目到 tomcat

    第一步:在 eclipse 中 右键  你的项目 Run as --> Maven build...--> Goals: 输入 install   run 第二步:在 eclipse 中 ...

  6. window2012 64bit 安装sqlserver2012 64bit调用excel的驱动安装

    如果电脑已经安装了32bit的office那么可以使用 管理员权限打开cmd,然会执行以下命令 AccessDatabaseEngine_X64.exe /passive

  7. 5.5 Selenium2中的元素定位

    WebDriver的更加面向对象的方式大大降低了Selenium的入门门槛,对Web元素的操作也非常之简单易学.实际项目用起来,工作量最大的部分就是你如何解析定位到你的目标项目页面中的各种元素.好比你 ...

  8. 简单的百度贴吧爬虫实现(urllib)

    环境:ubuntu 16.04 LTS   (X86-64),pycharm python版本 :3.5.1+ #生成的文件默认会保存到代码所在根目录 1 import urllib.request, ...

  9. (28)odoo中css可用颜色对照表

    颜色 颜色英文代码 形像颜色 HEX格式 RGB格式 LightPink 浅粉红 #FFB6C1 255,182,193 Pink 粉红 #FFC0CB 255,192,203 Crimson 猩红 ...

  10. SAP 预制发票时扣除已预制的数据

    INCLUDE程序: LMR1MF6S 最后增强: ENHANCEMENT ZMIR7_01. "active version DATA:LS_YDRSEG LIKE LINE OF YDR ...