JQuery 制作的选项卡改进版之改进版
2010-04-01 00:00:00 来源:WEB开发网 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻鐔兼⒒鐎靛壊妲紒鐐劤缂嶅﹪寮婚悢鍏尖拻閻庨潧澹婂Σ顔剧磼閻愵剙鍔ょ紓宥咃躬瀵鎮㈤崗灏栨嫽闁诲酣娼ф竟濠偽i鍓х<闁绘劦鍓欓崝銈囩磽瀹ュ拑韬€殿喖顭烽幃銏ゅ礂鐏忔牗瀚介梺璇查叄濞佳勭珶婵犲伣锝夘敊閸撗咃紲闂佽鍨庨崘锝嗗瘱闂備胶顢婂▍鏇㈠箲閸ヮ剙鐏抽柡鍐ㄧ墕缁€鍐┿亜韫囧海顦﹀ù婊堢畺閺屻劌鈹戦崱娆忓毈缂備降鍔庣划顖炲Φ閸曨垰绠抽悗锝庝簽娴犻箖姊洪棃娑欐悙閻庢矮鍗抽悰顕€宕堕澶嬫櫖濠殿噯绲剧€笛囧箲閸ヮ剙钃熼柣鏂挎憸閻熷綊鏌涢…鎴濇灈妞ゎ剙鐗嗛—鍐Χ鎼粹€茬凹缂備緡鍠楅幐鎼佹偩閻戣棄纭€闁绘劕绉靛Λ鍐春閳ь剚銇勯幒鎴濐伀鐎规挷绀侀埞鎴︽偐閹绘帩浼€缂佹儳褰炵划娆撳蓟濞戞矮娌柟瑙勫姇椤ユ繈姊洪柅鐐茶嫰婢т即鏌熼搹顐e磳闁挎繄鍋涢埞鎴犫偓锝庘偓顓涙櫊閺屽秵娼幏灞藉帯闂佹眹鍊曢幊鎰閹惧瓨濯撮柛鎾村絻閸撳崬顪冮妶鍡楃仸闁荤啿鏅涢悾鐑藉Ψ瑜夐崑鎾绘晲鎼粹剝鐏嶉梺缁樻尰濞叉﹢濡甸崟顖氱疀闂傚牊绋愮花鑲╃磽娴h棄鐓愭慨妯稿妿濡叉劙骞樼拠鑼槰闂佸啿鎼崐濠毸囬弶搴撴斀妞ゆ梻銆嬪銉︺亜椤撶偛妲婚柣锝囧厴楠炴帡骞嬮弮鈧悗濠氭⒑鐟欏嫭鍎楅柛妯衡偓鐔插徍濠电姷鏁告慨鐑藉极閸涘﹥鍙忔い鎾卞灩绾惧鏌熼崜褏甯涢柍閿嬪灦閵囧嫰骞掗崱妞惧缂傚倷绀侀ˇ閬嶅极婵犳氨宓侀柛鈩冪⊕閸婄兘鏌涘┑鍡楊伀妞ゆ梹鍔曢埞鎴︽倻閸モ晝校闂佸憡鎸婚悷锔界┍婵犲洦鍤冮柍鍝勫暟閿涙粓姊鸿ぐ鎺戜喊闁告瑥楠搁埢鎾斥堪閸喓鍘搁柣蹇曞仧绾爼宕戦幘璇茬疀濞达絽鎲¢崐顖炴⒑绾懎浜归悶娑栧劦閸┾偓妞ゆ帒鍟惃娲煛娴e湱澧柍瑙勫灴閹瑩寮堕幋鐘辨闂備礁婀辨灙闁硅姤绮庨崚鎺楀籍閸喎浠虹紓浣割儓椤曟娊鏁冮崒娑氬幈闂佸搫娲㈤崝宀勬倶閻樼粯鐓曢柟鑸妼娴滄儳鈹戦敍鍕杭闁稿﹥鐗犲畷婵嬫晝閳ь剟鈥﹂崸妤€鐒垫い鎺嶈兌缁犲墽鈧厜鍋撳┑鐘辩窔閸嬫鈹戦纭烽練婵炲拑绲垮Σ鎰板箳閹冲磭鍠撻幏鐘绘嚑閼稿灚姣愰梻鍌氬€烽懗鑸电仚濠电偛顕崗妯侯嚕椤愩倖瀚氱€瑰壊鍠栧▓銊︾節閻㈤潧校缁炬澘绉瑰鏌ュ箵閹烘繄鍞甸柣鐘烘鐏忋劌顔忛妷褉鍋撶憴鍕碍婵☆偅绻傞~蹇涙惞閸︻厾锛滃┑鈽嗗灠閹碱偊锝炲鍥╃=濞达綁顥撻崝宥夋煙缁嬪灝鏆遍柣锝囧厴楠炲鏁冮埀顒傜不婵犳碍鍋i柛銉戝啰楠囬悗瑙勬尭缁夋挳鈥旈崘顔嘉ч柛鈩兠棄宥囩磽娴e壊鍎愰柛銊ュ缁顓兼径瀣偓閿嬨亜閹哄秶顦︾€殿喖鐏濋埞鎴﹀煡閸℃浠梺鍛婎焼閸曨収娲告俊銈忕到閸燁垶宕愰崹顐e弿婵☆垳鍘ф禍楣冩倵濮樼偓瀚�

介绍的是基于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
- ››jquery .ajax方法 异步表单,接收服务器返回的数据...
- ››jquery 添加\删除 cookie
- ››jquery 正则表达式判断是否为正确邮箱格式
- ››jQuery EasyUI 数字框(NumberBox)用法
- ››JQuery中对option的添加、删除、取值
- ››JQuery实现下拉,单选,复选三大控件方法,
- ››jquery实现判断输入文字个数的代码
- ››jQuery bxCarousel实现图片滚动切换效果
- ››jQuery弹性滑动导航菜单
- ››jquery实现全选反选功能
- ››jQuery 屏蔽单个元素使用户无法点击
- ››jquery做复选框的全选、全部选、反选更加简单
更多精彩
赞助商链接