[jQuery treeview] 트리메뉴를 만들어보자!

이번에 소개할 플러그인은 jQuery 트리에 관련된 jquery treeview plugin입니다.

jQuery기반으로 만들어진 트리가 몇가지 더있긴 하지만, 본인은 이 플러그인이 편하다.

플러그인 개발자 사이트 + 트리뷰 다운로드 페이지

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

이 개발자는 트리 플러그인 말고도 여러가지 플러그인을 개발했는데 본인이 트리 플러그인 

이후에 소개할 플러그인은 해당 개발자가 만든  prettydate , validation 플러그인 정도 

추가로 글을 올릴 예정이다.

위의 URL에 접속하여 어김없이 Download 링크를 클릭하여 플러그인을 다운받자.

압축을 해제하면 내부 폴더에 demo 페이지가 있어서 해당 소스를 분석하고 응용을 하면 

되겠지만, 플러그인 소개하는 만큼 심플하게 샘플링을 해보도록 하겠다!!

심플한 구조의 트리를 할것이므로 import할 파일은 몇가지 되지 않는다

ajax로 sync걸어서 트리를 정의하거나 페이지가 refresh 되어도 트리의 포커스를 

유지시키려면 cookie 등... 아니면 추가버튼으로 트리생성등등!!! 

여러가지가 있으니 해당 부분은 개발자 사이트와 demo 소스를 보고 충분히 분석하셔서 

적용하시길~

본인은 위에 이미지처럼 images폴더와 css / js 파일 하나씩 import하도록 하겠다.

jquery는 CDN으로 .... 긔차니즘;;;;

① 시작은 ul로 시작하는거 같음. ul이 기준이고 트리 UI는 class에 지정을 해주어야 기초 완성

② li 태그가 각각의 트리수만큼 나타내는 것인대

    li 밑에 span을주고 클래스명을 folder 또는 file로 준다.

    값을 해당 트리메뉴에 해당하는 텍스트다.

③ 만약 span 다음에 자식 노드를 추가하고자 한다면 span 태그 하단에 ul - li 태그를 

    넣어준다  

    이런식의 같은구조로 depth가 늘어나는 형태이다.

기본 샘플링에 대한 코드를 첨부합니다.

import 파일

<link rel="stylesheet" href="/tree/jquery.treeview.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script src="/tree/jquery.treeview.js" type="text/javascript"></script>

이어서 스크립트 부분이다 

$(function(){
                // 해당 함수를 호출안할시, 트리기능이 동작을 안함
		$("#browser").treeview({});
});

마지막으로 html 태그 부분

	<div id="main">
		<ul id="browser" class="filetree">
			<li>
				<span class="folder">폴더</span>
				<ul>
					<li>
						<span class="file">폴더 - 파일</span>
					</li>
				</ul>
			</li>
			<li>
				<span class="file">파일</span>
			</li>
		</ul>
	</div>

이상!!!!

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!