오중호랑이
오중호랑이의 비밀로그
오중호랑이
전체 방문자
622,412
오늘
2
어제
13
  • 전체보기 (171)
    • 일상 (120)
    • 개발 (18)
      • 일반 (13)
      • 호랑이와 jQuery (5)
    • 외로움 상자 (33)
      • 호랑이단편집 (2)
      • 힙 to the 합 (4)

최근 글

  • 베스트필드 한줄평
    2022.11.30
    베스트필드 한줄평
  • 알림톡입니다. 많이 알려주세요.
    2022.11.30
  • 알뜰폰은 역시 모빙
    2022.10.08
    알뜰폰은 역시 모빙
  • 네이버지도 Javascript API v3 현위치 표시하기
    2022.08.23
    네이버지도 Javascript API v3 현위치 표시하기
  • 관평동 라면우에무라 첫방문 팁💡
    2022.08.16
    관평동 라면우에무라 첫방문 팁💡

최근 댓글

  • 서버쪽 맥이 잠든상태에서도 가능한건가요?
    맥
  • 글 잘보고 갑니다
    나리카페
  • 정말 고맙습니다. 덕분에 예전 노래들을 꺼낼수 있엇네요
    잠자는아이팟
  • 선생님 잘 사용중입니다! 근데 줄 개행된곳은 띄어쓰기가⋯
    오잉
  • 감사합니다
    오중호랑이
hELLO · Designed By 정상우.
오중호랑이

오중호랑이의 비밀로그

jQuery 숨기고 보이는 레이어
개발/호랑이와 jQuery

jQuery 숨기고 보이는 레이어

2013. 12. 11. 17:38

이번시간에는 평소에 많이 쓰이는 특정 element (이곳 예시에선 div)를 숨기고(hide), 보이게(show)만들어 봅니다.

쭈욱 따라 오셨다면 굉장히 간단합니다.
미리 보여줄 element를 CSS를 사용하여 미리 숨겨 놓고 (display:none) 특정 element를 클릭했을때 보여주면 됩니다.

오늘 사용할 메소드는 .hide() 와 .show()입니다.

위 스크린샷과 같이 좁은 해상도에서나, 자주쓰지 않은 메뉴를 미리 숨겨 놓고 팝업식으로 불러오면 공간효율과 함께 깔끔한 디자인도 얻을 수 있습니다.

<div id="toggleButton">숨기기/보이기</div>
<div id="moreMenu">....</div>

자 위와 같이 보기쉽고 간단하게 예제를 만듭니다.

간단하죠?

우린 아이디가 toggleButton인 곳을 '클릭' 했을때 moreMenu의 상태에 따라 css의 'display'의 속성을 바꿔주면 됩니다. 아래와 같이 말이죠

$(document).ready(function(){ //DOM이 준비되고
	$('#toggleButton').click(function(){ // ID가 toggleButton인 요소를 클릭하면
		var state = $('#moreMenu').css('display'); // state 변수에 ID가 moreMenu인 요소의 display의 속성을 '대입'
		if(state == 'none'){ // state가 none 상태일경우 
			$('#moreMenu').show(); // ID가 moreMenu인 요소를 show();
		}else{ // 그 외에는
			$('#moreMenu').hide(); // ID가 moreMenu인 요소를 hide();			
		}
	});
});

위 코드를 보시고 의문을 가질 수 있어요! show()와 hide()가 요소를 보이거나 숨겨주는건 알겠는데 과연 DOM/HTML소스/CSS 에는 어떠한 변화가 있나 궁금할 수 있어요!

직접 확인해보면 됩니다. 앞 장부터 천천히 따라오신분들은 파이어폭스+파이어버그를 설치 하셨을꺼에요 (다른 브라우저와 개발자도구를 이용해도 되지만 여기에선 익숙한 대로 파이어폭스+파이어버그 조합을 사용합니다.)

▲예제 문서를 처음 열었을때 입니다. #moreMenu는 숨겨진 상태로 이녀석의 CSS는 display:none을 가지고 있네요.

▲#toggleButton을 한번 클릭 했을때 상태 변화입니다.

이렇게 직접 해봄으로써 알 수 있듯이 .show()는 요소의 css의 display를 'block'으로 바꾸어주며, hide는 'none'로 바꿔줍니다. 어떨까요, 직접 해보니까 더 쏙쏙 잘들어오는듯 합니다.

정말 짧은 줄의 코드로 숨기고 보이는 레이어를 만들었는데요 사실은 jQuery에서 미리 준비해놓은게 있답니다. 바로 .toggle()라는 녀석이죠.

이 녀석은 똑똑합니다. 굉장히 똑똑합니다. 보이고/숨길 요소에 한번만 적용해주면 알아서 판단해서 보여주거나 숨겨줍니다.

$(document).ready(function(){ //DOM이 준비되고
	$('#toggleButton2').click(function(){ // #toggleButton2를 클릭하면
		$('#moreMenu2').toggle(); // #moreMenu2를 알아서 토.글!
	});
});

이렇게 사용하면 됩니다. 어때요! jQuery는 어차피 해야할일을 좀 더 편하게 사용할 수 있게 해주는 자바스크립트 프레임워크입니다.

잠깐! 예제가 준비되어있습니다. 잘 모르시겠으면 다운받아서 직접 해보시고 소스도 구경해보세요.

example05.zip
다운로드

    '개발/호랑이와 jQuery' 카테고리의 다른 글
    • jQuery 폼 컨트롤 하기
    • jQuery 요소를 컨트롤 하기
    • jQuery ready와 load의 차이
    • jQuery 시작하기
    .hide(), .show(), .toggle(), jquery
    오중호랑이
    오중호랑이
    ojtiger@ojtiger.com
    댓글쓰기
    jQuery 폼 컨트롤 하기
    이전 글
    jQuery 폼 컨트롤 하기

    티스토리툴바