[jQuery] common.js

jQuery로 작업할 때 가장 많이 쓰던 코드들이다.

1. 공통 header, footer html 파일을 로드

2. 제이쿼리 탭 메뉴 소스

3. 제이쿼리 아코디언 메뉴 소스

4. 제이쿼리 드롭다운 메뉴 소스

5. 제이쿼리 커스텀 셀렉트 박스 소스

$(function() {
   // layout
   $('#header').load('../../docs/base/header.html');
   $('#footer').load('../../docs/base/footer.html');
});

/* Tab */
function tab(e, num){
   var num = num || 0;
   var menu = $(e).children();
   var con = $(e+'-con').children();
   var select = $(menu).eq(num);
   var i = num;

   select.addClass('on');
   con.hide();
   con.eq(num).show();

   menu.click(function(){
      if(select!==null){
         select.removeClass("on");
         con.eq(i).hide();
      }

      select = $(this);
      i = $(this).index();

      select.addClass('on');
      con.eq(i).show();
   });
}

/* Accordion */
function accordion(selector, speed) {
   var s = speed || 300;
   var e = $(selector);
   var dt = $(selector).children('dt');
   var dd = $(selector).children('dd');
   var select = null;

   dd.hide();
   e.find('dt.open').next('dd').show();

   dt.click(function () {
      var open = $(this).hasClass('open');
      e.find('dt.open').next('dd').stop().slideUp(s);

      if (select !== null) {
         dd.stop().slideUp(s);
         select.removeClass('open');
      }

      if (open == true) {
         select = null;
         $(this).next('dd').stop().slideUp(s);
         $(this).removeClass('open');
      }

      if (open == false) {
         dt.removeClass('open');
         select = $(this);
         select.addClass('open');
         select.next('dd').stop().slideDown(s);
      }
   });
}

/* Dropdown */
function dropdown(seletor, text){
   var Selected = $(seletor);
   var Drop = $(seletor+'-drop');
   var text = text || false;

   Selected.click(function(){
      Selected.toggleClass('open');
      Drop.toggle();
   });

   Drop.find('li').click(function(){
      Selected.removeClass('open');
      Drop.hide();

      if(text==true){
         var txt = $(this).text();
         Selected.text(txt);
      }
   });
}


/* fake select box */
function selectBox(e){
   // label text must be same with initial 'option:selected' text
   var select_name = $(e).children('option:selected').text();
   $(e).siblings('label').text(select_name);

   $(e).change(function(){
      var select_name = $(this).children('option:selected').text();
      $(this).siblings('label').text(select_name);
      $(this).siblings('label').addClass('selected');
   });
}