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로 메뉴를 구성하면 끝 이다.

.another_category h4 {
    font-size: 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid #E5E5E5 !important;
    padding: 2px 0 6px !important;
}

.another_category h4 a {
    font-weight: bold !important;
}

.another_category table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100% !important;
    margin-top: 10px !important;
}

* html .another_category table {
    width: auto !important;
}

*:first-child + html .another_category table {
    width: auto !important;
}

.another_category th, .another_category td {
    padding: 0 0 4px !important;
}

.another_category th {
    text-align: left;
    font-size: 12px !important;
    font-weight: normal;
    word-break: break-all;
    overflow: hidden;
    line-height: 1.5;
}

.another_category td {
    text-align: right;
    width: 80px;
    font-size: 11px;
}

.another_category th a {
    font-weight: normal;
    text-decoration: none;
    border: none !important;
}

.another_category th a.current {
    font-weight: bold;
    text-decoration: none !important;
    border-bottom: 1px solid !important;
}

.another_category th span {
    font-weight: normal;
    text-decoration: none;
    font: 10px Tahoma, Sans-serif;
    border: none !important;
}

.another_category_color_gray, .another_category_color_gray h4 {
    border-color: #E5E5E5 !important;
}

.another_category_color_gray * {
    color: #909090 !important;
}

.another_category_color_gray th a.current {
    border-color: #909090 !important;
}

.another_category_color_gray h4, .another_category_color_gray h4 a {
    color: #737373 !important;
}

.another_category_color_red, .another_category_color_red h4 {
    border-color: #F6D4D3 !important;
}

.another_category_color_red * {
    color: #E86869 !important;
}

.another_category_color_red th a.current {
    border-color: #E86869 !important;
}

.another_category_color_red h4, .another_category_color_red h4 a {
    color: #ED0908 !important;
}

.another_category_color_green, .another_category_color_green h4 {
    border-color: #CCE7C8 !important;
}

.another_category_color_green * {
    color: #64C05B !important;
}

.another_category_color_green th a.current {
    border-color: #64C05B !important;
}

.another_category_color_green h4, .another_category_color_green h4 a {
    color: #3EA731 !important;
}

.another_category_color_blue, .another_category_color_blue h4 {
    border-color: #C8DAF2 !important;
}

.another_category_color_blue * {
    color: #477FD6 !important;
}

.another_category_color_blue th a.current {
    border-color: #477FD6 !important;
}

.another_category_color_blue h4, .another_category_color_blue h4 a {
    color: #1960CA !important;
}

.another_category_color_violet, .another_category_color_violet h4 {
    border-color: #E1CEEC !important;
}

.another_category_color_violet * {
    color: #9D64C5 !important;
}

.another_category_color_violet th a.current {
    border-color: #9D64C5 !important;
}

.another_category_color_violet h4, .another_category_color_violet h4 a {
    color: #7E2CB5 !important;
}
</style>

<script type="application/ld+json">
    {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://yangyag.tistory.com/65","name":null},"url":"https://yangyag.tistory.com/65","headline":"jquery 로 트리메뉴(treeview) 만들기","description":"jquery 를 이용하여 트리 메뉴 구조(tree view)를 만들 수 있다. jquery 를 이용하여 트리 메뉴를 구현해 놓은 plugin 들이 많은데 http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ 에서 구현 해 놓은 소스가 가장 간결한것 같아서 이걸 참고로 한 간단한 트리 메뉴를 구성 해 보았다. Demos 를 누르면 여러가지 트리 메뉴 종류들을 확인 할 수가 있는데 그중에서도 Large 라는 트리 구조 메뉴를 간단하게 소개 하자면 다음과 같다. 별다른 설명도 필요없이 위에서 보는 바와 같이 ul 및 li로 메뉴를 구성하면 끝 이다. 전체 닫기 | 전체 열기 첫번째 메뉴 서브메뉴 두번째 메뉴 첫번째 서브메뉴 두번째 서브메뉴 서브메뉴 속 첫..","author":{"@type":"Person","name":"후바스탱크","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2013-12-17T21:30:31+09:00","dateModified":"2015-02-11T11:24:05+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}}
</script>

<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-fda325030f650f8bb6efdfbc900c54d5af6cf662/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-fda325030f650f8bb6efdfbc900c54d5af6cf662/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-fda325030f650f8bb6efdfbc900c54d5af6cf662/static/style/comment.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-fda325030f650f8bb6efdfbc900c54d5af6cf662/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-fda325030f650f8bb6efdfbc900c54d5af6cf662/static/script/common.js"></script>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-fda325030f650f8bb6efdfbc900c54d5af6cf662/static/script/comment.js" defer=""></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 로 바꿔주면 된다.

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

treeview.zip

'스킬(skills) > 제이쿼리(jQuery)' 카테고리의 다른 글

jQuery 항상 최신버전으로 사용하기 (0)	2014.01.24
[jQuery] 간단한 ajax 예제 (0)	2014.01.23
each 작업 중 번호 추출 (0)	2014.01.23
checkbox 관련 기능 정리 (0)	2014.01.23
문자 및 숫자 체크 플러그인 (0)	2013.05.07

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

예전에는 제가 작업했던 내용을 백업 해 놓는 정도로 의미로 메모장처럼 복사/붙여넣기 형식으로 사용했었습니다. 그러나 요즘엔 직접 하나하나 작성하며 한번 더 머릿속에 기억하려 노력하니 블로그 관리하는 재미가 늘어났습니다. 제가 작성한 글로 인해 누군가가 도움 받았으면 좋겠습니다.

launch4j, spring file upload, 스프링 파일 업로드, java 실행파일 만들기, com.sun.mail.smtp.SMTPTransport.close lock, spring file download, spring session, 스프링 세션, 리눅스 파일 각각 압축, 제우스 war, java mail lock, redirect session, com.sun.mail.smtp.SMTPTransport.close, jeus war 디플로이, div 가운데 정렬, 제우스 와르 배포, 제우스 war 배포, html 코드정리, 스프링 파일 다운로드, jeus war deploy,

Today :
Yesterday :

Hello Brother!