2012.05.19

今天19号，周六， 昨天偷懒了，没学习没写博客就睡了，今天要多做点事情。所以一大早就打开编辑器了，虽然也是边玩边写··不过也算是有所输出吧。

今天还是继续写Jq Tab插件。

现在时23:38分，已经明显觉得困了，那么今天就到此为止。

今天实现了的功能为：

　　为tab容器添加“更多”按钮。并为按钮绑定onclick事件：

　　　　 当更多的tabs隐藏时，生成包含more tabs的层并显示出来，同时切换按钮和document的onclick事件。

　　　　 当更多的tabs显示时，点击更多按钮盒document时都会隐藏更多tabs容器，并切换按钮事件和清空document onclick事件。

       在功能之外，今天整理了下代码，之前是把几乎全部代码都写到一个initial方法里的，今天整理了下，提取了几个其他的方法出来，但好像也没觉得代码有优美很多。看来我编码的功力还不够，还需要继续努力。

今天开发中遇到的问题包括：

因为需要切换更多按钮的事情，想到用jq 的toggle方法，但后来发现有点问题，因为toggle只会在指定的对象被点击时，才会切换事件，而我现在做的功能是当更多按钮或容器外部被点击时，都要切换事件，而当容器外部被点击时，more tabs 容器被隐藏，但更多按钮的事件却还没被切换。 为了解决这个问题，就用了比较原始的方法，先unbind再bind。如果哪位仁兄知道有较简便的实现方法，望告知，感激不尽。

想到得还没实现的功能：

1.提供callback函数接口

2.样式

3.调整应该显示的tabs，数量不超过size

4.每个tab可以接受任意数据格式

其中实现了前2个基本就能用了。第三个也在需求当中，暂时还没想到实现方法，但应该也可以实现得不太难。

总的来说，今天做的功能好像不多，做的时间嘛，大概2到3个小时。所以我的工作效率还是很低的。 以后也要尽量提高。那么今天就到这里。

这里贴上js代码：注视可能不太清晰也不太规范，有兴趣的将就着看吧。

/**
 * @author Steven
 */

/*-------------- Common Functions ------------------*/
function stopPropagation(e) {
    e = e || window.event;
    if(e.stopPropagation) { //W3C阻止冒泡方法
        e.stopPropagation();
    } else {
        e.cancelBubble = true; //IE阻止冒泡方法
    }
}


/*--------------------------------------------------*/
var jqTabMaster = function(){
};
jqTabMaster.prototype.config = {
    containerID:"",
    size:0,
    realSize:0,
    items:[],
    showItems:[],
    ""
};

jqTabMaster.prototype.buildUl = function(startIndex, endIndex, className){
    var config = this.config,
        items = config.items,
        max = items.length-1,
        startIndex = (typeof startindex =='undefined' || isNaN(startIndex))? 0:startIndex,
        endIndex = (typeof endIndex =='undefined' || isNaN(endIndex))? max:endIndex,
        ul = document.createElement("ul"),
        li;
        
    for(var i =startIndex;i<=endIndex;i++){
        li = document.createElement("li");
        li.innerHTML = items[i].text;
        li.value = items[i].value;
        ul.appendChild(li);
    }
    if(!!className){
        ul.className = className;
    }
    return ul;
}

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

    var me = jqTabMaster.prototype,
        container = $("#"+this.config.containerID),
        iLen,
        ul, 
        showItems = [],
        moreItemsCount = 0;

    container.hide();
    container.addClass('container');
    container.css('width',this.config.width);
    container.css('overflow','hidden');
    /*增加”更多“按钮，默认为disabled*/
    container.css({'width':'-=40px'});
    var moreBtn = $("<div id='divMoreBtn' class='no-more'><span>更多</span></div>");
    moreBtn.insertAfter(container);
 
     /* 添加可显示的tabs */
     iLen = Math.min(this.config.items.length,this.config.size);
     ul = jqTabMaster.prototype.buildUl(0, iLen);
    container.append(ul);    
    
    container.show();
    /* Get Real Size 
         由于这里要调用offsetTop来判断是否超出边界，调用offset的参数会比较耗性能，
         现在是用从头开始便利数组获取的，之后可以使用二分法来进行快速查找，以提高性能。
     * */
    var displayInfo = me.getRealDisplayInfo();
    this.config.realSize = displayInfo.realSize;
    this.config.showItems = displayInfo.showItems;
    
    /* 当tab没有完全显示时 */    
    if((this.config.items.length - this.config.realSize)>0){
        $("#divMoreBtn").toggleClass('no-more');
        /*绑定显示更多tab事件*/
        $("#divMoreBtn").bind('click',function(ev){
            me.showMoreTabs(ev);
        });
    }
}

jqTabMaster.prototype.getRealDisplayInfo = function(){
    var me = jqTabMaster.prototype,
        config = me.config,
        realSize = 0,
        lis = $("#"+config.containerID+" ul li"),
        showItems = [],
        originOffsetTop=null;
    
    lis.each(function(i){
        if(originOffsetTop==null){
            originOffsetTop = this.offsetTop;
            showItems.push(i);
        } else if( this.offsetTop!=originOffsetTop){
            return false;
        }
        realSize++;
    });
    return {realSize:realSize,showItems:showItems};
}

/*
 * params:
 * ev: window.event
 * me: jqTabMaster.prototype
 */
jqTabMaster.prototype.showMoreTabs = function(ev){
    var me = jqTabMaster.prototype,
        ev = ev || window.event,
        target = $("#divMoreBtn"),
        /* 容器的offset Left、top和尺寸信息 */
        offset, offsetLeft, offsetTop,
        width, height,
        /* 弹出层的绝对坐标和宽度 */ 
        moreX, moreY,
        moreWidth,
        /* 空隙值 */
        spaceX=10, spaceY=5,
        /* more tabs*/
        ul;     
            
        offset = target.offset();
        offsetLeft = offset.left;
        offsetTop =offset.top;
        width = parseInt(target.css('width'));
        height = parseInt(target.css('height'));
        
        
        moreWidth = 200;
        moreX = offsetLeft + width - moreWidth;
        moreY = offsetTop + height + spaceY;
        /* 这样计算能让弹出层的右边和more按钮的右边对齐*/
        moreX < 0 && (moreWidth += (moreX - spaceX)) && (moreX = spaceX);
        
        //alert(offsetTop+" "+moreY+" "+height);
        var moreDiv = $("<div>");
        moreDiv.attr('id','divMore');
        moreDiv.addClass("more-div");
        moreDiv.css({
            'width':moreWidth+'px',
            'left':moreX+'px',
            'top':moreY+'px'
        });            
        
        ul = me.buildUl(me.config.realSize);
        moreDiv.append(ul);
        
        $(document.body).append(moreDiv);            
        stopPropagation(ev);
        
        /* more tabs显示后，重新绑定事件*/
        me.bindEventsWhenMoreTabsShow();
        
        /*阻止选中文本*/
        me.bankSelect();
}
jqTabMaster.prototype.hideMoreTabs = function(){
    $("#divMore").remove();
    
    /* more tabs隐藏后重新绑定事件*/
    jqTabMaster.prototype.bindEventsWhenMoreTabsHide();
}
jqTabMaster.prototype.bindEventsWhenMoreTabsHide = function(){
    $(document).unbind('click');
    $("#divMoreBtn").unbind('click')
    .bind('click',function(){
        jqTabMaster.prototype.showMoreTabs();
    });
}
jqTabMaster.prototype.bindEventsWhenMoreTabsShow = function(){    
    /* 刷新more按钮的click事件。再点击click时也隐藏more*/
    $("#divMoreBtn").unbind('click')
    .bind('click',function(){
        jqTabMaster.prototype.hideMoreTabs();
    });;
    
    /* 点击more tabs容器外地地方时，隐藏more tabs*/
    $(document).bind('click', function(ev){
        var me = jqTabMaster.prototype,
            ev = ev || window.event,
            target = ev.target||ev.srcElement,
            isDivMore = target.id=="divMore",
            isBelong2DivMore = $(target).parents("#divMore").length>0;
        
        if(!isBelong2DivMore){
            me.hideMoreTabs();
        }
        else {
            stopPropagation(ev);
            return false;
        }
    });
}

jqTabMaster.prototype.bankSelect = function(){
    $("#divMore,#divMoreBtn,#"+jqTabMaster.prototype.config.containerID).bind('selectstart',function(){
        return false;
    })
    .css({
        '-moz-user-select':'none',
        '-webkit-user-select':'none',
        'user-select':'none'    
    });
}

如果发现有什么问题欢迎批评指正，如果发现其中某些地方有更好的解决方法，也希望不吝赐教。 再次先谢过。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2012.05.19