组件开发-tab页新建，删除

主要工具，jq，handlebars，上移下移改天继续写。

1.gif

• js

    function Tab(elm,strOpt) {
        this.parents = $(elm);
        this.parents.html('');
        this.parents.append('
');
        this.parents.append('
');
        this.menuParents = $(".tab-menu-box");
        this.conParents = $(".tab-content-box");
        this.tabLength = 0;
        if(this.isEmptyObject(strOpt)) {
            this.menuTemplate = '
{{title}}x
';
            this.conTemplate = '
{{opt.content}}
';
        }else{
            this.menuTemplate=strOpt.menuTemplate || '按钮';
            this.conTemplate=strOpt.conTemplate || '内容哦';
        }
        this.bindEvent();
    }

    /**
     *  添加一个页签
     * @param param
     */
    Tab.prototype.addTab = function (param) {
        param.title = param.title ? param.title : '按钮' + (this.tabLength + 1);
        param.opt.content = param.opt.content + (this.tabLength + 1) + '嘻嘻嘻嘻嘻';
        this.menuParents.append(Handlebars.compile(this.menuTemplate)(param));
        this.conParents.append(Handlebars.compile(this.conTemplate)(param));
        if (this.tabLength == 0) {
            this.menuParents.find('li').eq(0).addClass("active");
        }
        if (this.tabLength >= 1) {
            this.menuParents.find('li').removeClass("active").eq(this.tabLength).addClass('active');
            this.conParents.find('.main-body').hide().eq(this.tabLength).show();
        }
        this.tabLength++;

    }

    /**
     * 删除一个页签
     * @param index
     */
    Tab.prototype.deleteTab = function (index) {
        if (this.menuParents.find('li').length <= 1) {
            console.log('至少一需要个按钮');
            return;
        }

        this.tabLength--;
        this.menuParents.find('li').eq(index).remove();
        this.conParents.find('.main-body').eq(index).remove();
        // 如果当前删除页签是显示的 则显示删除前面的那个标签页
        if (this.menuParents.find('li.active').length == 0) {
            this.menuParents.find('li').removeClass('active').eq(index - 1).addClass('active');
            this.conParents.find('.main-body').hide().eq(index - 1).show();
            // 如果当前删除的页签是不显示的   则重新遍历按钮名字顺序
        } else {
            var k = this.menuParents.find('li.active').index(), str = '';
            for (var i = 0; i < this.tabLength; i++) {
                str += Handlebars.compile(this.menuTemplate)({title: '按钮' + (i + 1)});
            }
            this.menuParents.html(str);
            this.menuParents.find('li').eq(k).addClass('active');
            this.conParents.find('.main-body').hide().eq(k).show();
        }


    }
    /**
     * 上移tab
     * @param index
     */
    Tab.prototype.topMoveTab = function (index) {
        if (!index) {
            console.log('第一层无法上移');
            return;
        }
        var menus = this.menuParents.find('li'),
            cons = this.conParents.find(".main-body"),
            curMenu = menus.eq(index),
            curContent = cons.eq(index);
        curMenu.insertBefore(menus.eq(index - 1));
        curContent.insertBefore(cons.eq(index - 1));

    }

    /**
     * 下移tab
     * @param index
     */
    Tab.prototype.bottomMoveTab = function (index) {
        if (index == this.tabLength - 1) {
            console.log('最后一层无法下移');
            return;
        }
        var menus = this.menuParents.find('li'),
            cons = this.conParents.find(".main-body"),
            curMenu = menus.eq(index),
            curContent = cons.eq(index);
            curMenu.insertAfter(menus.eq(index + 1));
            curContent.insertAfter(cons.eq(index + 1));

    }


    /**
     * 事件处理
     */
    Tab.prototype.bindEvent = function () {
        var that = this;
        $(that.parents).on("click", '.tab-menu-box .tab-title', function () {
            var index = $(this).parents('li').index();
            that.menuParents.find('li').removeClass("active").eq(index).addClass('active');
            that.conParents.find('.main-body').hide().eq(index).show();
        });
    }

    /**
     * 是否是空对象
     * @param e
     * @returns {boolean}
     */
    Tab.prototype.isEmptyObject=function(e) {
        var t;
        for (t in e)
            return !1;
        return !0
    }

    // 创建一个选项卡
    var tab = new Tab("#tabWrapper");
    // 添加一个页签
    tab.addTab({
        opt: {content: '名字'}
    });
    // 新建页签
    $(".handle-btn-box").on("click", '.new-tab-btn', function () {
        tab.addTab({opt: {content: '名字'}});
    });
    // 删除页签
    $("#tabWrapper").on("click", '.close-btn', function () {
        var index = $(this).parents("li").index();
        tab.deleteTab(index);
    });

    // 上移
    $(".topmove-tab-btn").on("click", function () {
        var index = $(".tab-menu-box li.active").index();
        tab.topMoveTab(index);
    });

    // 下移
    $(".bottommove-tab-btn").on("click", function () {
        var index = $(".tab-menu-box li.active").index();
        tab.bottomMoveTab(index);
    });

  

• css

• html

    

        新增
        上移
        下移