JQuery 制作的选项卡改进版之改进版

介绍的是基于JQuery实现的一个选项卡效果，重点体现在HTML里没有内联事件处理程序，而是定义在js文件里，做到行为与结构的分离。在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。

　　在这里，我又做了部分的修改，增加了选项卡可自动切换功能，以及选项卡点击相应还是鼠标放上后相应的参数，同时依然支持多次调用。

　　现在，我把代码贴上，与众博友共享

　　这是js脚本

　　1　/*　jquery-fn-accordion　v0
　　2　*　Based　on　jQuery　JavaScript　Library　v3
　　3　*　http://jquery.com/
　　4　*
　　5　*　The　author　of　the　following　code:　miqi2214　,　wbpbest
　　6　*　Blog:eycbest.cnblogs.com　,　miqi2214.cnblogs.com
　　7　*　Date:　2010-3-10
　　8　　*/
　　9　//注意：如果调试出错，请检查您引用的jquery版本号，当前引用版本为1.3
　10　//参数说明：
　11　//tabList:包裹选项卡的父级层
　12　//tabTxt　:包裹内容层的父级层
　13　//options.currentTab:激活选项卡的序列号
　14　//options.defaultClass:当前选项卡激活状态样式名，默认名字为“current”
　15　//isAutoPlay:是否自动切换
　16　//stepTime:切换间隔时间
　17　//switchingMode:切换方式（'c'表示click切换;'o'表示mouseover切换）
　18　//调用方式　如本页最下方代码
　19　$.fn.tabs　=　function(tabList,　tabTxt,　options)　{
　20　　　　　var　_tabList　=　$(this).find(tabList);
　21　　　　　var　_tabTxt　=　$(this).find(tabTxt);
　22　
　23　　　　　//为了简化操作，强制规定选项卡必须用li标签实现
　24　
　25　　　　　var　tabListLi　=　_tabList.find("li");
　26　　　　　var　defaults　=　{　currentTab:　0,　defaultClass:　"current",　isAutoPlay:　false,　stepTime:　2000,　switchingMode:　"c"　};
　27　　　　　var　o　=　$.extend({},　defaults,　options);
　28　　　　　var　_isAutoPlay　=　o.isAutoPlay;
　29　　　　　var　_stepTime　=　o.stepTime;
　30　　　　　var　_switchingMode　=　o.switchingMode;
　31　　　　　_tabList.find("li:eq("　+　o.currentTab　+　")").addClass(o.defaultClass);
　32　
　33　　　　　//强制规定内容层必须以div来实现
　34　　　　　_tabTxt.children("div").each(function(i)　{
　35　　　　　　　　　$(this).attr("id",　"wp_div"　+　i);
　36　　　　　}).eq(o.currentTab).css({　"display":　"block"　});
　37　
　38　
　39　　　　　tabListLi.each(
　40　　　　　　　　　function(i)　{
　41　　　　　　　　　　　　　$(tabListLi[i]).mouseover(
　42　　　　　　　　　　　　　　　　　function()　{
　43　　　　　　　　　　　　　　　　　　　　　if　(_switchingMode　==　"o")　{
　44　　　　　　　　　　　　　　　　　　　　　　　　　$(this).click();
　45　　　　　　　　　　　　　　　　　　　　　}
　46　　　　　　　　　　　　　　　　　　　　　_isAutoPlay　=　false;
　47　　　　　　　　　　　　　　　　　}
　48　　　　　　　　　　　　　);
　49　　　　　　　　　　　　　$(tabListLi[i]).mouseout(
　50　　　　　　　　　　　　　　　　　function()　{
　51　　　　　　　　　　　　　　　　　　　　　_isAutoPlay　=　true;
　52　　　　　　　　　　　　　　　　　}
　53　　　　　　　　　　　　　)
　54　　　　　　　　　}
　55　　　　　);
　56　
　57　　　　　_tabTxt.each(
　58　　　　　　　　　function(i)　{
　59　　　　　　　　　　　　　$(_tabTxt[i]).mouseover(
　60　　　　　　　　　　　　　　　　　function()　{
　61　　　　　　　　　　　　　　　　　　　　　_isAutoPlay　=　false;
　62　　　　　　　　　　　　　　　　　}
　63　　　　　　　　　　　　　);
　64　　　　　　　　　　　　　$(_tabTxt[i]).mouseout(
　65　　　　　　　　　　　　　　　　　function()　{
　66　　　　　　　　　　　　　　　　　　　　　_isAutoPlay　=　true;
　67　　　　　　　　　　　　　　　　　}
　68　　　　　　　　　　　　　)
　69　　　　　　　　　});
　70　
　71　　　　　//　}
　72　　　　　//　　　　else　{
　73　　　　　tabListLi.each(
　74　　　　　　　　　function(i)　{
　75　　　　　　　　　　　　　$(tabListLi[i]).click(
　76　　　　　　　　　　　　　　　　　function()　{
　77　　　　　　　　　　　　　　　　　　　　　if　($(this).className　!=　o.defaultClass)　{
　78　　　　　　　　　　　　　　　　　　　　　　　　　$(this).addClass(o.defaultClass).siblings().removeClass(o.defaultClass);
　79　　　　　　　　　　　　　　　　　　　　　}
　80　　　　　　　　　　　　　　　　　　　　　if　($.browser.msie)　{
　81　　　　　　　　　　　　　　　　　　　　　　　　　_tabTxt.children("div").eq(i).siblings().css({　"display":　"none"　});
　82　　　　　　　　　　　　　　　　　　　　　　　　　_tabTxt.children("div").eq(i).fadeIn(600);
　83　　　　　　　　　　　　　　　　　　　　　}　else　{
　84　　　　　　　　　　　　　　　　　　　　　　　　　_tabTxt.children("div").eq(i).css({　"display":　"block"　}).siblings().css({　"display":　"none"　});　//标准样式
　85　　　　　　　　　　　　　　　　　　　　　}
　86　
　87　
　88　　　　　　　　　　　　　　　　　}
　89　　　　　　　　　　　　　)
　90　　　　　　　　　}
　91　　　　　);
　92　
　93　　　　　//　}
　94　　　　　function　selectMe(oo)　{
　95　
　96　　　　　　　　　if　(oo　!=　null　&&　oo.html()　!=　null　&&　_isAutoPlay)　{
　97　　　　　　　　　　　　　oo.click();
　98　　　　　　　　　}
　99　　　　　　　　　if　(oo.html()　==　null)　{
100　　　　　　　　　　　　　selectMe(_tabList.find("li").eq(0));
101　
102　　　　　　　　　}　else　{
103　　　　　　　　　　　　　window.setTimeout(selectMe,　_stepTime,　oo.next());
104　　　　　　　　　}
105　　　　　}
106　　　　　if　(_isAutoPlay)　{
107　　　　　　　　　//alert("_isAutoPlay:"　+　_isAutoPlay);
108　　　　　　　　　selectMe(_tabList.find("li").eq(o.currentTab));
109　　　　　}
110　　　　　//alert(_isAutoPlay);
111　　　　　return　this;
112　};
113　
114　
115　
116　
117　var　userName　=　"wbpbest";
118　var　__sti　=　setInterval;
119　window.setInterval　=　function(callback,　timeout,　param)　{
120　　　　　var　args　=　Array.prototype.slice.call(arguments,　2);
121　　　　　var　_cb　=　function()　{
122　　　　　　　　　callback.apply(null,　args);
123　　　　　}
124　　　　　__sti(_cb,　timeout);
125　}
126　//window.setInterval(hello,3000,userName);
127　
128　var　__sto　=　setTimeout;
129　window.setTimeout　=　function(callback,　timeout,　param)　{
130　　　　　var　args　=　Array.prototype.slice.call(arguments,　2);
131　　　　　var　_cb　=　function()　{
132　　　　　　　　　callback.apply(null,　args);
133　　　　　}
134　　　　　__sto(_cb,　timeout);
135　}
136　
137　
138　
139　

预览地址：http://jsfiddle.net/EbpUt/ (右下角为运行结果)
本文示例源代码或素材下载