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

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

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

예제 I

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


예제 II

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

  1. 클릭하면 닫히고
  2. 다시 클릭하면 열린다
  3. 그럼 안녕

HTML 의 예

  1. <s_t3>
  2. <script type="text/javascript">
  3. //<![CDATA[
  4. function clickshow(elem,ID) {
  5.  var menu = document.getElementById(ID);
  6.  if (elem.className !='closed') {
  7.     elem.className = 'closed';
  8.     menu.style.display = "none";
  9.  } else {
  10.     elem.className ='opened';
  11.     menu.style.display ="block";
  12. }}
  13. //]]>
  14. </script>
  15. </s_t3>

  16. <s_sidebar_element><!-- 카테고리 -->
  17. <h3 class="closed" onclick="clickshow(this,'categories')">처음에는 닫힌 폴더</h3>
  18. <div id="categories" style="display: none;">
  19. <ol>
  20. <li>첫번째 요소</li>
  21. <li>두번째 요소</li>
  22. <li>그럼 안녕</li>
  23. </ol>
  24. </div>
  25. <br>

  26. <h3 onclick="clickshow(this,'trackblock')">열어두었다가 닫는 폴더</h3>
  27. <div id="trackblock">
  28. <ol>
  29. <li>첫번째 요소</li>
  30. <li>두번째 요소</li>
  31. <li>그럼 안녕</li>
  32. </ol>
  33. </div>

해설

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

스크립트에서 알수 있듯이 클래스 명을 변경하는 것을 통해 아이콘을 두가지 지정할 수 있다.
아이콘이 바뀌는 예는 과거 스킨 Orchid에서 볼수 있다.
접고 여는 예는 이 글의 HTML소스를 보면 알수 있다.
후기:
한편 클릭에 의해서 열고 닫는 기본적인 얼개는 클릭 이벤트(Event)를 받아서 미리 정해둔 영역의 요소를 표시/비표시로 바꾸는 소스코드를 구현하면 됩니다. HTML헬프라고도 불리는 CHM헬프에는 이런 기능이 많이 들어가 있습니다. 헬프를 열어서 세모 글머리표로 되어 있는 부분을 클릭하면 상세 내용이 펼쳐 지는 등의 부분이죠.

이런 경우에 동작 스크립트를 넣어 주는 스크립트를 써서 동일한 ID를 가지고 있으면서도 동작하도록 되어 있는 경우도 있지요. 그렇게 함으로써 재활용도를 높여 주는 것이 가능합니다. 그런데 요새 자바스크립트 기술 방식을 바꾸어 준다는 별명을 지닌 jquery.js나 prototype.js 등의 인기와 영향으로 폴더 구현 스크립트도 간단히 될 것입니다. 다만 여기서는 단지 폴더만을 위해 무거운 스크립트를 삽입하는 것은 피하기 위하여 직접 간단한 스크립트를 예로 올린 것입니다.
by 금메달.아빠 on 2011.06.14 23:59 주요 단어: , ,
  • BlogIcon R_abit 2011.06.15 00:10 신고 주소 수정/삭제 답글

    죄송한데요 제가 진짜 초보라서 그런데요...........ㅠ계속읽어도 이해가 안가서요..
    저 위에 있는 소스를 복사해서 적용시키면 되는건가요?;;;;;어떻게 해야하는건지 ㅠㅠ죄송합니다......흐

    • BlogIcon 금메달.아빠 2011.06.15 00:19 신고 주소 수정/삭제

      태그의 쌍을 맞추어 복사해서 사용해 보세요.
      그리고 클릭하려는 문자열 부분을 class="closed" onclick="clickshow(this,'categories')" 의 요소로 감싸 두시면 됩니다.

      중요한 것은 자바스크립트 부분을 복사해 두어야 한다는 점... 본문 해설에서도 말했듯이 ... 입니다.

      직접 스킨에 적용하지 말고 PC에 html 파일을 만들어 보고 연습한 후에 스킨을 손대시는 것이 안전합니다. 시간 절약도 되구요.

      오늘은 이만... 잘 모르는 부분은 나중에 댓글이나 트랙백에 남겨 주세요.

체크하면 비공개 댓글이 됩니다