JQuery Tab选项卡效果代码改进版

2016-02-19 13:18 26 1 收藏

下面请跟着图老师小编一起来了解下JQuery Tab选项卡效果代码改进版,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

【 tulaoshi.com - Web开发 】

介绍的是基于JQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离。在实际应用过程中,只 要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。
在这里,我又做了部分的修改,增加了选项卡可自动切换功能,以及选项卡点击相应还是鼠标放上后相应的参数,同时依然支持多次调用。
现在,我把代码贴上,与众博友共享
这是js脚本

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

代码如下:


/* jquery-fn-accordion v0
* Based on jQuery JavaScript Library v3
* http://jquery.com/
*
* The author of the following code: miqi2214 , wbpbest
* Blog:eycbest.cnblogs.com , miqi2214.cnblogs.com
* Date: 2010-3-10
*/
//注意:如果调试出错,请检查您引用的jquery版本号,当前引用版本为1.3
//参数说明:
//tabList:包裹选项卡的父级层
//tabTxt :包裹内容层的父级层
//options.currentTab:激活选项卡的序列号
//options.defaultClass:当前选项卡激活状态样式名,默认名字为“current”
//isAutoPlay:是否自动切换
//stepTime:切换间隔时间
//switchingMode:切换方式('c'表示click切换;'o'表示mouseover切换)
//调用方式 如本页最下方代码
$.fn.tabs = function(tabList, tabTxt, options) {
var _tabList = $(this).find(tabList);
var _tabTxt = $(this).find(tabTxt);
//为了简化操作,强制规定选项卡必须用li标签实现
var tabListLi = _tabList.find("li");
var defaults = { currentTab: 0, defaultClass: "current", isAutoPlay: false, stepTime: 2000, switchingMode: "c" };
var o = $.extend({}, defaults, options);
var _isAutoPlay = o.isAutoPlay;
var _stepTime = o.stepTime;
var _switchingMode = o.switchingMode;
_tabList.find("li:eq(" + o.currentTab + ")").addClass(o.defaultClass);
//强制规定内容层必须以div来实现
_tabTxt.children("div").each(function(i) {
$(this).attr("id", "wp_div" + i);
}).eq(o.currentTab).css({ "display": "block" });
tabListLi.each(
function(i) {
$(tabListLi[i]).mouseover(
function() {
if (_switchingMode == "o") {
$(this).click();
}
_isAutoPlay = false;
}
);
$(tabListLi[i]).mouseout(
function() {
_isAutoPlay = true;
}
)
}
);
_tabTxt.each(
function(i) {
$(_tabTxt[i]).mouseover(
function() {
_isAutoPlay = false;
}
);
$(_tabTxt[i]).mouseout(
function() {
_isAutoPlay = true;
}
)
});
// }
// else {
tabListLi.each(
function(i) {
$(tabListLi[i]).click(
function() {
if ($(this).className != o.defaultClass) {
$(this).addClass(o.defaultClass).siblings().removeClass(o.defaultClass);
}
if ($.browser.msie) {
_tabTxt.children("div").eq(i).siblings().css({ "display": "none" });
_tabTxt.children("div").eq(i).fadeIn(600);
} else {
_tabTxt.children("div").eq(i).css({ "display": "block" }).siblings().css({ "display": "none" }); //标准样式
}
}
)
}
);
// }
function selectMe(oo) {
if (oo != null && oo.html() != null && _isAutoPlay) {
oo.click();
}
if (oo.html() == null) {
selectMe(_tabList.find("li").eq(0));
} else {
window.setTimeout(selectMe, _stepTime, oo.next());
}
}
if (_isAutoPlay) {
//alert("_isAutoPlay:" + _isAutoPlay);
selectMe(_tabList.find("li").eq(o.currentTab));
}
//alert(_isAutoPlay);
return this;
};
var userName = "wbpbest";
var __sti = setInterval;
window.setInterval = function(callback, timeout, param) {
var args = Array.prototype.slice.call(arguments, 2);
var _cb = function() {
callback.apply(null, args);
}
__sti(_cb, timeout);
}
//window.setInterval(hello,3000,userName);
var __sto = setTimeout;
window.setTimeout = function(callback, timeout, param) {
var args = Array.prototype.slice.call(arguments, 2);
var _cb = function() {
callback.apply(null, args);
}
__sto(_cb, timeout);
}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1603768.html

延伸阅读
标签: Web开发
head   meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /   titlejavascript模仿新浪的黄色选项卡效果/title   style type=”text/css”    *{font-size:12px;margin:0;padding:0;}    #dreamdujsexe{width:748px; height:250px; overflow:hidden; border:1px #cccbc9 solid; li...
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" <html lang="us-en" <head <title<a href="http://www.knowsky.com/article.asp?typeid=38"CSS</a选项卡(html组件)</title <link ...
标签: Web开发
其特点是扩展方便,只要自己添加标题和内容即可,自动初始化。 无标题文档 window.onload=resetTab; function getTabTitle(tab) { var childNodesList=tab.childNodes; var titleNodes=new Array(); var j=0; var i; for (i=0;i 选项卡[1] 选项卡[2] 选项卡[3] 选项卡[4] 1经过前述的多个步骤,一个基本的CHM文...
标签: windows
ie11无法新建选项卡怎么办呢?ie11选项卡要怎么设置呢?有朋友在新装win8.1之后,发现ie11无法新建选项卡,这该怎么办呢?下面就和小编一起去了解下ie11选项卡的设置方法吧。 有些用户在新装win8.1之后,发现IE无法新建选项卡,只要新建选项卡就出现如图1这样的报错,点取消就会关闭选项卡,点允许就会出现如图2这样的报错,下面就去看...
标签: 浏览器
IE8里如何打开新选项卡时自动切换到新选项卡   操作步骤: 在用 Internet Explorer 7 和 Internet Explorer 8 以及更新版本的IE时,我们把一个链接在新选项卡中打开,但总是希望直接切换到新选项卡,而不是停留在当前选项卡。这个怎么操作? 在 IE 里面,点开工具菜单 - 点 Internet 选项。(如果没有出现菜单栏,则按 ALT 键...

经验教程

58

收藏

27
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部