2012.05.25 jq Tab

经过这段时间的奋斗，jq tab的基础功能已经在昨天完成，不包括样式。 到目前为止，算是完成了v0.1版本。

接下来要完成的功能包括：

1.设置要显示的item属性（现在每个数据单元被称为json）

2.添加样式，让这个jq tab好看一点，不过应该还是最先实现公司那种样式。

下面贴上这个基础版本的代码，包括演示html：

js：

这里引用了jquery 1.72 min文件，这个就自己下载去吧。

/**
* @author Steven
先不考虑页面resize的情况，做好设置先
*/

/*-------------- Common Functions ------------------*/
function stopPropagation(e) {
    e = e || window.event;
    if (e.stopPropagation) { //W3C阻止冒泡方法
        e.stopPropagation();
    } else {
        e.cancelBubble = true; //IE阻止冒泡方法
    }
}
function removeEleFromArr(arr,obj) {
    if (!arr) {
        return false;
    }
    var removeIndexArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == obj) {
            removeIndexArr.push(i);
        }
    }
    for (var i = removeIndexArr.length - 1; i >= 0; i--) {       
         arr.splice(removeIndexArr[i], 1);
    }
}

function removeArrFromArr(arr1, arr2) {
    if (!arr1 || !arr2) {
        return false;
    }
    var copyArr1 = arrayCopy(arr1);
    for (var i = 0; i < arr2.length; i++) {
        removeEleFromArr(copyArr1, arr2[i]);
    }
    return copyArr1;
}

function arrayCopy(arr) {
    if (!!arr && typeof arr.slice == "function") {
        return arr.slice();
    }
    else {
        return null;
    }
}
//window.onresize = function () {
//    var me = jqTabMaster.prototype,
//        config = me.config;
//    config.isResize = true;
//    alert("resize");
//}

/*--------------------------------------------------*/
var jqTabMaster = function () {
};
jqTabMaster.prototype.config = {
    containerID: "",
    size: 0,
    items: [],
    allItemsIndex:[],
    showItemsIndex: [],
    notShowItemsIndex: [],
     "",
    callback: null
};


jqTabMaster.prototype.packingItems = function (items) {
    for (var i = 0; i < items.length; i++) {
        items[i]["__jqTabIndex"] = i;
    }
    return items;
}
jqTabMaster.prototype.getContinueousIndexArr = function (startIndex, endIndex) {
    var me = jqTabMaster.prototype,
         config = me.config,
         items = config.items,
         max = items.length - 1,
         startIndex = (typeof startIndex == 'undefined' || isNaN(startIndex)) ? 0 : startIndex,
         endIndex = (typeof endIndex == 'undefined' || isNaN(endIndex)) ? max : endIndex,
         indexArr = [];

    for (var i = startIndex; i <= endIndex; i++) {
        indexArr.push(i);
    }
    
    return indexArr;
}
// 传入需要显示的items的索引数组，根据该数组来显示
jqTabMaster.prototype.buildUl = function (indexArr, className) {
    if (!indexArr) {
        return false;
    }

    var me = jqTabMaster.prototype,
        config = me.config,
        items = config.items,
        currentIndex,
        callback = config.callback,
        ul = document.createElement("ul"),
        li;
    
    for (var i = 0; i < indexArr.length; i++) {
        currentIndex = indexArr[i];
      
        li = document.createElement("li");
        li.innerHTML = items[currentIndex].text;
        li.index = items[currentIndex].__jqTabIndex;
        ul.appendChild(li);
    }
    if (!!className) {
        ul.className = className;
    }

    me.bindTabsClickEvent(ul, callback);
    return ul;
}

jqTabMaster.prototype.bindTabsClickEvent = function (ul, callback) {
    if (!!ul && ul.tagName == "UL" && typeof callback == "function") {
        ul.onclick = function (ev) {
            var ev = ev || window.event,
                 target = ev.target || ev.srcElement,
                 me = jqTabMaster.prototype,
                 config = me.config,
                 currentIndex;
            if (target.tagName == "LI") {
                currentIndex = target.index;
                callback.call(this, config.items[currentIndex]);
            }
            else {
                return false;
            }
        }
    }
}
jqTabMaster.prototype.unbindTabsClickEvent = function (ul) {
    if (!!ul && ul.tagName == "UL" && typeof callback == "function") {
        ul.onclick = null;
    }
}

jqTabMaster.prototype.initial = function (option) {
    var me = jqTabMaster.prototype,
        allItemsIndex = me.getContinueousIndexArr(0, option.items.length - 1);

    this.config.containerID = option.containerID;
    this.config.size = option.size;
    this.config.items = me.packingItems(option.items);
    this.config.allItemsIndex = allItemsIndex;
    this.config.width = option.width;
    this.config.callback = option.callback;

    var container = $("#" + this.config.containerID),
         iLen,
         ul,
         needShowIndexArr = [],
         showItemsIndex = [],
         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);
    needShowIndexArr = me.getContinueousIndexArr(0, iLen - 1);
    ul = me.buildUl(needShowIndexArr);
    container.append(ul);

    container.show();
    /* Get Real Size 
    由于这里要调用offsetTop来判断是否超出边界，调用offset的参数会比较耗性能，
    现在是用从头开始便利数组获取的，之后可以使用二分法来进行快速查找，以提高性能。
    * */
    var displayInfo = me.getRealDisplayInfo();
    this.config.showItemsIndex = displayInfo.showItemsIndex;
    this.config.notShowItemsIndex = displayInfo.notShowItemsIndex;

    /* 当tab没有完全显示时 */
    if ((this.config.items.length - this.config.showItemsIndex.length) > 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,
        items = config.items,
        lis = $("#" + config.containerID + " ul li"),
        showItemsIndex = [],
        allItemsIndex = me.config.allItemsIndex,
        notShowItemsIndex = [],
        originOffsetTop = null;


    lis.each(function (i) {
        if (originOffsetTop == null || originOffsetTop == this.offsetTop) {
            originOffsetTop = this.offsetTop;
            showItemsIndex.push(this.index);
        }
        else if (this.offsetTop != originOffsetTop) {
            return false;
        }
    });

    notShowItemsIndex = removeArrFromArr(allItemsIndex, showItemsIndex);

    return { showItemsIndex: showItemsIndex, notShowItemsIndex: notShowItemsIndex };
}

/*
* params:
* ev: window.event
* me: jqTabMaster.prototype
*/
jqTabMaster.prototype.showMoreTabs = function (ev) {
    var me = jqTabMaster.prototype,
         config = me.config,
         ev = ev || window.event,
         target = $("#divMoreBtn"),
    /* 需要显示的items索引数组 */
         needShowIndexArr = [],
    /* 容器的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);


    var moreDiv = $("<div>"),
             moreTabsContainer = $("<div>"),
             moreSetting = $("<div>");
    moreDiv.attr('id', 'divMore');
    moreDiv.addClass("more-div");
    moreDiv.css({
        'width': moreWidth + 'px',
        'left': moreX + 'px',
        'top': moreY + 'px'
    });

    moreTabsContainer.addClass('more-tabs-container');

    needShowIndexArr = this.config.notShowItemsIndex;
    ul = me.buildUl(needShowIndexArr);
    moreTabsContainer.append(ul);

    moreSetting.addClass('more-setting');
    moreSetting.html('设置');
    moreSetting.toggle(
             function () {
                 this.innerHTML = "保存";
                 var uls = $("#divMore ul,#" + config.containerID + " ul");
                 for (var i = 0; i < uls.length; i++) {
                     uls[i].onclick = null;
                     me.buildSettingBtns(uls[i]);
                 }
                 me.unbindEventsWhenSettingTabs();
             }, function () {
                 this.innerHTML = "设置";
                 var uls = $("#divMore ul,#" + config.containerID + " ul");
                 uls.each(function (i) {
                     me.bindTabsClickEvent(uls[i], me.config.callback);
                     me.removeSettingBtns(uls[i]);
                 });
                 me.bindEventsWhenMoreTabsShow();
             });

    moreDiv.append(moreTabsContainer).append(moreSetting);

    $(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.unbindEventsWhenSettingTabs = function () {
    $(document).unbind('click');
    $("#divMoreBtn").unbind('click');
}
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).unbind('click').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.buildSettingBtns = function (ul) {
    if (!ul || ul.tagName != "UL") {
        return false;
    }

    var me = jqTabMaster.prototype,
        config = me.config,
        isBelong2DivMore = $(ul).parents("#divMore").length > 0,
        isBelong2TabsContainer = $(ul).parents("#" + config.containerID).length > 0,
        optType = isBelong2DivMore ? "add" : "remove",
        lis = ul.getElementsByTagName("li"),
        li,
        iLen = lis.length,
        spnOpt;

    for (var i = 0; i < iLen; i++) {
        li = lis[i];
        (function (li, me) {
            me.bindSettingOpt(li, optType);
        })(li, me);
    }
}
jqTabMaster.prototype.bindSettingOpt = function (li, optType) {
    var me = jqTabMaster.prototype,
        spnOpt = document.createElement("span"),
        className = "opt";

    spnOpt.className = className;
    spnOpt.innerHTML = optType == "add" ? "+" : "-";

    if (optType == "add") {
        spnOpt.onclick = function () {
            me.addTab($(li)[0]);
        }
    }
    else {
        spnOpt.onclick = function () {
            me.removeTab($(li)[0]);
        }
    };
    $(li).append(spnOpt);
}

jqTabMaster.prototype.removeSettingBtns = function (ul) {
    if (!ul || ul.tagName != "UL") {
        return false;
    }

    var spnOpts = $(ul).find("li span");
    spnOpts.remove();
}

jqTabMaster.prototype.addTab = function (li) {
    var me = jqTabMaster.prototype,
        config = me.config,
        maxSize = config.size,
        realSize = config.showItemsIndex.length;

    if (realSize >= maxSize) {
        return false;
    }

    var showItemsIndex = config.showItemsIndex,
        notShowItemsIndex = config.notShowItemsIndex,
        items = config.items,
        showedTabs = $("#" + config.containerID + " ul li"),
        lastShowTab = realSize > 0 ? showedTabs.eq(realSize - 1) : null,
        moreTabsUl = $("#divMore ul"),
        moreTabsLi = moreTabsUl.find("li"),
        newLi = document.createElement("li"),
        currentLiIndex = li.index,
        currentItem = items[currentLiIndex],
        addSuccessful = false;

    /* Build New Li need to insert */
    newLi.index = currentLiIndex;
    newLi.innerHTML = currentItem.text;
    newLi = $(newLi);
    me.bindSettingOpt(newLi, "remove");

    if (!!lastShowTab) {
        newLi.insertAfter(lastShowTab);
    }
    else {
        $("#" + config.containerID + " ul").append(newLi);
    }
    addSuccessful = !lastShowTab || lastShowTab.offset().top == newLi.offset().top;
    if (!addSuccessful) {
        newLi.remove();
    }
    else {
        showItemsIndex.push(currentLiIndex);
        removeEleFromArr(notShowItemsIndex, currentLiIndex);
        $(li).remove();
    }
}
jqTabMaster.prototype.removeTab = function (li) {
    var me = jqTabMaster.prototype,
        config = me.config,
        items = config.items,
        showItemsIndex = config.showItemsIndex,
        notShowItemsIndex = config.notShowItemsIndex,
        realSize = config.showItemsIndex.length,

        showedTabs = $("#divMore ul li"),
        lastShowTab = showedTabs.eq(notShowItemsIndex.length - 1),
        currentLiIndex = li.index,
        currentItem = items[currentLiIndex],
        newLi = document.createElement("li"),
        move2Index = 0;

    newLi.index = currentLiIndex;
    newLi.innerHTML = currentItem.text;
    newLi = $(newLi);
    me.bindSettingOpt(newLi, "add");
    
    $(li).remove();
    removeEleFromArr(showItemsIndex, currentLiIndex);
   
    newLi.insertAfter(lastShowTab);
    notShowItemsIndex.push(currentLiIndex);
}

jqTabMaster.prototype.getNotShowItemsIndex = function () { 
    
}
jqTabMaster.prototype.getItemRank = function (num, arr) {
    var me = jqTabMaster.prototype,
        config = me.config,
        showItemsIndex = config.showItemsIndex,
        notShowItemsIndex = config.notShowItemsIndex,
        items = config.items,
        allItemsIndex = [];

    for (var i = 0; i < items.length; i++) {

    }
}

/* 禁止文本被选中 */
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'
     });
}

css：

 div{
     border:solid 1px #000;    
 }
 
 .container{
     border:solid 1px #000;
     display:block;
     float:left;
     height:50px;    
     margin:0px;
     padding:0px;
 }
 
 .container ul{
     float:left;
     list-style:none;
     margin:12px 5px 5px 5px;
     padding:0px;
     text-align: left;
 }
 .container ul li{
     border:solid 1px #f00;
     display:inline-block;
     margin: 5px 5px 105px 5px;
     overflow:visible;
     text-align:center;
     width:40px;
     
 }
 
 #divMoreBtn{
     border:solid 1px #000;
     display:block;
     float:left;
     height:50px;
     margin:0px 0px 0px 5px;
     vertical-align:bottom;
     width:35px;
 }
 
 #divMoreBtn span{
     display:block;
     line-height:60px;    
     text-align:center;
     vertical-align:middle;
 }
 
 .no-more{
     background-color#111;
     color:#ddd;
 }
 .more{
     background-color:#fff;
     color:#000;
 }
 .more-div{
     height:420px;
     position:absolute;
 }
 .more-div .more-tabs-container{
     height:360px;
     margin:5px;
     overflow-x:none;
     overflow-y:auto;
     position:relative;
 }
 .more-div .more-setting{
     color:#f00;
     display:block;
     font-weight:bold;
     line-height:40px;
     margin:8px 5px;
     height:40px;
     text-align:center;
     position:relative;
     vertical-align: bottom;
 }
 
 .more-tabs-container ul{
     margin:0px;
     padding: 0px;
     clear:both;
     float:left;
     list-style:none;    
 }
 
 .more-tabs-container ul li{
     border:solid 1px #DDDDDD;
     display:block;
     list-style:none;
     line-height:30px;    
     height:30px;
     margin:2px 10px 5px 10px;
     text-align:center;
     vertical-align:middle;
     width:120px;
 }
 .opt
 {
     border:solid #333333 1px; 
     color:red;
     cursor:pointer;
     display:inline-block;
     float:right;
     font-weight:bold;
     height:13px;
     margin:2px 1px;
     line-height:13px;
     vertical-align:middle;
     width:10px;
 }

html：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=gbk2312" />
         <title>Jq Tab Demo</title>
         <link href="css/jqTab.css" rel="stylesheet"  />
     </head>
     <body>
         <h1>jq Tab</h1>
         
         
         <div id="div1">                 
         </div>
         <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
         <script type="text/javascript" src="js/jqTab.js"></script>
         <script type="text/javascript">
             var jqTab = new jqTabMaster();
             jqTab.initial({
                 containerID: "div1",
                 size: 6,
                 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" }
                 ],
                  "50%",
                 callback: callback
             });
             function callback(data) {
                 alert(data.__jqTabIndex);
             }
             
         </script>
     </body>
 </html>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　这篇就这么多。 补2012.05.25