Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

nkdk의 세상

JS :: 트리구조 폴더 본문

My Programing/HTML and JavaScript

JS :: 트리구조 폴더

nkdk 2008. 6. 16. 10:34

윈도우즈 탐색기와 같은 트리구조의 폴더를 만듭니다.

<html>
<script language="JavaScript">
<!--

function list_view(divs, imgs) {  // 클릭여부에 폴더확장, 축소를 담당
var dspDiv = eval("document.all." + divs + ".style");
var dspImg = eval("document." + imgs);

if (dspDiv.display == "none") {
  dspImg.src = "openfolder.gif";
  dspDiv.display = "block";
} else {
  dspImg.src = "closedfolder.gif";
  dspDiv.display = "none";
}
}

// -->
</script>
<body>
<div name="item1" style="cursor:hand" onclick="list_view('div1', 'img1')">
<table cellpadding=0 cellspacing=0 style="font-size:9pt; color:blue;">
<tr>
  <td><img name="img1" src="closedfolder.gif"></td>
  <td>사용하는 포털사이트</td>
</tr>
</table>
</div>

<div id="div1" style="display:none">
<table cellpadding=0 cellspacing=0 style="font-size:9pt;">
<tr>
  <td><img src="lastnode.gif"><img src="link.gif"></td>
  <td><a href="http://www.naver.com">네이버</a></td>
</tr>
</table>
</div>

<div name="item2" style="cursor;hand" onclick="list_view('div2', 'img2')">
<table cellpadding=0 cellspaciing=0 style="font-size:9pt; color:blue;">
<tr>
  <td><img name="img2" src="closedfolder.gif"></td>
  <td>그외 포털사이트</td>
</tr>
</table>
</div>

<div id="div2" style="display:none;">
<table border=0 cellpadding=0 cellspacing=0 style="font-size:9pt;">
<tr>
  <td><img src="node.gif"><img name="sub2_img1" src="link.gif"></td>
  <td width=100><a href="http://www.google.co.kr">구글</td>
</tr>
<tr>
  <td><img src="lastnode.gif"><img name="sub2_img2" src="link.gif"></td>
  <td width=100><a href="http://www.empas.com">엠파스</a></td>
</tr>
</table>
</div>

</body>
</html>

'My Programing/HTML and JavaScript' Related Articles more