연구개발 이야기

클릭에 의해서 열고접기 (자바스크립트)

클릭에 의해서 열고접기 (자바스크립트)
마우스 클릭으로 일부 태그블록을 열거나 닫는 자바스크립트를 공개한다.

이 스크립트는 이전에 티스토리용 스킨을 만들면서 개발한 것이다. 지금의 스킨은 열고닫기를 사용하지 않기 때문에 따로 포스팅으로 공개해 두기로 한다. 자세한 예제는 과거 스킨을 살펴보면 되지만 여기서는 해설과 간단한 예를 들기로 한다.

예제 I

처음에는 닫힌 폴더 (클릭하세요)

예제 II

열어두었다가 닫는 폴더 (클릭하세요)

클릭하면 닫히고
다시 클릭하면 열린다
그럼 안녕

HTML 의 예

<s_t3>
<script type="text/javascript">
//<![CDATA[
function clickshow(elem,ID) {
var menu = document.getElementById(ID);
if (elem.className !='closed') {
elem.className = 'closed';
menu.style.display = "none";
} else {
elem.className ='opened';
menu.style.display ="block";
}}
//]]>
</script>
</s_t3>
<s_sidebar_element>
<h3 class="closed" onclick="clickshow(this,'categories')">처음에는 닫힌 폴더</h3>
<div id="categories" style="display: none;">
<ol>
<li>첫번째 요소</li>
<li>두번째 요소</li>
<li>그럼 안녕</li>
</ol>
</div>
<br>
<h3 onclick="clickshow(this,'trackblock')">열어두었다가 닫는 폴더</h3>
<div id="trackblock">
<ol>
<li>첫번째 요소</li>
<li>두번째 요소</li>
<li>그럼 안녕</li>
</ol>
</div>

해설

<s_t3>에 넣어둔 것은 티스토리의 스킨을 위한 성격상 넣어 두는 것이고 스크립트를 <body>내에 적당한 곳에 넣어둔다.
그리고 티스토리의 기능을 이용하면 스크립트를 모아두는 것도 가능하다.

스크립트에서 알수 있듯이 클래스 명을 변경하는 것을 통해 아이콘을 두가지 지정할 수 있다.
아이콘이 바뀌는 예는 과거 스킨 Orchid에서 볼수 있다.
접고 여는 예는 이 글의 HTML소스를 보면 알수 있다.

후기:
한편 클릭에 의해서 열고 닫는 기본적인 얼개는 클릭 이벤트(Event)를 받아서 미리 정해둔 영역의 요소를 표시/비표시로 바꾸는 소스코드를 구현하면 됩니다. HTML헬프라고도 불리는 CHM헬프에는 이런 기능이 많이 들어가 있습니다. 헬프를 열어서 세모 글머리표로 되어 있는 부분을 클릭하면 상세 내용이 펼쳐 지는 등의 부분이죠.

이런 경우에 동작 스크립트를 넣어 주는 스크립트를 써서 동일한 ID를 가지고 있으면서도 동작하도록 되어 있는 경우도 있지요. 그렇게 함으로써 재활용도를 높여 주는 것이 가능합니다. 그런데 요새 자바스크립트 기술 방식을 바꾸어 준다는 별명을 지닌 jquery.js나 prototype.js 등의 인기와 영향으로 폴더 구현 스크립트도 간단히 될 것입니다. 다만 여기서는 단지 폴더만을 위해 무거운 스크립트를 삽입하는 것은 피하기 위하여 직접 간단한 스크립트를 예로 올린 것입니다.

저작자표시 비영리 변경금지

'연구개발 이야기' 카테고리의 다른 글

소스코드리뷰(XXXIV) 웹페이지에서 POST 방법 연구 (0)	2011.07.09
소스코드리뷰(XXXIII) 실행 속도를 높이려면 실행을 하지마라 (0)	2011.06.25
OBD II 를 이용한 차량 정보 감시/프로그래밍 (1)	2011.06.14
인스톨러(*.msi) 에 환경변수 경로를 추가하는 방법 (0)	2011.06.11

by 금메달.아빠 on 2011. 6. 14. 23:59

엮인글(TrackBacks): , 댓글(Comments):

주요 단어

금메달.아빠

관리메뉴

글쓰기