'   }   //初始化   BaseTab.prototype.init = function () {     if (!this.options.data || this.options.data.length == 0) {       console.error("请指定tab页数据");       return;     }     //当前显示的显示的页面是否超出索引     if (this.options.showIndex < 0 || this.options.showIndex > this.options.data.length - 1) {       console.error("showIndex超出了范围");       //指定为默认值       this.options.showIndex = this.default.showIndex;     }     //清除原来的tab页     this.$element.html("");     this.builder(this.options.data);   }   //使用模板搭建页面结构   BaseTab.prototype.builder = function (data) {     var ul_nav = $(this.template.ul_nav);     var div_content = $(this.template.div_content);     for (var i = 0; i < data.length; i++) {       //nav-tab       var ul_li = $(this.template.ul_li.format(data[i].id, data[i].text));       //如果可关闭,插入关闭图标，并绑定关闭事件       if (data[i].closeable) {         var ul_li_close = $(this.template.ul_li_close);         ul_li.find("a").append(ul_li_close);         ul_li.find("a").append(" ");       }       ul_nav.append(ul_li);       //div-content       var div_content_panel = $(this.template.div_content_panel.format(data[i].id));       div_content.append(div_content_panel);     }     this.$element.append(ul_nav);     this.$element.append(div_content);     this.loadData();     this.$element.find(".nav-tabs li:eq(" + this.options.showIndex + ") a").tab("show");   }   BaseTab.prototype.loadData = function () {     var self = this;     //tab点击即加载事件     //设置一个值，记录每个tab页是否加载过     this.stateObj = {};     var data = this.options.data;     //如果是当前页或者配置了一次性全部加载，否则点击tab页时加载     for (var i = 0; i < data.length; i++) {       if (this.options.loadAll || this.options.showIndex == i) {         if (data[i].url) {           $("#" + data[i].id).load(data[i].url);           this.stateObj[data[i].id] = true;         } else {           console.error("id=" + data[i].id + "的tab页未指定url");           this.stateObj[data[i].id] = false;         }       } else {         this.stateObj[data[i].id] = false;         (function (id, url) {           self.$element.find(".nav-tabs a[href='#" + id + "']").on('show.bs.tab', function () {             if (!self.stateObj[id]) {               $("#" + id).load(url);               self.stateObj[id] = true;             }           });         }(data[i].id, data[i].url))       }     }     //关闭tab事件     this.$element.find(".nav-tabs li a i.closeable").each(function (index, item) {       $(item).click(function () {         var href = $(this).parents("a").attr("href").substr(1);         $(this).parents("li").remove();         $("#" + href).parent().remove();       })     });   }

测试

编写一个前端界面，测试组件

//新增一个tab页
  BaseTab.prototype.addTab=function (obj) {
    //nav-tab
    var ul_li = $(this.template.ul_li.format(obj.id, obj.text));
    //如果可关闭,插入关闭图标，并绑定关闭事件
    if (obj.closeable) {
      var ul_li_close = $(this.template.ul_li_close);
      ul_li.find("a").append(ul_li_close);
      ul_li.find("a").append(" ");
    }
    this.$element.find(".nav-tabs").append(ul_li);
    //div-content
    var div_content_panel = $(this.template.div_content_panel.format(obj.id));
    this.$element.find(".tab-content").append(div_content_panel);
    $("#" + obj.id).load(obj.url);
    this.stateObj[obj.id] = true;
    if(obj.closeable){
      this.$element.find(".nav-tabs li a[href='#" + obj.id + "'] i.closeable").click(function () {
        var href = $(this).parents("a").attr("href").substr(1);
        $(this).parents("li").remove();
        $("#" + href).parent().remove();
      })
    }
    this.$element.find(".nav-tabs a[href='#" + obj.id + "']").tab("show");
  }
  //根据id设置活动tab页
  BaseTab.prototype.showTab=function (tabId) {
    this.$element.find(".nav-tabs li a[href='#" + tabId + "']").tab("show");
  }
  //获取当前活动tab页的ID
  BaseTab.prototype.getCurrentTabId=function () {
    var href=this.$element.find(".nav-tabs li.active a").attr("href");
    href=href.substring(1);
    return href;
  }