JS写的Tab控件

//作者：虞健超（james.Yu）
//日期：2012-11-26
//描述：此为前年开发的Tab控件修改后的mini版，去掉了一些功能，
//      需要完整版请到我的blog留言我会发邮件,
//      虽然为mini版但Tab基本功能都以实现
function TabControl(container) {
    var instance = this;
    var TabContainer = container;
    var ContainerRow;
    var TabButtonContainer;
    var TabRow;
    var IsInit = false;

    this.TabItemList = [];
    this.ImmediatelyShowTab = true;
    this.DisableStyle;
    this.EnableStyle;
    this.ShowNewBtn = false;
    this.NewTabBtn;

    this.GetTabContainer = function () {
        return TabButtonContainer;
    }

    this.Init = function () {
        if (!IsInit) {
            IsInit = true;
            TabButtonContainer = $("<table><tr><td __innerName='new_btn'></td></tr><tr><td></td></tr></table>");
            TabRow = $(TabButtonContainer[0].rows[0]);
            ContainerRow = $(TabButtonContainer[0].rows[1]);
            this.NewTabBtn = $("[__innerName=new_btn]", TabButtonContainer);
            this.NewTabBtn.click(function () {
                instance.AddTab("tb" + TabRow[0].cells.length, this.NewContainer())
            });
            if (!this.ShowNewBtn) {
                this.NewTabBtn.hide();
            }
            TabContainer.append(TabButtonContainer);
        }
    }

    this.NewContainer = function () {
        return $("<div></div>");
    }

    this.AddTab = function (tabname, tabcontainer) {
        var tab = $("<td></td>");
        var tabID = "tab_" + TabRow[0].cells.length;
        this.TabItemList.push({ ID: tabID, Tab: tab, ItemContainer: tabcontainer });
        tab.attr("__innerName", tabID);
        tabcontainer.hide();
        TabRow.append(tab);
        ContainerRow.attr("colspan", TabRow[0].cells.length);
        tab.click(function () {
            var item = $(this);
            var name = item.attr("__innerName");
            var containerItem = instance.GetTabItemByID(name).ItemContainer;
            instance.TabClick(item, containerItem);
            instance.EnableTab(item, containerItem);
        });
        tab.append(this.CreateTabContainer(tabname));
        if (this.ImmediatelyShowTab) {
            this.EnableTab(tab, tabcontainer);
        }
    }

    this.DeleteTab = function (index) {
        var tab = this.TabItemList[index].Tab;
        tab.remove();
        this.TabItemList.splice(index, 1);
    }

    this.TabClick = function (tab, containerItem) { }

    this.CreateTabContainer = function (tabname) {
        return $("<div>" + tabname + "</div>");
    }

    this.DisableAllTab = function () {
        $.each(this.TabItemList, function (index, item) {
            instance.DisableTab(item.Tab);
        });
    }

    this.GetTabItemByID = function (id) {
        for (var i = 0; i < this.TabItemList.length; i++) {
            if (id == this.TabItemList[i].ID) {
                return this.TabItemList[i];
            }
        }

        return null;
    }

    this.EnableTabIndex = function (index) {
        var ctn = this.TabItemList[index].ItemContainer;
        var item = this.TabItemList[index].Tab;
        this.EnableTab(item, ctn);
    }

    this.DisableTab = function (tab) {
        if (tab.hasClass(this.EnableStyle)) {
            tab.removeClass(this.EnableStyle);
        }
        if (!tab.hasClass(this.DisableStyle)) {
            tab.addClass(this.DisableStyle);
        }
    }

    this.EnableTab = function (tab, containerItem) {
        this.DisableAllTab();
        if (!tab.hasClass(this.EnableStyle)) {
            tab.addClass(this.EnableStyle);
        }
        if (tab.hasClass(this.DisableStyle)) {
            tab.removeClass(this.DisableStyle);
        }

        if (containerItem) {
            ContainerRow.empty();
            ContainerRow.append(containerItem);
            containerItem.show();
        }
    }
}