20. 트리메뉴를 사용해 보자. (1) example.html -php
dtree.zip내 홈에 적용하기 간편한 트리메뉴 정복기.
jquery로 만들어져서 css로 작성된 코드보다 보기도 쉽고 꾸미기도 쉽다.(?)
이걸 내 코드랑 어찌 접목을 시킬까나..
먼저 압축을 풀고 살펴볼 것 같으면 여러 개의 파일이 나오는데 일단 example01.html부터 보자.
우리가 필요한 것은 빨간 박스의 메뉴 부분이므로 나머지는 코드에서 지운다.
메뉴를 확장시킨 그림이다.
내 파일과 중복되는 부분은 지우고 고칠 부분은 붉은색으로 바꿨다.
example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
//한글 출력을 위해 추가한다.
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Destroydrop » Javascripts » Tree</title>
//경로는 각자의 디렉토리에 맞게 수정한다.
<link rel="StyleSheet" href="dtree.css" type="text/css"/>
<script type="text/javascript" src="dtree.js"></script>
</head>
<body>
<h1><a href="/">Destroydrop</a> » <a href="/javascripts/">Javascripts</a> » <a href="/javascripts/tree/">Tree</a></h1>
<h2>Example</h2>
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
d = new dTree('d');
//자신의 상황에 맞게 메뉴를 수정한다.
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
document.write(d);
</script>
</div>
<p><a href="mailto:drop@destroydrop.com">©2002-2003 Geir Landrö</a></p>
</body>
</html>
결국 아래 코드만 남는다. 자신의 코드에 추가해 보자.
//없으면 추가
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
//경로에 맞게 수정.
<link rel="StyleSheet" href="dtree.css" type="text/css"/>
<script type="text/javascript" src="dtree.js"></script>
<div class="dtree"> //트리메뉴의 class명이 dtree이다.
<p><a href="javascript: d.openAll();">전체 열기</a> | <a href="javascript: d.closeAll();">닫기 </a></p> //이거 필요 없으면 주석 처리한다.
<script type="text/javascript"> //여기가 제일 핵심 부분이다.
d = new dTree('d');
//자신의 상황에 맞게 메뉴를 수정한다.
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
document.write(d);
</script>
</div> //.dtree 닫기
이미지 처리나 서브메뉴 열기 등은 jquery가 알아서 다 해준다.
'COMPUTER > php' 카테고리의 다른 글
| 22. 트리메뉴를 사용해 보자. (3) css. 우선 순위 문제 -php (0) | 2017.04.13 |
|---|---|
| 21. 트리메뉴를 사용해 보자. (2) api.html -php (0) | 2017.04.13 |
| 19. 절대 주소, 상대 주소의 사용에 대한 고찰. -php- (0) | 2017.04.13 |
| 고찰 3. break, return, exit, die 탈출문 정리 -php (0) | 2017.03.25 |
| 17. Mysql을 이용한 메모장 (7) 페이징 -php- (0) | 2017.03.24 |