DEV/JS

[jQuery] common.js

zineeworld 2018. 3. 12. 15:21

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');
});
}


반응형