웹디자인 기능사 ) 핵심 JQUERY 정리

1) 레이어 팝업창 제작 문제

A. 팝업 숨기기(초기)

$('팝업').hide()

 

B. 공지사항 첫 글 클릭 시 팝업 보이기

$('공지사항 첫 글 대상').on('이벤트', function(){
	$('팝업').show()
}

 

C. 팝업 닫기 클릭 시 팝업 숨기기(팝업 출력 후)

$('팝업닫기').on('이벤트', function(){
	$('팝업').hide()
}

 

---

 

2) 탭 구성 컨텐츠

A. 탭 클릭 시 활성화 탭 제목 색상 변경 & 비활성화 탭 제목 색상 변경

/* CSS 탭 제목 활성화 디자인 준비*/
.active { background-color:; color:; }

$('모든 탭 제목').on('이벤트',function(){
	$('모든 탭 제목').removeClass('active')
    $(this).addClass('active')
}

 

B. 클릭한 제목에 관련한 탭 내용 활성화

$('모든 탭 제목').on('이벤트',function(){
	$('모든 탭 제목').removeClass('active')
    $(this).addClass('active')
    
    
    //클릭한 탭 제목 관련 내용 활성화(아래)
    var i = $(this).index()
    $('탭 내용').hide()
    $('탭 내용').eq(i).show() 
    //또는 flex 레이아웃 설정 시 $('탭 내용').eq(i).css('display', 'flex')
}

 

3) 슬라이드 

A. 슬라이드 상-하, 좌-우 방향에 따라 top를 left로 변경

B. 슬라이드 상하 동작일 경우(높이 300 유지)

var count = 0
setInterval(function(){
	count++
    if(count>2){count=0}
    var num = count*300
    $('슬라이드근접부모').animate({
    	top:'-'+num+'px'
     },400)
 },2000)

 

4) 내비게이션

A. 서브 숨기기

$('서브').hide()

B. 메뉴에 마우스 올렸을 시 서브 출력하기(슬라이드업다운 구조)

$('메인 내비게이션 li').on('mouseover', function(){
	$('서브').stop().slideDown()
}.on('mouseout',function(){
	$('서브').stop().slideUp()
}

C. 메뉴에 마우스 올렸을 시 활성화 메뉴 색상 변경하기

//메인 li 이벤트 내에 추가 작성
$(this).children('a').css('속성', '값').css('속성','값')

D. 서브 메뉴에 마우스 올렸을 때 활성화 색상 변경하기

$('서브 li').on('mouseover', function(){
	$(this).children('a').css('속성','값').css('속성','값')
}.on('mouseout',function(){
	$('서브 a').css('속성','값').css('속성','값')
}

 

위 메뉴 색상 변경하기 (class를 사용했을 경우)

1) 활성화된 내비게이션에 적용할 클래스 준비(중복될 속성을 대비하여 !important 필수입력)

.hover {background-color:#eee !important; color:#f00 !important;}

2) 활성화 서브 및 내비게이션에 클래스 적용하고 비활성화 대상에 클래스 제거하기

$('서브 또는 내비게이션 대상').on('mouseover',function(){
    $('서브 또는 내비게이션 대상').removeClass('hover')
    $(this).addClass('hover')
}).on('mousout',function(){
    $('서브 또는 내비게이션 대상').removeClass('hover')
})