jquery 로 트리메뉴(treeview) 만들기

스킬(skills)/제이쿼리(jQuery)

jquery 로 트리메뉴(treeview) 만들기

후바스탱크 2013. 12. 17. 21:30

jquery 를 이용하여 트리 메뉴 구조(tree view)를 만들 수 있다.

jquery 를 이용하여 트리 메뉴를 구현해 놓은 plugin 들이 많은데

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

에서 구현 해 놓은 소스가 가장 간결한것 같아서 이걸 참고로 한 간단한 트리 메뉴를 구성 해 보았다.

Demos 를 누르면 여러가지 트리 메뉴 종류들을 확인 할 수가 있는데

그중에서도 Large 라는 트리 구조 메뉴를 간단하게 소개 하자면 다음과 같다.

별다른 설명도 필요없이 위에서 보는 바와 같이 ul 및 li로 메뉴를 구성하면 끝 이다.

<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>

처음 로딩시 펼쳐 진 메뉴를 보기를 원하면 자바스크립트 collapsed: true 부분을 collapsed: false 로 바꿔주면 된다.

예제 소스를 첨부하니 참고하길 바란다.