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 是一个可定制的 ...
随机推荐
- 实战微信JS SDK开发:贺卡制作与播放(1)
前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...
- Form1和Form2的交互
比如在第二个窗体中操作第一个窗体中的TreeView,动态添加节点和子节点. ------回答--------- ------其他回答(20分)--------- 尽量不要这样做.控件,窗体,你在.n ...
- css3 translate属性
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动):translateX(x)仅水平方向移动(X轴移动):translateY(Y)仅垂直方向移动(Y轴移动)默认都是从 ...
- Qt之资源系统
简述 Qt 的资源系统用于存储应用程序的可执行二进制文件,它采用平台无关的机制.当你的程序总需要这样的一系列文件(图标.翻译文件等)并且不想冒丢失某些文件的风险时,这就显得十分有用. 资源系统基于 q ...
- 190. Reverse Bits -- 按位反转
Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (represented in ...
- java.util 类 TreeSet<E>
java.lang.Object≥ java.util.AbstractCollection<E> ≥ java.util.AbstractSet<E> ≥ java.util ...
- ODBC错误处理
ODBC 中的错误处理 ODBC 中的错误是使用来自每个 ODBC 函数调用的返回值和 SQLError 函数或 SQLGetDiagRec 函数的返回值进行报告的.SQLError 函数用于 ODB ...
- SSH由WAS/Tomcat/Weblogic迁移到JBOSS
又是一个凌晨,又一次搞项目在新的中间件上的可部署性验证... 原来将项目部署到was7上,花了三个晚上到凌晨1点多的时间,总结出了只要将common-logging和wodenxx.jar两个jar包 ...
- js模拟快捷键操作表单
<html> <head> </head> <body> <script> //键盘快捷键提交表单ctrl+s document.onkey ...
- winform开发中绑定combox到枚举
开发中需要根据下拉框的选择处理一些业务逻辑,使用ID值或Text值都不利于代码维护,所以可以写个扩展方法绑定到枚举上. public static class Extensions { /// < ...