jQuery 트리, 폴더형 위젯 플러그인 5가지

BogoFolders

폴더형 구조를 가진 플러그인입니다.
아 름답게(?) 생기지는 못하지만 CSS로 얼마든지 꾸밀 수 있는 부분이죠. 코드압축하지 않은 파일크기는 11Kb 가량이지만, 코드 반 이상을 차지하고 있는 메뉴얼 같은 주석을 제거하면 5Kb 가량으로 줄어들고, 코드압축(minimized)하면 2.5Kb까지 줄어듭니다.

안내 및 다운로드 : http://wanderinghorse.net/computing/javascript/jquery/bogofolders
데모 페이지 : http://wanderinghorse.net/computing/javascript/jquery/bogofolders/demo-bogofolders.html



treeView깔끔한 트리구조의 플러그인입니다.

list 태그(ol.ul등)를 트리구조로 렌더링하므로 특별한 구조를 취한다거나, JSON데이터를 갖출 필요도 없습니다. 쿠키를 이용하여 최종 선택된 항목을 기억하여 페이지 이동시에도 유지합니다.

Ajax 이용도 가능합니다.

트리구조를 표현하는 외의 기능은 없으나, 항목이 많은 구조에서도 비교적 빠르게 랜더링하고, 파일크기도 작습니다.

파일크기는 경량화된 코드기준으로 3.3Kb 가량입니다.



안내 및 다운로드 : http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
메뉴얼 : http://docs.jquery.com/Plugins/Treeview



dynatree

jQuery 플러그인 저장소에 있는 제가 가장 눈독들이고 있는 트리 플러그인입니다.

ul, ol 등 리스트 태그를 트리구조로 랜더링하는 것은 물론, Ajax를 지원하고 다양한 이벤트 콜백을 지원합니다.
무엇보다 키보드로 항목을 선택하고 하위 트리를 펼칠 수 있습니다.

안내 페이지 : http://wwwendt.de/tech/dynatree/index.html
다운로드 : http://code.google.com/p/dynatree/downloads/list
매뉴얼 : http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html
데모 : http://wwwendt.de/tech/dynatree/doc/sample-2.html



CheckTree트리형이지만, 앞에 체크박스를 달고 있습니다.
동영상 코덱팩 등을 설치할 때 보았던 구조입니다.

상/하위 구조를 가지고 수 많은 항목의 선택을 요구하는 페이지에서 유용하게 사용될 수 있으리라 생각됩니다. 상위 항목을 선택하면 하위 항목이 자동적으로 전체 선택됩니다.

경량화 되지 않은 파일크기는 8Kb 가량입니다.




안내 및 매뉴얼 : http://static.geewax.org/checktree/index.html
다운로드 : http://code.google.com/p/jquery-checktree/downloads/list



simpleTreedTree라는 스크립트와 아이콘이 동일해서 jQuery플러그인으로 컨버팅한건가 싶었지만, 다른것 같네요.

Ajax를 지원하지만, 마크업에 의존성이 있습니다.

트리항목을 이동할 수 있기에 카테고리 등의 구조를 작성하는 페이지에 사용하기에 유용할 듯 합니다.

경량화하지 않은 파일크기는 14Kb 정도입니다.


안내, 다운로드 : http://news.kg/wp-content/uploads/tree/