jQuery - Simple Tree

jQuery로 트리를 만들어보도록 하자.

트리는 간단한것부터 한없이 복잡한것까지 정말 다양한 기능이 들어갈 수 있어 많이 사용이 되는 컴포넌트이다.

전형적인 트리는 접히고 펼쳐지고, 누르면 다른 어떤 행동을 할수가 있다.

트리를 만들기 위해서는 jQuery외에 jquery.treeview.js가 있어야 한다.

내부적인 동작방식은 LI를

 

1. HTML 구성

트리를 구성하는데 왜 li 태그를 사용할까? 물론 복잡한 테이블이나 동적으로 트리를 생성하는 경우에는 이 방법을 사용하지 않는다. 다만, 이처럼 간단한 트리를 만들때는 Hierarchy구조를 가지는 li Tag가 가장 적합하다.

<ul id="browser" class="filetree">
  <li><span class="folder">Folder 1</span>
   <ul>
    <li><span class="file">Item 1.1</span></li>
   </ul>
  </li>
  <li><span class="folder">Folder 2</span>
   <ul>
    <li><span class="folder">Subfolder 2.1</span>
     <ul id="folder21">
      <li><span class="file">File 2.1.1</span></li>
      <li><span class="file">File 2.1.2</span></li>
     </ul>
    </li>
    <li><span class="file">File 2.2</span></li>
   </ul>
  </li>
  <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
   <ul>
    <li><span class="file">File 3.1</span></li>
   </ul>
  </li>
  <li><span class="file">File 4</span></li>
 </ul>

 

 

 

위의 그림을 보면 트리를 UL과 LI로 간단하게 만들어 보는것이다. 물론 클릭을 해도 접히지는 않는다.

CSS를 사용해서 좀더 트리답게 바꿔보면 다음과 같다.

 

2. CSS 수정

폴더와 파일을 구분하려면 이미지로 구분하는 것이 가장 확실할 것이다. 탐색기를 떠오리면 된다.

CSS파일을 분리를 해야하지만, 여기서는 샘플임으로 분리를 하지 않았다.

<style>
  ul{
   list-style-image:none;
   list-style-position:outside;
   list-style-type:none;
   margin:0;
   padding:0; 
  }
  
  li{
    background-position:0 -176px;
    padding:3px 0 2px 16px;
  }
  
  .span.folder {
   background: url(images/folder.gif) 0 0 no-repeat;
   padding: 0px 0 0px 20px;
  }
  
  .span.file {
   background: url(images/file.gif) 0 0 no-repeat;
   padding: 0px 0 0px 20px; 
  }

 

 

 

좀더 트리가 탐색기처럼 보여지는 것을 알수가 있다. 물론 아직 접히지는 않는다.

백그라운드에 폴더이미지와 파일이미지를 주고, 글자와 이미지가 겹치지 않게 조금 왼쪽으로 20픽셀을 이동을 한 정도이다.

 

<SCRIPT LANGUAGE="JavaScript">
 <!--
 $(document).ready(function(){
  $("#browser").treeview();
 });
 //-->
 </SCRIPT>

 

 

 

 

 

실제로 접히고 펼쳐지는 것을 알수가 있다.

 

 

 

실제 동작방식을 파이어폭스에서 디버깅해서 보면 html상에서 ul과 li태그만으로 구성하였지만, 실제 돌아가는 소스는 li 밑에 div가 생성이 되어있게 된다. 접히면 해당 div를 숨기는 작업을 하기 위해서이다. li태그를 안보이게 하지 않는다.

li태그를 보면 접히거나 펼쳐질때 class 타입을 변경함으로써, CSS에서 접힐때와 펼쳐질때 이미지를 바꿀수 있게 되는것이다.

 

참조

http://www.downloadjavascripts.com/Tree_Menu.aspx

[출처] jQuery - Simple Tree|작성자 하늘밑