jQuery封装Tab自动切换功能的实现与源码解析

jQuery Tab自动切换功能实现概述

鉴于当前网络环境较为缓慢，加载网页需要较长时间，但我仍决定撰写这篇关于Tab自动切换的文章。此类功能在工作场景中十分常见，通过博客记录不仅有助于个人总结，也能方便日后遇到类似需求时参考。本方案基于jQuery进行封装，支持在页面中多次调用，具体调用方式为 new tabSlider(obj, count)，其中obj代表最外层容器的ID，count表示包含的li元素数量。需要注意的是，使用该JS库必须严格遵循其规定的HTML结构。以下是示例HTML结构：

<div id="tab1">
<ul class="menu">
<li class="current">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li class="last-col">tab4</li>
</ul>
<div class="content-main">
<div class="content">tab1</div>
<div class="content hide">tab2</div>
<div class="content hide">tab3</div>
<div class="content hide">tab4</div>
</div>
</div>

上述即为所需的基础结构。接下来展示页面上的HTML与CSS代码实现：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style>
#tab1{ width:196px; height:220px; overflow:hidden; border:1px solid #666;}
#tab2{ width:196px; height:220px; overflow:hidden; border:1px solid #666;}
.menu{ width:196px; height:18px; margin:0; padding:0;}
.menu li{ float:left; list-style:none; width:48px; text-align:center; border-bottom:1px solid #666; border-right:1px solid #666; cursor:pointer;}
.menu li.current{ border-bottom:none;}
.content-main{ width:196px; height:200px; overflow:hidden;}
.content{ width:196px; height:200px; overflow:hidden; display:block;}
.hide{ display:none;width:196px; height:200px; overflow:hidden;}
.menu li.last-col{ border-right:none; width:49px;}
</style>
<script src="AutoTab.js"></script>
</head>
<body>
<div id="tab1">
<ul class="menu">
<li class="current">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li class="last-col">tab4</li>
</ul>
<div class="content-main">
<div class="content">tab1</div>
<div class="hide">tab2</div>
<div class="hide">tab3</div>
<div class="hide">tab4</div>
</div>
</div>
<br /><br />
<div id="tab2">
<ul class="menu">
<li class="current">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li class="last-col">tab4</li>
</ul>
<div class="content-main">
<div class="content">tab1</div>
<div class="hide">tab2</div>
<div class="hide">tab3</div>
<div class="hide">tab4</div>
</div>
</div>
<script>new tabSlider("#tab1",4);</script>
<script>new tabSlider("#tab2",4);</script>
</body>
</html>

核心JavaScript代码与封装逻辑解析

以下是核心JavaScript代码实现：

// JavaScript Document
    /* 
*@date 2011 10 24
*@ author tugenhua
*@ email tugenhua@126.com
*@ 可以一个页面多次引用
依赖的结构 */
<div id="tab1">
<ul class="menu">
<li class="current">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li class="last-col">tab4</li>
</ul>
<div class="content-main">
<div class="content">tab1</div>
<div class="content hide">tab2</div>
<div class="content hide">tab3</div>
<div class="content hide">tab4</div>
</div>
</div>
/*页面引用的方式
new tabSlider("#tab1",4);
#tab1 是外部ID,4 指 一共有多少个li
*/
function tabSlider(obj,count){
var _this = this;
_this.obj = obj;
_this.count = count;
_this.time = 2000;//停留的时间
_this.n = 0;
var t;
this.slider = function(){
$(_this.obj + " .menu li").bind("mouseover",function(event){
$(event.target).addClass("current").siblings().removeClass("current");
var index = $(_this.obj + " .menu li").index(this);
$(_this.obj + " .content-main .content").eq(index).show().siblings().hide();
_this.n = index;
            })   
        } 
this.addhover = function(){
$(_this.obj).hover(function(){clearInterval(t);},function(){t=setInterval(_this.autoplay,_this.time)});
        } 
this.autoplay = function(){
_this.n = _this.n >=(_this.count-1)? 0 : ++_this.n;
$(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");
        }    
this.factory = function(){
this.slider();
this.addhover();
t = setInterval(this.autoplay,_this.time);
        } 
this.factory();
} 

接下来阐述封装该JS模块的设计思路。编写程序时，清晰的逻辑至关重要，这通常被称为“算法”。若思路清晰，代码实现便水到渠成。具体步骤如下：

1. 定义函数 tabSlider(obj, count) 接收参数，在HTML页面中直接调用此函数即可实现功能。

2. 初始化参数，并为函数自定义 this.slider = function(){} 方法，绑定 mouseover 事件。初始化第一个 li 时，检查当前 div 内容是否与当前 li 指向同一索引，若一致则显示该部分内容，其余隐藏。

3. 自定义 this.addHover 事件，当鼠标移入容器时触发。

4. 定义自动播放事件 this.autoplay = function(){}，内部使用 trigger 方法触发 mouseover 事件。逻辑为 _this.n = _this.n >=(_this.count-1)? 0 : ++_this.n; 以及 $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");

$(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");

5. 最后通过 factory 函数渲染并调用上述所有子函数，完成初始化。

this.factory = function(){
this.slider();
this.addhover();
t = setInterval(this.autoplay,_this.time);
  }
this.factory();