twitter bootstrap tab widget 을 자유롭게 사용하기

twitter bootstrap에는 깔끔한 위젯이 몇개 있는데 그중에 가장 좋은건 버튼과 탭이 아닐까 생각 합니다.

원래의 위젯 사용법 보기 :

http://twitter.github.io/bootstrap/javascript.html#tabs

버튼이야 워낙 단순해서 그냥 쓰면 되는것이고,

탭으 경우 사용성이 많은데... 매번 관련 업무에 대하여 재코딩을 해야 했다..

그래서..

멀더가 좀 쉽게 갈 수 있도록 jQuery plugin으로 몇가지 함수를 추가 했습니다.

bootStrapTab Plugin 

(function($) {       
    	// Author : mulder (@mulderu)
    	// Version : v0.1
    	// When : 2013.05.22
        $.fn.bootStrapTab = function(o) {
        	this.hdr = null;
        	this.ctt = null;
        	
        	var $This = this;
            o = $.extend({
                 idPrefix: 'bootstrapTab_'
            }, o || {});
            
            var makeTabPane = function(data) {
            	$(data).each(function(i, v) {
                    var id = $(v).attr('id');
                    var ct = $(v).attr('html');
                    console.log (id)
                    $('
'+id+'
').appendTo (hdr);
                    $('
'+ct+'
').appendTo (ctt);
                });
            }
            
            this.selTab = function(selId) {
            	$(hdr).find('li.active').removeClass('active');
            	$(hdr).find('a[href=#'+selId+']').parents('li').addClass('active');
            }
            
            this.addTab = function(opt) {
            	makeTabPane (opt.data);
                $(hdr).find('a:last').tab('show');
            }
            
            this.delTab = function(delId) {
                $(hdr).find('a[href=#'+delId+']').parents('li').remove();
                $(ctt).find('div#'+delId).remove();
                 
                $(hdr).find('a:last').tab('show');
            }
            
            this.getTab = function(getId) {
                return {
                	hdr : $(hdr).find('a[href=#'+getId+']').parents('li')
                	,ctt : $(ctt).find('div#'+getId)};
            }
            
            return this.each(function(index) {      
               hdr = $('
').attr({"class": "nav nav-tabs", "id": o.idPrefix+index});
               ctt = $('
').attr({"class": "tab-content", "id": o.idPrefix+index + "Content" });
                
               makeTabPane (o.data);
               
               $(this).append(hdr);
               $(this).append(ctt);

                $(hdr).find('a:first').tab('show');
            
            });
      };
    })(jQuery);

Javascript

// bootStrap tab component를 만든다.
    	var bootTabWidget = $('#tabArea').bootStrapTab ({
    		data:
                [
                   {id:'mulder', html:'
mulder
'}
    	         , {id:'scully', html:'
scully
'}
    	         , {id:'junsang', html:'
junsang
'}
    	        ]
    	});
    	
    	// 탭패널을 추가함.
    	$('#addTab').click (function() {
    		bootTabWidget.addTab ({data:[
                          {id:'mulder2', html:'
mulder2
'}
                         , {id:'mulder3', html:'
mulder3
'}
                             ]});
    	});
    	
    	// 특정 탭패널을 삭제함.
    	$('#delTab').click (function() {
    		bootTabWidget.delTab ('mulder2');
        });
    	
    	// 특정 탭패널을 선택함.
    	$('#selTab').click (function() {
            bootTabWidget.selTab ('scully');
        });
    	
    	// 특정 탭패널의 정보를 가져옴.
    	$('#getTab').click (function() {
            alert ( bootTabWidget.getTab ('scully').ctt.html() );
        });

HTML

      
      add
      del
      sel
      get

Demo