转载：JQuery制作的选项卡改进版

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>

10 </div>

11 <!-- 包裹内容层的父级层 -->

12 <div class="">

13 <!-- 具体的内容层 -->

14 <div class="">1.1</div>

15 <div class="">1.2</div>

16 <div class="">1.3</div>

17 </div>

18 </div>

19

样式代码就不放上来了，大家用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);

10

11 //强制规定内容层必须以div来实现

12 _tabTxt.children("div").each(function(i){

13 j(this).attr("id","div"+i);

14 }).eq(o.currentTab).css({"display":"block"});

15

16 tabListLi.each(

17 function(i){

18 j(tabListLi[i]).click(

19 function(){

20 if(j(this).className != o.defaultClass)

21 {

22 j(this).addClass(o.defaultClass).siblings().removeClass(o.defaultClass);

23 }

24 _tabTxt.children("div").eq(i).css({"display":"block"}).siblings().css({"display":"none"});

25 }

26 )

27 }

28 );

29 return this;

30 };

最后是调用：

1 j(document).ready(function(){

2 j("#ex01").tabs(".ContactMenu",".ContactBox",{currentTab:0});

3 j("#ex01").find(".exContent2").tabs(".ContactMenu2",".ContactBox2",{currentTab:0});

4

5 j("#ex02").tabs(".ContactMenu",".ContactBox",{currentTab:1});

6 j("#ex02").find(".exContent2").tabs(".ContactMenu2",".ContactBox2",{currentTab:1});

7 });

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



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