jQuery tab plugin
/*
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的更多相关文章
- (转)jQuery Validation Plugin客户端表单证验插件
jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...
- 给大家分享一个jQuery TAB插件演示
jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...
- 简单的jquery tab
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery tab 插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery tab
jquery tab <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- 30个非常流行的提示信息插件(jQuery Tooltip Plugin)
在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...
- JQuery多媒体插件jQuery Media Plugin使用详解
malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...
- 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 ...
- 20 个最棒的 jQuery Tab 插件
jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件.Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 ...
随机推荐
- Unity5.3官方VR教程-系列1
如果你不是VR游戏或应用的开发者,可以选择无视下面的内容,这不是给普通用户看的~ 如果你之前曾经为Oculus Rift DK2或者Gear VR开发过,那么心里面一定曾经有千万个草泥马来回奔跑过.虽 ...
- JSONObject和JSONArray使用
1.所依赖JAR包 要使程序可以运行必须引入JSON-lib包,JSON-lib包同时依赖于以下的JAR包: commons-lang.jar commons-beanutils.jar common ...
- VBA中find的一些使用方法
用excel处理数据的时候,无论是使用VBA还是函数,查找和引用都是两大主要的工作,VBA中的find系列的方法(find.findnext.Range.FindPrevious)返回range对象, ...
- [sso] 单点登录认证流程
一.流程说明 第一步:访问cas过滤链接ssoLogin,拼凑定向到 CAS_SERVER 获取ticket的URL 第二步:CAS_SERVER校验用户信息,生成Ticket 第三步:重新定向到访问 ...
- python实现微信打飞机游戏
环境:Ubuntu 16.04 LTS Python 2.7.11 + Pygame + Pycharm 代码: # -*- coding: UTF-8 -*- import pygame, ran ...
- 有关Rander生成随机数的问题
首先我们说的是要生成一个随机数要求传入两个参数.一个表示生成的个数,另外一个表示生成的长度 . public void shengchengsuijishu(int lenght) { '}; Ran ...
- matlab(数组、矩阵)
- IE9中Media queries在iframe无效的解决方法
在css中有5个media querie @media screen and(min-width:0px)and(max-width:319px){ body {background-color:re ...
- 转python编码问题
python的编码问题 http://blog.csdn.net/fuadam/article/details/5547504 分类: .net以外的东东 2010-04-30 21:16 747人阅 ...
- xll
http://www.aiuxian.com/article/p-2027873.html