Bootstrap 之 tab 改

tab是个超轻量级标签页控件 只有简单的功能  新增 添加  删除功能
function ($) { "use strict";


  // TAB CLASS DEFINITION
  // ====================


  var Tab = function (element) {
    this.element = $(element)
  }
  Tab.prototype.add = function (obj) {
	  var obj1 = this;
	   var title = obj[0];
	   var url = obj[1];
	   var index = obj[2];
       var $this= this.element;
	    $this.find("li").removeClass("active");
	    $(".tab-content div").removeClass("active");
	   $this.append('<li class="active"><a href="#tab'+index+'" data-toggle="tab">'+title+'</a><a href="#" class="remove">x</a></li>');
	    $this.find("li.active a.remove").click(function(){
		 obj1.del(this);
        });
	   $(".tab-content").append('<div class="tab-pane active" id="tab'+index+'" >wwwwwww.</div>');
  }
   Tab.prototype.del = function (obj) {
       var $this= this.element;
	   var selector= $(obj).prev("a").attr("href");
	   	selector = selector.replace('#', '');
	    $("#"+selector).remove();
	    $(obj).parent("li").remove();
	   $(".tabs").find("li:eq(0)").addClass("active");
	   $(".tab-content").find("div:eq(0)").addClass("active");
  }
  
  Tab.prototype.show = function () {
	var obj = this;
    var $this= this.element;
    var $ul      = $this.closest('ul:not(.dropdown-menu)')
    var selector = $this.data('target');
    if (!selector) {
      selector = $this.attr('href')
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
    }
   $this.parents("ul").find("li a.remove").click(function(){
		obj.del(this);
   });
    if ($this.parent('li').hasClass('active')) return;
    var previous = $ul.find('.active:last a')[0];
    var e= $.Event('show.bs.tab', {
      relatedTarget: previous
    })
    $this.trigger(e)
    if (e.isDefaultPrevented()) return
    var $target = $(selector);
    this.activate($this.parent('li'), $ul)
    this.activate($target, $target.parent(), function () {
      $this.trigger({
        type: 'shown.bs.tab'
      , relatedTarget: previous
      })
    })
  }


  Tab.prototype.activate = function (element, container, callback) {
    var $active    = container.find('> .active')
    var transition = callback
      && $.support.transition
      && $active.hasClass('fade')


    function next() {
      $active
        .removeClass('active')
        .find('> .dropdown-menu > .active')
        .removeClass('active')
      element.addClass('active')


      if (transition) {
        element[0].offsetWidth // reflow for transition
        element.addClass('in')
      } else {
        element.removeClass('fade')
      }


      if (element.parent('.dropdown-menu')) {
        element.closest('li.dropdown').addClass('active')
      }


      callback && callback()
    }


    transition ?
      $active
        .one($.support.transition.end, next)
        .emulateTransitionEnd(150) :
      next()


    $active.removeClass('in')
  }




  // TAB PLUGIN DEFINITION
  // =====================


  var old = $.fn.tab


  $.fn.tab = function ( option ) {
	  var args=arguments;
	   console.log(arguments);
    return this.each(function () {
      var $this = $(this)
      var data  = $this.data('bs.tab');
	
      var i = args.length;
	  var array = [];
	  console.log(option);
	  for(var j=0;j<i;j++){
		 array.push( args[j]);
	  }
	  array=array.slice(1);
      if (!data) $this.data('bs.tab', (data = new Tab(this)));
	  
      if (typeof option == 'string') data[option](array);
    })
  }


  $.fn.tab.Constructor = Tab




  // TAB NO CONFLICT
  // ===============


  $.fn.tab.noConflict = function () {
    $.fn.tab = old
    return this
  }




  // TAB DATA-API
  // ============


  $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
    e.preventDefault()
    $(this).tab('show')
  })


}(jQuery);

调用新增 $(".nav-tabs").tab("add","标题","",1);

页面

<ul class="tabs nav-tabs">
  <li class="active" ><a href="#home" data-toggle="tab">主页</a></li>
  <li><a href="#profile" data-toggle="tab">菜单项一</a><a href="#" class="remove">x</a></li>
  <li><a href="#messages" data-toggle="tab">菜单项一</a><a href="#" class="remove">x</a></li>
  <li><a href="#settings" data-toggle="tab">菜单项一</a><a href="#" class="remove">x</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home"></div></div>

效果图