JQuery制作的选项卡改进版

记得去年刚开始在博客园写日志第一篇文章就是关于选项卡的，题目叫《JQuery制作的选项卡，重点体现在JS与HTML的分离》。最近做项目的时候，再回头看这段代码感觉写得太零散，所有方法函数都是全局函数，没用整合成一个完整的方法。这样的后果就是不便于管理，代码拷贝的时候容易遗漏，而且方法写得太死，扩展性不好。所以趁着这次做新项目，把这个效果改进下封装成一个完整的方法。

演示地址：http://www.myliwu.com/xzwBlog/tab/Tab.html

老规矩，首先分析Html（我一直认为良好的html结构是实现好程序的基石）

 1 <!-- 包裹选项卡的父级层 -->
 2 <div class="">
 3     <!-- 选项卡列表，ul外用一个宽度足够长的div包裹，做为遮罩层，让里面的ul列表在一行显示而不会折行 -->
 4     <div style="">
 5         <ul class="">
 6             <li><span>选项卡标签 1</span></li>
 7             <li><span>选项卡标签 2</span></li>
 8             <li><span>选项卡标签 3</span></li>
 9         </ul>
     </div>
     <!-- 包裹内容层的父级层 -->
     <div class="">
         <!-- 具体的内容层 -->
         <div class="">1.1</div>
         <div class="">1.2</div>
         <div class="">1.3</div>
     </div>
 </div>
 

样式代码就不放上来了，大家用firebug看效果更好。

接着是程序代码：

 1 j.fn.tabs = function(tabList,tabTxt,options){
 2     var _tabList = j(this).find(tabList);
 3     var _tabTxt = j(this).find(tabTxt);
 4     
 5     //为了简化操作，强制规定选项卡必须用li标签实现
 6     var tabListLi = _tabList.find("li");
 7     var defaults = {currentTab:0,defaultClass:"Current"};
 8     var o = j.extend({},defaults,options);
 9     _tabList.find("li:eq("+o.currentTab+")").addClass(o.defaultClass);
     
     //强制规定内容层必须以div来实现
     _tabTxt.children("div").each(function(i){
         j(this).attr("id","div"+i);                          
     }).eq(o.currentTab).css({"display":"block"});
     
     tabListLi.each(
         function(i){
             j(tabListLi[i]).click(
                 function(){
                     if(j(this).className != o.defaultClass)
                     {
                         j(this).addClass(o.defaultClass).siblings().removeClass(o.defaultClass);
                     }
                     _tabTxt.children("div").eq(i).css({"display":"block"}).siblings().css({"display":"none"});
                 }
             )
         }
     );
     return this;
 };

最后是调用：

 j(document).ready(function(){
     j("#ex01").tabs(".ContactMenu",".ContactBox",{currentTab:0});
     j("#ex01").find(".exContent2").tabs(".ContactMenu2",".ContactBox2",{currentTab:0});
     
     j("#ex02").tabs(".ContactMenu",".ContactBox",{currentTab:1});
     j("#ex02").find(".exContent2").tabs(".ContactMenu2",".ContactBox2",{currentTab:1});
 });

OK，搞定。代码实现方式都不难，有点jquery基础的一看就明白了。关键是如果没有业务需求，可能就不会促使我们去发现旧问题的不足，以及想新思路新方法来改进它。一句话：业务需求促进技术更新。

演示地址：http://www.myliwu.com/xzwBlog/tab/Tab.html