애니메이션 카테고리

이 글에서 적고자 하는 것은 아래 그림의 플러스나 마이너스 아이콘을 클릭하면 애니메이션 되면서 폴더가 펼쳐지거나 접히는 것이다. 데모는 여기에서 볼 수 있고 티스토리 블로그에 적용한 것을 보고자 한다면 이 블로그 카테고리보면 알 수 있다. 동적인 애니메이션이니 멋있을 것이다. 

알아야 할 것은 카테고리에 속한 글 수 색 등 여러 가지는 내가 CSS로 변경했다. 원래 카테고리는 위 그림과 같다. 애니메이션이 아닌 정적으로 펼쳐지고  접히는 것에 대한 소스와 데모는 http://destroydrop.com/javascripts/tree/를 보면 된다. 이 글을 동적인 애니메이션에 대한 것이다.

현재 없지만 예전 카테고리 형태를 고르는 것이 있었는데 그때도 정적이었다.  티스토리 블로그를 하다가 쉬었다 돌아오면 없어지는 기능이 많다. 카테고리 형태를 선택하는 옵션을 없앤 이유는 티스토리 운영자가 정확히 알 것이다. 내 생각은 최근 추가된 스킨에 안 맞는 카테고리이고 구식이었기 때문에 없어진 것 같다. 

그럼 아래에서 어떻게 했는지 예전 기억을 되살려 적어보려 한다. 예전에 했던 것이라 오류가 있을지 모른다.

1. 먼저 거기에서 제공한 파일을 아래와 같은 다운로드 받았다. 그리고 파일의 압축을 풀어 스킨편집(HTML 편집)의 파일업로드에 올렸다. 참고로 파일을 올리면 images라는 폴더에 올라간다는 점을 알아뒀으면 한다. 

Classic-Animated-Directory-Tree-Plugin-with-jQuery-dTree.zip

2. 스크립트와 CSS를 삽입한다. 그런데 나는 이 블로그를 부트스트랩 3.*를 사용하여 만들었으므로 jquery를 재사용했다. 부트스트랩을 사용한다면 jquery를 사용한다는 것을 알 것이다. 그래서 따로 jquery를 사용하지 않고 거기에 필요한 jquery 버전인 1.11.1 버전을 사용하기로 했다. 하지만 이 글을 보는 사람은 아래처럼 소스를 </body> 태그 위에 삽입해야 한다.

<link href="./images/dtree.css" rel="stylesheet" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="./images/dtree.js"></script>

3. 그리고 카테고리를 활성화하기 위해 스크립트를 다시 삽입한다. 나는 다른 폴더를 열려 있을 때 계속 열려 있도록 아래 빨간 문장의 옵션을 ture라 하지 않고 false라 하고 있다. 또한 아래 소스를 </body> 태그 위에 삽입한다.

<script type="text/javascript">

$(document).ready(function(){

$(".dTree").dTree({

  closeSameLevel: true, // close same level nodes

  useCookie: true, // enable cookie support

  });

});

</script>

그래서 최종적으로 스크립트와 CSS 소스를 아래 그림처럼 </body>위에 삽입했다. 2번에서 말했듯 jQuery는 재사용해서 뺐다고 적었다.

4. 카테고리에 class="dTree"라고 추가한다. 나는 아래 그림처럼 설정했다. panel-body는 상관하지 말았으면 한다. 왜냐하면 그것은 부트스트랩이기 때문에 이 글과 아무 상관없다. class에 dTree를 적어주고 카테고리를 모두 펼쳐주기 위해 _category_list_라고 해준다. _category_라고만 하면 카테고리를 접히는 것이다. 요즘에 제공하는 스킨의 카테고리 치환자는 거의 _category_list_일 것이다. 옛날 스킨은 거의 _category_다. 

티스토리 스킨가이드를 보니 _category_는 폴더 형식의 카테고리라고 됐고 _category_list_는 리스트 형식의 카테고리라고 설명한 것을 확인했다.

이 소스는 티스토리 블로그만이 아니라 웹사이트에서도 그대로 적용할 수 있다. 이것에 대한 소스와 적용에 대해서는 여기에서 볼 수 있다.