如何用JavaScript写树型目录菜单,救急啊!

yingmuhuadao 2003-06-01 11:29:01
<HTML>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;

if (ver4) {
with (document) {
write("<STYLE TYPE='text/css'>");
if (NS4) {
write(".parent {position:absolute; visibility:visible}");
write(".child {position:absolute; visibility:visible}");
write(".regular {position:absolute; visibility:visible}")
}
else {
write(".child {display:none}")
}
write("</STYLE>");
}
}

function getIndex(el) {
ind = null;
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id == el) {
ind = i;
break;
}
}
return ind;
}

function arrange() {
nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.visibility != "hide") {
whichEl.pageY = nextY;
nextY += whichEl.document.height;
}
}
}

function initIt(){
if (!ver4) return;
if (NS4) {
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
}
arrange();
}
else {
divColl = document.all.tags("DIV");
for (i=0; i<divColl.length; i++) {
whichEl = divColl(i);
if (whichEl.className == "child") whichEl.style.display = "none";
}
}
}

function expandIt(el) {
if (!ver4) return;
if (IE4) {
whichEl = eval(el + "Child");
if (whichEl.style.display == "none") {
whichEl.style.display = "block";
}
else {
whichEl.style.display = "none";
}
}
else {
whichEl = eval("document." + el + "Child");
if (whichEl.visibility == "hide") {
whichEl.visibility = "show";
}
else {
whichEl.visibility = "hide";
}
arrange();
}
}
onload = initIt;
</script>
</font></p>

///////////////////请留意下面着段代码

<div id="KB1Parent" class="parent">    <a href="#" onClick="expandIt('KB1'); return false" ><img src="img/plus.gif" border=0>文件夹一</a></div>
<div id="KB1Child" class="child">     <a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt=""><img src="img/open.gif" border=0>页面一</a><br>
     <a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt="" width="15" height="11"><img src="img/open.gif" border=0>页面二</a><br>
     <a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt="" width="15" height="11"><img src="img/open.gif" border=0>页面三</a></div>



/////////请留意上


<div id="KB2Parent" class="parent">    <a href="#" onClick="expandIt('KB2'); return false" ><img src="img/plus.gif" border=0>文件夹二</a></div>
<div id="KB2Child" class="child">     <a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt="" width="15" height="11"><img src="img/open.gif" border=0>页面一</a><br>
     <a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt=""><img src="img/open.gif" border=0>页面二</a><br>
     <a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt="" width="15" height="11"><img src="img/open.gif" border=0>页面三</a></div>
<div id="KB3Parent" class="parent">    <a href="#" onClick="expandIt('KB3'); return false" ><img src="img/plus.gif" border=0>文件夹三</a></div>
<div id="KB3Child" class="child">      <a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt=""><img src="img/open.gif" border=0>页面一</a><br>
      <a href="sample.htm" target="_blank" ><img src="img/open.gif" border=0>页面二</a><br>
     <a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt=""><img src="img/open.gif" border=0>页面三</a></div>
</html>
...全文
100 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
youyou74 2003-09-15
  • 打赏
  • 举报
回复
<script language="JavaScript">
var mmenus = new Array();
var misShow = new Boolean();
misShow=false;
var misdown = new Boolean();
misdown=false;
var mnumberofsub=0;
var musestatus=false;
var mpopTimer = 0;
mmenucolor='#ffffff';mfontcolor='MenuText';mmenuoutcolor='#ffcc00';mmenuincolor='#ffcc00';mmenuoutbordercolor='#ffffff';mmenuinbordercolor='#FFFFFF';mmidoutcolor='#ffcc00';mmidincolor='#ffcc00';mmenuovercolor='#0000ff';mitemedge='0';msubedge='1';mmenuunitwidth=82;mmenuitemwidth=140;mmenuheight=20;mmenuwidth='100%';mmenuadjust=0;mmenuadjustV=0;mfonts='font-color:#ffcc00;font-family: 宋体; font-size: 10pt; color:#ffcc00; ';mcursor='hand';
var swipeSteps = 4;
var swipemsec = 25;
var swipeArray = new Array();
function swipe(el, dir, steps, msec) {
if (steps == null) steps = swipeSteps;
if (msec == null) msec = swipemsec;
if (el.swipeIndex == null)
el.swipeIndex = swipeArray.length;
if (el.swipeTimer != null)
window.clearTimeout(el.swipeTimer);
swipeArray[el.swipeIndex] = el;
el.style.clip = "rect(-99999, 99999, 99999, -99999)";
if (el.swipeCounter == null || el.swipeCounter == 0) {
el.orgLeft = el.offsetLeft;
el.orgTop = el.offsetTop;
el.orgWidth = el.offsetWidth;
el.orgHeight = el.offsetHeight;
}
el.swipeCounter = steps;
el.style.clip = "rect(0,0,0,0)";
window.setTimeout("repeat(" + dir + "," + el.swipeIndex + "," + steps + "," + msec + ")", msec);
}
function repeat(dir, index, steps, msec) {
el = swipeArray[index];
var left = el.orgLeft;
var top = el.orgTop;
var width = el.orgWidth;
var height = el.orgHeight;
if (el.swipeCounter == 0) {
el.style.clip = "rect(-99999, 99999, 99999, -99999)";
return;
}
else {
el.swipeCounter--;
el.style.visibility = "visible";
switch (dir) {
case 2:
el.style.clip = "rect(" + height*el.swipeCounter/steps + "," + width + "," + height + "," + 0 + ")";
el.style.top = top - height*el.swipeCounter/steps;
break;
case 8:
el.style.clip = "rect(" + 0 + "," + width + "," + height*(steps-el.swipeCounter)/steps + "," + 0 + ")";
el.style.top = top + height*el.swipeCounter/steps;
break;
case 6:
el.style.clip = "rect(" + 0 + "," + width + "," + height + "," + width*(el.swipeCounter)/steps + ")";
el.style.left = left - width*el.swipeCounter/steps;
break;
case 4:
el.style.clip = "rect(" + 0 + "," + width*(swipeSteps - el.swipeCounter)/steps + "," + height + "," + 0 + ")";
el.style.left = left + width*el.swipeCounter/steps;
break;
}

el.swipeTimer = window.setTimeout("repeat(" + dir + "," + index + "," + steps + "," + msec + ")", msec);
}
}
var mtmpleft="";
var mtmptop="";
超级大笨狼 2003-09-13
  • 打赏
  • 举报
回复
仿照csdn左面的菜单的ASP+数据库无限级树菜单代码分享

近来问无限级数据库树菜单人很多,我就自己做了一个仿照csdn左面的菜单,自己暂时不用,完全是给大家分享的,要数据库和代码文件请到www.ymdg.com/tree.rar下载,如果有人提供空间存放那是最好了。
本文完全采用大家熟悉的ASP(VBS)制作,过写日子我再写一个基于XML技术的给大家。
QQ:28963147,email:panyuguang962@sohu.com
感谢CSDN和全体网友!
说明:
Access数据库
● 数据库名:tree
● 表名:tree
● 字段名的设计
ID 文本类型 编码
Name 文本类型 节点文字
HyperLink 文本类型 相关信息
---------------------------------------------------
ID | Name | HyperLink
---------------------------------------------------
1_1_1 | ASP | http://www.csdn.net
---------------------------------------------------
1_1_1_1 | DHTML | http://www.csdn.net
---------------------------------------------------
1_2_2 | JAVA | http://www.csdn.net
---------------------------------------------------
1_1_2 | JavaScript | http://www.csdn.net
---------------------------------------------------
1_2_1 | VB | http://www.csdn.net
---------------------------------------------------
1_2_1_2 | VBA | http://www.csdn.net
---------------------------------------------------
1_1 | WEB开发 | http://www.csdn.net
---------------------------------------------------
1 | WWW.CSDN.net | http://www.csdn.net
---------------------------------------------------
1_2_1_1 | 基础类 | http://www.csdn.net
---------------------------------------------------
1_3_1 | 基础类 | http://www.csdn.net
---------------------------------------------------
1_2 | 开发语言 | http://www.csdn.net
---------------------------------------------------
1_1_1_2 | 内建对象 | http://www.csdn.net
---------------------------------------------------
1_3 | 数据库 | http://www.csdn.net
----------------------------------------------------
文件:nolimited.asp经简单测试好用!代码如下:
<html>
<head>
<META name=VI60_defaultClientScript content=VBScript>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>asp树的研究</title>
</head>
<style type="text/css">
<!--
.aa {
font-size: 14px;
color: #000000;
text-align: center;
vertical-align: middle;
letter-spacing: 0px;
word-spacing: 0px;
}
-->
</style>
<body bgcolor="DEE3F7">
<%
dim cn,rs,SQL ,Para,NumChild
set cn=server.CreateObject("ADODB.connection")
set rs=server.createobject("ADODB.recordset")
set rs1=server.createobject("ADODB.recordset")
cn.Open "Driver={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("tree.mdb")
SQL="Select * from tree order by ID"
rs.open SQL,cn,3,2
do while not rs.EOF
SQL="Select ID from tree where ID like '" & rs("ID") & "%' and ID<>'" & rs("ID") & "' order by ID"
Para=rs("ID") & "|"
NumChild=0
rs1.open SQL,cn, 3,2
NumChild=rs1.RecordCount
do while not rs1.EOF
Para =Para & rs1("ID") & "|"
rs1.MoveNext
loop
Para=cstr(trim(left(Para,len(Para)-1)))
rs1.Close
%>
<table id="T<%=rs("ID")%>"
border=1
cellpadding=0
cellspacing=0
bordercolor="#DEE3F7"
class="aa"
abbr="<%=Para%>"
summary=<%=checkid(rs("ID"))%>
style="cursor:hand"
onClick="vbs:subtree '<%=Para%>'" >

<tr>
<td width="<%=17+checkid(rs("ID"))*20%>"
height="20" align="right">
<table width="20" height="20" border="1" cellpadding="0" cellspacing="0" bordercolor="#DEE3F7">
<tr>

<td align="center" valign="middle" bordercolor="#000000" id="R<%=rs("ID")%>" ><%if NumChild=0 then Response.Write "." else Response.Write "-"%></td>
</tr>
</table>
</td>

<td height="20"
nowrap
bordercolor="#FFFFFF"
onMouseOver="vbs:me.bgcolor='#CCCCCC':me.bordercolor='#999999'"
onMouseOut="vbs:me.bgcolor='#DEE3F7':me.bordercolor='#ffffff'"
title="<%=rs("HyperLink")%>">
<%=rs("Name")%></td>
</tr>
</table>


<%
rs.MoveNext
loop
rs.Close:set rs=nothing
cn.Close:set cn=nothing
function checkid(x)
dim Tempnum
Tempnum=0
for i=1 to len(x)
if mid(x,i,1)="_" then
Tempnum=Tempnum+1
end if
next
checkid=Tempnum
end function


%>
<script language=VBS>
sub subtree(Client_para)
if instr(Client_para,"|")=0 then exit sub
Myarray=split(Client_para,"|")
Mytext=eval("R" & Myarray(0) & ".innertext")
select case Mytext
case "+"
document.all.item("R" & Myarray(0)).innertext="-"
for i=1 to ubound(Myarray)
if eval("T" & Myarray(i) & ".summary")-eval("T" & Myarray(0) & ".summary")=1 then
document.all.item("T" & Myarray(i)).style.display="block"
end if
if eval("T" & Myarray(i) & ".summary")-eval("T" & Myarray(0) & ".summary")>1 then
document.all.item("T" & Myarray(i)).style.display="none"
end if
next
case "-"
document.all.item("R" & Myarray(0)).innertext="+"
for i=1 to ubound(Myarray)
if eval("T" & Myarray(i) & ".summary")-eval("T" & Myarray(0) & ".summary")>=1 then
document.all.item("T" & Myarray(i)).style.display="none"
if eval("R" & Myarray(i) & ".innertext")="-" then
document.all.item("R" & Myarray(i)).innertext="+"
end if
end if
next
end select
set Myarray=nothing
end sub

Sub document_onselectstart
document.selection.clear
End Sub

if isobject(eval("T1")) then
subtree document.all("T1").abbr
subtree document.all("T1").abbr
end if
</script>

</html>




xinyaoxp 2003-08-12
  • 打赏
  • 举报
回复
up
qjrein 2003-06-09
  • 打赏
  • 举报
回复
218.31.124.197/tree.rar
直接发布看效果
showmessagebox 2003-06-07
  • 打赏
  • 举报
回复
http://webfx.eae.net/dhtml/xtree/index.html
filixlu 2003-06-07
  • 打赏
  • 举报
回复
关注

laker_tmj 2003-06-06
  • 打赏
  • 举报
回复
我會寫個更好的!
fason 2003-06-06
  • 打赏
  • 举报
回复
写得很好,收藏先
kuangxiang007 2003-06-06
  • 打赏
  • 举报
回复
<Script Language="JavaScript">
//Name﹕無限層樹狀
//Design:LiuZXIT
//OverTime:2003/3/19
//Note:在IE5.i上測試通過

var strStyle='<style type="text/css">'
strStyle+='span.SelectIng{color:#ff00ff;border:solid 1pt #666666;padding:0.5pt;height:4px;background-color:#cccccc;}'
strStyle+='span.NoSelect{color:#000084;border:solid 1pt #ffffff;padding:0.5pt;height:4px;background-color:#ffffff;}'
strStyle+='span.SelectEd{color:#D02090;border:solid 1pt #888888;padding:0.5pt;height:4px;background-color:#f3f3f3;}'
strStyle+='</style>'
document.write(strStyle)

var myRs=new Array(), selectItem;
function compare(a,b) {return parseInt(a[1]) - parseInt(b[1])}
function InsertItem(s){myRs[myRs.length++] = s.split(/,/);}

function ExCloAll(n){
var d=document.all('0'), e=d.all.tags('div')
for (i=0;i<e.length;i++)e[i].style.display=(n==1?'block':'none')
e=d.all.tags('p')
for (i=0;i<e.length;i++){if(ChkExist(e[i].children[1].value))e[i].children[0].innerText=(n==1?'- ':'+ ')}
}

function ExCloItem(){
var c,e=event.srcElement, p=e.parentElement.children
if(e.myHref!=''){
alert((e.myTarget!=''?e.myTarget:'window')+'.location='+e.myHref) //要改成連接到某頁只需把alert改成eval即可
//如果你不想觸發展合動作只需在這里加return;
}
else{window.status='no href'};
if(selectItem!=null)selectItem.className='NoSelect';
e.className='SelectEd'
selectItem=event.srcElement;
if(c=document.all(e.value)){
p[0].innerText=(p[0].innerText=='+ '?'- ':'+ ')
c.style.display=(c.style.display=='none'?'block':'none')
}else{p[0].innerText='- '}
}
function ExCloItem2(){
var c,e=event.srcElement, p=e.parentElement.children
if(c=document.all(p[1].value)){
e.innerText=(e.innerText=='+ '?'- ':'+ ')
c.style.display=(c.style.display=='block'?'none':'block')
}else e.innerText='- '
}

function OutItem(){
var e=event.srcElement
if(selectItem != '')e.className=(selectItem==e?'SelectEd':'NoSelect')
else e.className='NoSelect'
}

function ChkExist(n){
n=parseInt(n)
if((n<myRs[0][1])||(n>myRs[myRs.length-1][1]))return false
var a,b,c,x=0, y=parseInt(myRs.length/2), z=myRs.length-1
while((x!=y)&&(y!=z)){
a=myRs[x][1], b=myRs[y][1], c=myRs[z][1]
if(n==a||n==b||n==c)return true
if(n>b)x=y;
else z=y;y=parseInt(x+z);
y=parseInt((x+z)/2);
}
return false
}

function drawTree(n){
if(n==0){
myRs.sort(compare)
document.write('<p style="font:10pt;cursor:hand;"><span onclick="ExCloAll(1)">全部展開</span>  <span onclick="ExCloAll(0)">全部合攏</span></p>')
}
if (ChkExist(n)!=true)return
document.write('<div id="'+n+'" style="font:10pt;cursor:hand;'+(n!=0?'position:relative;left:20;display:none;':'')+'">')
for(var i=0;i<myRs.length;i++){
if (parseInt(myRs[i][1])>n)break;
if (myRs[i][1]==n){
document.write('<p style="margin:0pt;"><span style="vertical-align:top;" onclick="ExCloItem2()">'+(ChkExist(myRs[i][0])?'+ ':'- ')+'</span>')
document.write('<span onclick="ExCloItem()" myHref="'+(myRs[i].length>3?myRs[i][3]:'')+'" myTarget="' + (myRs[i].length>4?myRs[i][4]:'') +'" value="'+myRs[i][0]+'" class="NoSelect" onmouseout="OutItem()" onmouseover="this.className=\'SelectIng\'">'+myRs[i][2]+'</span></p>')
if (myRs[i].length >3)document.write('</a>');
drawTree(myRs[i][0])
}
}
document.write('</div>')
}

InsertItem('1,0,根目錄1')
InsertItem('11,1,子目錄1')
InsertItem('111,11,孫目錄1,b.htm,parent.frmMain')
InsertItem('1111,111,曾孫目錄,c.htm,top')
InsertItem('11111,1111,玄孫目錄,d.htm,window')
InsertItem('12,1,子目錄2')
InsertItem('2,0,根目錄2')
InsertItem('21,2,子目錄A,d.htm')
InsertItem('22,2,子目錄B')
InsertItem('3,0,根目錄3')
drawTree(0)
</Script>
z_yanjie 2003-06-06
  • 打赏
  • 举报
回复
留下email
我有无限级的数据库支持的!!!
发给你!!
Ilyj 2003-06-06
  • 打赏
  • 举报
回复
up,给我加分哦
Ilyj 2003-06-06
  • 打赏
  • 举报
回复
http://www.destroydrop.com/javascripts/tree/
nik_Amis 2003-06-02
  • 打赏
  • 举报
回复
up
fason 2003-06-01
  • 打赏
  • 举报
回复
http://fason.nease.net/zhuanti/tree/XML.zip
yingmuhuadao 2003-06-01
  • 打赏
  • 举报
回复
我对javascript一巧不同,这个页面只能显一级数据!如:
+目录1
.....数据1
.....数据2
+目录2
.....数据1
.....数据2
如何能将其该给可分多层目录如:

+目录1
.....+目录11
.......数据
.....+目录12
.......数据
+目录2
.....+目录21
.......数据
.....+目录22
.......数据

请帮帮忙,谢谢!

87,988

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧