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文件中的组件代码：

/**
 * @author Steven
 */
var jqTabMaster = {
    containerID:"",
    size:0,
    items:[],
    ""
};

jqTabMaster.initial = function(option){
    this.containerID = option.containerID
    this.size = option.size;
    this.items = option.items;
    this.width = option.width;    

    var container = $("#"+this.containerID),
        ul = document.createElement("ul"), 
        li,
        iLen = Math.min(this.items.length,this.size);

    container.hide();
    container.css('width',this.width);
    container.css('overflow','hidden');

    for(var i =0;i<iLen;i++) {
        li = document.createElement("li");
        li.innerHTML = this.items[i].text;
        li.value = this.items[i].value;
        ul.appendChild(li);
    }
    
    container.append(ul);
    
    var lis = $("ul li");
    lis.each(function(){
        //alert($(this).offset().top);        
    });
    container.show();
}

前台的初始化代码：

jqTabMaster.initial({
                containerID:"div1",
                size:7,
                items:[
                    {value:"1",text:"1"},
                    {value:"2",text:"2"},
                    {value:"3",text:"3"},
                    {value:"4",text:"4"},
                    {value:"5",text:"5"},
                    {value:"6",text:"6"},
                    {value:"7",text:"7"},
                    {value:"8",text:"8"},
                    {value:"9",text:"9"},
                    {value:"10",text:"10"}
                ],
                "150px"
            });

css和html就不贴了。

                                 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　-- 2012.05.16