2014. 3. 18. 11:07ㆍ개발관련기록/JQuery
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
http://yangyag.tistory.com/65
jquery 를 이용하여 트리 메뉴 구조(tree view)를 만들 수 있다.
jquery 를 이용하여 트리 메뉴를 구현해 놓은 plugin 들이 많은데
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
에서 구현 해 놓은 소스가 가장 간결한것 같아서 이걸 참고로 한 간단한 트리 메뉴를 구성 해 보았다.
Demos 를 누르면 여러가지 트리 메뉴 종류들을 확인 할 수가 있는데
그중에서도 Large 라는 트리 구조 메뉴를 간단하게 소개 하자면 다음과 같다.
위 화면을 구현해 놓은 소스는 다음과 같다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery treeview</title>
<link rel="stylesheet" href="css/jquery.treeview.css" />
<link rel="stylesheet" href="css/screen.css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.cookie.js" type="text/javascript"></script>
<script src="lib/jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#tree").treeview({
collapsed: true,
animated: "medium",
control:"#sidetreecontrol",
persist: "location"
});
})
</script>
</head>
<body>
<div id="sidetree">
<div class="treeheader"> </div>
<div id="sidetreecontrol"><a href="?#">전체 닫기</a> | <a href="?#">전체 열기</a></div>
<ul id="tree">
<li>
<strong>첫번째 메뉴</strong>
<ul>
<li><a href="#">서브메뉴</a></li>
</ul>
</li>
<li>
<strong>두번째 메뉴</strong>
<ul>
<li><a href="#">첫번째 서브메뉴</a></li>
</ul>
<ul>
<li>
<a href="#">두번째 서브메뉴</a>
<ul>
<li><a href="#">서브메뉴 속 첫번째 서브메뉴</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
별다른 설명도 필요없이 위에서 보는 바와 같이 ul 및 li로 메뉴를 구성하면 끝 이다.
처음 로딩시 펼쳐 진 메뉴를 보기를 원하면 자바스크립트 collapsed: true 부분을 collapsed: false 로 바꿔주면 된다.
예제 소스를 첨부하니 참고하길 바란다.
'개발관련기록 > JQuery' 카테고리의 다른 글
| [Jquery]강의 1일차(삼성 SDS) (0) | 2014.05.20 |
|---|---|
| [jquery]를 이용한 Simpleweb (0) | 2014.03.18 |
| 이클립스(Eclipse) jQuery 플러그인(자동완성 지원) JSDT 설치 (0) | 2014.02.07 |
| [JQuey] JQuey 강좌 (0) | 2014.01.08 |
| [jQuery] Jqgrid 설정방법 (0) | 2013.12.12 |