이전에 포스팅 하였던 '[Tc] 텍스트큐브 카테고리 목록 펼치기'를 보충할 겸 하여 이전 글을 업데이트 하였습니다.
위에 접어둔 이전 포스팅의 내용을 한 줄로 요약하자면,
<body onload="expandTree();">
이었습니다.
하지만 이 방법은 페이지 로딩이 완료된 이후에 카테고리 목록을 펼치게 되므로 문제가 있을 수 있는데요,
추가적으로 이를 페이지를 로딩하면서 펼치게 만드려면 skin.html에서 카테고리 위젯이 있는 부분에 다음의 소스를 붙여 넣어주시면 됩니다.
<script language="JavaScript">
try {
expandTree();
} catch(e) {
}
</script>
제 블로그의 경우를 예시로 들면 다음과 같습니다.
<s_sidebar_element>
<!-- 카테고리 -->
<div class="category">
<h3><a onclick="toggleLayer('category')" onfocus="this.blur()">Category</a></h3>
<div id="category" style="display:block">
<div class="data">
</div>
</div>
</div>
<script language="JavaScript">
try {
expandTree();
} catch(e) {
}
</script>
</s_sidebar_element>
분홍색 배경이 추가된 부분입니다.
expandTree()는 텍스트큐브 계열의 설치형 블로그의 카테고리 모듈에 포함되어 있는 함수로,
try {} catch() {} 구문은 카테고리 목록의 로딩이 정상적으로 이루어 지지 않았을 경우에 발생하는 에러를 위한 부분입니다.
특정 카테고리를 펼쳐주려면 위의 코드 중 푸른색 배경 부분을 다음 코드로 대체해 주면 됩니다.
<script language="javascript">
toggleFolder('카테고리의 고유 ID');
</script>
카테고리의 고유 ID는 페이지에서 소스보기를 통해 toggleFolder로 검색하셔서 카테고리의 순서를 따져가며 찾아보시면 크게 어렵지 않게 찾으실 수 있습니다.
(예를 들자면, a class="click" onclick="toggleFolder('5')" 이런 식으로 적혀 있거든요.)
파이어폭스처럼 선택한 부분의 소스만을 볼 수 있는 기능이 있는 브라우저라면 좀 더 쉽게 찾으실 수 있습니다.
펼치기를 원하는 카테고리만을 드래그하여 선택한 이후에 선택 부분의 소스를 보면 바로 나오니까요.
위에서 언급한 두 요소를 종합적으로 적용하여 이용하면 이런 식으로도 이용이 가능합니다.
<s_sidebar_element>
<!-- 카테고리 -->
<div class="category">
<h3><a onclick="toggleLayer('category')" onfocus="this.blur()">Category</a></h3>
<div id="category" style="display:block">
<div class="data">
</div>
</div>
</div>
<script language="JavaScript">
try {
expandTree();
} catch(e) {
}
toggleFolder('카테고리의 고유 ID');
</script>
</s_sidebar_element>
위 예시 처럼 적용하시면 특정 카테고리를 제외한 모든 카테고리는 펼쳐진 상태가 됩니다.
(접어두고자 하는 카테고리보다 펼쳐 두고자 하는 카테고리가 더 많을때는 위와 같은 방식이 나을거라 생각해요.)
위에 접어둔 이전 포스팅의 내용을 한 줄로 요약하자면,
<body onload="expandTree();">
이었습니다.
하지만 이 방법은 페이지 로딩이 완료된 이후에 카테고리 목록을 펼치게 되므로 문제가 있을 수 있는데요,
추가적으로 이를 페이지를 로딩하면서 펼치게 만드려면 skin.html에서 카테고리 위젯이 있는 부분에 다음의 소스를 붙여 넣어주시면 됩니다.
<script language="JavaScript">
try {
expandTree();
} catch(e) {
}
</script>
제 블로그의 경우를 예시로 들면 다음과 같습니다.
<s_sidebar_element>
<!-- 카테고리 -->
<div class="category">
<h3><a onclick="toggleLayer('category')" onfocus="this.blur()">Category</a></h3>
<div id="category" style="display:block">
<div class="data">
|
</div>
</div>
<script language="JavaScript">
try {
expandTree();
} catch(e) {
}
</script>
</s_sidebar_element>
분홍색 배경이 추가된 부분입니다.
expandTree()는 텍스트큐브 계열의 설치형 블로그의 카테고리 모듈에 포함되어 있는 함수로,
try {} catch() {} 구문은 카테고리 목록의 로딩이 정상적으로 이루어 지지 않았을 경우에 발생하는 에러를 위한 부분입니다.
특정 카테고리를 펼쳐주려면 위의 코드 중 푸른색 배경 부분을 다음 코드로 대체해 주면 됩니다.
<script language="javascript">
toggleFolder('카테고리의 고유 ID');
</script>
카테고리의 고유 ID는 페이지에서 소스보기를 통해 toggleFolder로 검색하셔서 카테고리의 순서를 따져가며 찾아보시면 크게 어렵지 않게 찾으실 수 있습니다.
(예를 들자면, a class="click" onclick="toggleFolder('5')" 이런 식으로 적혀 있거든요.)
파이어폭스처럼 선택한 부분의 소스만을 볼 수 있는 기능이 있는 브라우저라면 좀 더 쉽게 찾으실 수 있습니다.
펼치기를 원하는 카테고리만을 드래그하여 선택한 이후에 선택 부분의 소스를 보면 바로 나오니까요.
위에서 언급한 두 요소를 종합적으로 적용하여 이용하면 이런 식으로도 이용이 가능합니다.
<s_sidebar_element>
<!-- 카테고리 -->
<div class="category">
<h3><a onclick="toggleLayer('category')" onfocus="this.blur()">Category</a></h3>
<div id="category" style="display:block">
<div class="data">
|
</div>
</div>
<script language="JavaScript">
try {
expandTree();
} catch(e) {
}
toggleFolder('카테고리의 고유 ID');
</script>
</s_sidebar_element>
위 예시 처럼 적용하시면 특정 카테고리를 제외한 모든 카테고리는 펼쳐진 상태가 됩니다.
(접어두고자 하는 카테고리보다 펼쳐 두고자 하는 카테고리가 더 많을때는 위와 같은 방식이 나을거라 생각해요.)
'컴퓨터' 카테고리의 다른 글
| Highslide - 자바스크립트 기반의 강력한 썸네일 뷰어 (0) | 2009.10.23 |
|---|---|
| [플러그인] 이미지 갤러리 플러그인 (외부 이미지) (0) | 2009.10.22 |
| 원 저작자 분의 요청으로 삭제하였습니다. (9) | 2009.10.19 |
| [플러그인] 트래픽 보기 플러그인 (2) | 2009.10.17 |
| [플러그인] 카테고리의 다른 글 출력 플러그인 (0) | 2009.10.15 |
| Wise Installation Studio 7 SP1 (0) | 2009.10.01 |
| 오피스2003 SP3, 한글2007 경량화 버전 제작 후기 (2) | 2009.10.01 |
| Giveaway of the Day (0) | 2009.09.30 |
| 그냥 경량화 작업 주저리.. (0) | 2009.09.28 |
| [Utility] nLite v1.4.9.1 (윈도우 통합 CD제작 툴) (1) | 2009.09.23 |
IE9 이상으로 브라우저를 업그레이드하거나, 크롬, 파이어폭스 등 최신 브라우저를 이용해주세요.