카테고리를 항상 펼쳐놨더니 지저분해보여서 접은 형태로 수정했다.
그래서 하는김에 정리할겸 포스팅해본다.
버튼 샘플
.btn01, .btn02{padding: 2px 4px 2px 4px; text-align: center; font-weight: 600; line-height: 1.4em; box-shadow: 1px 1px 2px #333; border-radius: 15px;}
.btn01{background-color: #008DFF; color: #333;}
.btn02{background-color: #FF3E00; color: #fff;}
.example01{padding: 5px; text-align: center; border: 1px solid #008DFF;}
한 눈에 들어올 수 있도록 스타일을 지정해 보았다.
준비는 됐으니 DOM, jQuery를 이용하여 몇 가지 방법을 소개해보려 한다.
1) DOM
DOM이란, Document Object Model의 줄임말로
HTML, XML, CSS, Javascript 등의 문서를 읽고 처리해주는 역할을 한다.
코드
<BODY>
<button class="btn01" onclick="document.getElementById('hiddenContent01').style.display=(document.getElementById('hiddenContent01').style.display=='block') ? 'none' : 'block';">펼치기</button>
<div id="hiddenContent01" class="example01" style="display: block;">내용</div>
</BODY>
코드를 살펴보면, 문서 내 ID가 'hiddenContent'인 태그 속성을 선택하여
해당 태그(hiddenContent01)의 스타일 속성 중 display 옵션을 none일 경우 block, block일 경우 none으로 설정하게 한다.
결과
코드 정리
프로그래밍의 기본은 가독성이다.
위와 같은 내용을 조금이나마 보기좋게 스크립트 부분과 문서 부분을 분리해보자.
코드
<HTML>
<HEAD>
<script>
function fn_spread(id){
var getID = document.getElementById(id);
getID.style.display=(getID.style.display=='block') ? 'none' : 'block';
}
</script>
</HEAD>
<BODY>
<button class="btn01" onclick="fn_spread('hiddenContent02');">펼치기</button>
<div id="hiddenContent02" class="example01" style="display: none;">내용</div>
</BODY>
</HTML>
결과
2) 제이쿼리 jQuery
jQuery는 위와 같은 DOM 및 자바 스크립트를 보다 편리하게 쓸 수 있도록 만든 라이브러리다.
공식 홈페이지에서 다운 받아 사용할 수도 있고,
CDN 주소를 이용하여 코드 한 줄로 웹 상에서 이용 가능하다.
마찬가지로 앞선 예제들을 jQuery 문법으로 바꿔보겠다.
코드
<HTML>
<HEAD>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("#spreadBtn01").click(function(){
if($("#hiddenContent03").is(":visible")){
$("#hiddenContent03").css("display", "none");
}else{
$("#hiddenContent03").css("display", "block");
}
});
});
</script>
</HEAD>
<BODY>
<button id="spreadBtn01" class="btn01">펼치기</>
<div id="hiddenContent03" class="example01" style="display: none;">내용</div>
</BODY>
</HTML>
결과
응용 1 - 미끄러지듯 펼치기 접기
카테고리에 적용하기 좋은 예제로, 리스트 태그인 <ul>을 통해 살펴보자.
코드
<HTML>
<HEAD>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("#spreadBtn02").click(function(){
if($("#hiddenList01").is(":visible")){
$("#hiddenList01").slideUp();
}else{
$("#hiddenList01").slideDown();
}
});
});
</script>
</HEAD>
<BODY>
<button id="spreadBtn02" class="btn01">펼치기</button>
<ul id="hiddenList01" class="example01" style="display: none;">
<li>내용</li>
<li>내용</li>
<li>내용</li>
</ul>
</BODY>
</HTML>
결과
응용 2 - 클릭 시 클래스 변경
클래스 변경을 통해 시각적 요소를 변경하거나 효과를 덧붙일 수 있다.
코드
<HTML>
<HEAD>
<script>
$(document).ready(function(){
$("#spreadBtn03").click(function(){
if($("#hiddenList02").is(":visible")){
/*toggleClass(기존클래스명 바꿀클래스명);*/
$("#spreadBtn03").toggleClass("btn01 btn02");
$("#hiddenList02").slideUp();
}else{
$("#spreadBtn03").toggleClass("btn02 btn01");
$("#hiddenList02").slideDown();
}
});
});
</script>
<BODY>
<button id="spreadBtn03" class="btn01">펼치기</button>
<ul id="hiddenList02" class="example01" style="display: none;">
<li>내용</li>
<li>내용</li>
<li>내용</li>
</ul>
</BODY>
</HTML>
결과
응용 3 - Fontello 아이콘 폰트를 활용한 변경
앞서 '아이콘폰트 :: Fontello 사용법' 포스팅에서 아이콘 폰트 폰텔로에 대해 소개한바 있었다.
본 블로그 또한 fontello 아이콘 폰트를 사용하고 있기때문에 이를 응용해보자.
코드
<HTML>
<HEAD>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
$(document).ready(function(){
$('#spreadBtn04').click(function(){
if($("#hiddenList03").is(":visible")){
$("#spreadBtn04").toggleClass("icon-emo-sunglasses icon-emo-grin");
$("#hiddenList03").slideUp();
}else{
$("#spreadBtn04").toggleClass("icon-emo-grin icon-emo-sunglasses");
$("#hiddenList03").slideDown();
}
});
});
<span class="icon-emo-sunglasses" id="spreadBtn04">펼치기</span>
<ul id="hiddenList03" class="example01" style="display: none;">
<li>내용</li>
<li>내용</li>
<li>내용</li>
</ul>
</BODY> </HTML>결과
펼치기
마치며
앞서 살펴본 예제들은 <button> 태그로 작성했지만,
위의 응용3에서 <span>을 이용했듯 어떠한 태그라도 가능하다.
또한, jQuery의 셀렉터와 함수들을 통해 간단하게 코딩할 수도 있다.
예를 들어 앞서 style="display: none"과 같은 속성은 화면 노출 여부 옵션인데,
jQuery에서는 셀렉터.show(); 또는 셀렉터.hide()로 접근할 수 있다.
jQuery에 관한 더 많은 기능들을 찾아보려면 API문서를 참고하자.
보다 현란한(?)효과를 줄 수 있을 것이다.
끝.
'IT > WEB, UI, UX' 카테고리의 다른 글
| [웹 서비스 개발 환경 구축 ③] Maven 설치 및 이클립스와 연동하기 (0) | 2016.05.11 |
|---|---|
| [웹 서비스 개발 환경 구축 ②] 아파치 톰캣 설치 및 이클립스 연동하기 (0) | 2016.05.04 |
| [웹 서비스 개발 환경 구축 ①] 이클립스 :: 스프링 프레임워크 설치하기 (0) | 2016.04.29 |
| [UX] UX(User Experience) :: 개념, 목업 및 프로토타입 도구, 와이어프레임 (0) | 2016.04.13 |
| 티스토리 블로그 :: 웹 페이지 로딩속도 최적화하기 (0) | 2016.03.14 |