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/ (右下角为运行结果)
本文示例源代码或素材下载



相关阅读:
从屏幕右下角自动上升的窗口的Javascript实现
Tomcat IIS HowTo:将Tomcat装入IIS全攻略
提升PHP执行速度全攻略
css 二级菜单 实现代码集合 修正版
对比SQL中简单嵌套查询与非嵌套查询的异同
使用VS2010的Database项目模板统一管理数据库对象
CSS教程:复合型条状图表
CSS设置滚动条颜色
JS宝典学习笔记(下)
在Ubuntu上安装php-ffmpeg
服务器不支持mysql数据库
将层叠样式单放在何处
检查网络信息的bat[批处理]文件
asp.net URL编码与解码
快速导航

Copyright © 2016 phpStudy |