2012.05.16

今天没有看书，而是做了些小练习和试验。由于答应了公司的项目经理要做一个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文件中的组件代码：

View Code

 1 /**
 2  * @author Steven
 3  */
 4 var jqTabMaster = {
 5     containerID:"",
 6     size:0,
 7     items:[],
 8     ""
 9 };
10 
11 jqTabMaster.initial = function(option){
12     this.containerID = option.containerID
13     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<iLen;i++) {
27         li = document.createElement("li");
28         li.innerHTML = this.items[i].text;
29         li.value = this.items[i].value;
30         ul.appendChild(li);
31     }
32     
33     container.append(ul);
34     
35     var lis = $("ul li");
36     lis.each(function(){
37         //alert($(this).offset().top);        
38     });
39     container.show();
40 }

前台的初始化代码：

View Code

 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                 "150px"
17             });

css和html就不贴了。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　-- 2012.05.16