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 是一个可定制的 ...
随机推荐
- EL表达式 (详解)(转)
EL表达式 1.EL简介 1)语法结构 ${expression} 2)[]与.运算符 EL 提供.和[]两种运算符来存取数据. 当要存取的属性名称中包含一 ...
- 【转】 C++ vector用法
在c++中,vector是一个十分有用的容器,下面对这个容器做一下总结. 1 基本操作 (1)头文件#include<vector>. (2)创建vector对象,vector<in ...
- js--题目二
//如何获取下面代码所有元素. <form> <input name="" type="text" /> <input name= ...
- 第四周 课堂Scrum站立会议
项目名称:连连看游戏(C#) 小组名称:4Boys 小组成员:武志远.李权.张金生.张政 站立会议内容 昨天完成的: 1.完成了游戏界面 2.做查阅关于技术方面的资料并且发布博客 3.发布项目的进度p ...
- HDU-----(1083)Courses(最大匹配)
Courses Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total S ...
- Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
转载 http://www.cnblogs.com/jikey/archive/2012/08/31/2665880.html <!DOCTYPE html PUBLIC "-//W3 ...
- web页面动态加载UserControl,并调用用户控件中的方法来初始化控件
1,HTML页 头部注册: <%@ Register Src="~/WorkLog/WorkLogNewV1/UserControl/CeShiBu.ascx" TagPre ...
- 在Handler.ashx文件中使用session
使用jquery调用handler文件中的方法,需要使用session,默认生成的文件中,不可以直接使用session.按照以下步骤,即可以通过session与其他的aspx页面的session进行数 ...
- DWR框架简单应用
各种Dwr简介不需要多说,知道是实现局部刷新就差不多了,至于实现原理,慢慢参透吧,一下说明怎么使用DWR 首先建一个web工程,然后添加如下jar包:
- Wcf Client 异常和关闭的通用处理方法
在项目中采用wcf通讯,客户端很多地方调用服务,需要统一的处理超时和通讯异常以及关闭连接. 1.调用尝试和异常捕获 首先,项目中添加一个通用类ServiceDelegate.cs public del ...