今天没有看书，而是做了些小练习和试验。由于答应了公司的项目经理要做一个jquery的tab标签插件，而上班时间一直没空，拖了很久，所以今晚在家里试试。

 

要求如下：

1. 根据输入的数据（暂定json格式），显示N个tab（类似选项卡），N可设定，若不设置，则显示全部数据。

2. 可设定tab集合的容器的宽度，隐藏会超出容器宽度的tab

3. 提供“更多”功能，将没有显示的tab列出来，显示在另一个弹出层中。

4. 可将"更多“中的tab和已显示的tab交换，即可设置显示哪些tab，但显示的总数不能超过N。

 

今晚我只做了初步的试验：根据数据显示，且显示的数量小于N时且不超出容器宽度。

结果发现要比我想象中的简单，我用了ul和li来表示tab，容器是div。给div设置固定的height，和overflow:none属性。

ul设置了float:left属性，再加上简单的js，就实现了第一个需求。

 

现在要解决的第二个问题是：如果知道因超出容器宽度而被隐藏的tab。因为这个在显示”更多“tab时需要用到。

 

由于div有固定的width，那些超出宽度的tab其实只是换行了，显示在第一行之下而已，于是我想到用offsetTop的方法来试试，

但实验结果是失败的，因为全部li的offset top都是0， 不过这个也可能是li的父级标签的css设置不当导致，明天再继续试试如何获取被隐藏了的tab。

 

今天就到此为止。

 

最后贴上今天的部分js代码：

js文件中的组件代码：

1 /** 2  * @author Steven 3  */ 4 var jqTabMaster = { 5     containerID:"", 6     size:0, 7     items:[], 8     width:"" 9 };10 11 jqTabMaster.initial = function(option){12     this.containerID = option.containerID13     this.size = option.size;14     this.items = option.items;15     this.width = option.width;    16 17     var container = $("#"+this.containerID),18         ul = document.createElement("ul"), 19         li,20         iLen = Math.min(this.items.length,this.size);21 22     container.hide();23     container.css('width',this.width);24     container.css('overflow','hidden');25 26     for(var i =0;i

前台的初始化代码：

1 jqTabMaster.initial({ 2                 containerID:"div1", 3                 size:7, 4                 items:[ 5                     {value:"1",text:"1"}, 6                     {value:"2",text:"2"}, 7                     {value:"3",text:"3"}, 8                     {value:"4",text:"4"}, 9                     {value:"5",text:"5"},10                     {value:"6",text:"6"},11                     {value:"7",text:"7"},12                     {value:"8",text:"8"},13                     {value:"9",text:"9"},14                     {value:"10",text:"10"}15                 ],16                 width:"150px"17             });

 

 

css和html就不贴了。

 

                                 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　-- 2012.05.16