如何用javascript创建树形菜单

我也要，我的email为[email protected]多谢

wd_318(想当程序员)
我也想要，谢谢了！[email protected]

给你个例子吧，能用的就帮我加分吧
<HTML><head>
<meta http-equiv="Content-Type" content="text/html" charset="gb2312">
<link rel="stylesheet" href="css\lanbao.css" type="text/css">
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript src=check.js>

</SCRIPT>
</HEAD><BODY  name="menu">
<SCRIPT LANGUAGE=javascript>

</SCRIPT><TABLE WIDTH="120" style="HEIGHT: 61px; WIDTH: 111px">
<tr >
<td class="pgtitle" align="left" >兰宝集团</td>
<tr height=20></tr>
</TABLE>
<SCRIPT LANGUAGE=javascript>

</SCRIPT><table border=0 width="120">
<DIV ><A href="#" onclick="expandIt(1); return false"><font color=Black size=4>●设  置</font></A>
  </DIV>
<div id="KB9Child" class="child">
  <A href="midright.asp" target=right>客  户</A><BR>
  <A href="midright1.asp" target=right>存  货</A><BR>
  <A href="midright2.asp" target=right>供 应 商</A><BR>
  <A href="userright.asp" target=right>设置用户权限</A><BR>
  <A href="dptmaintain.asp" target=right>部门维护</A></div><DIV><A href="#" onclick="expandIt(2); return false"><font color=black size=4>●单  据</font></A>
</DIV>
<div id="KB1Child" class="child">
  <A href="produceplan.asp" target=right>生产计划(总)</A><BR>
  <A href="colligatequery.asp" target=right>综合查询</A></div><DIV id=d3><A href="#" onclick="expandIt(3); return false"><font color=black size=4>●销售管理</font></A>
</DIV>
<div id="KB2Child" class="child">
  <A href="shopcompact.asp" target=right>销售合同录入</A><BR>
  <A href="shopcompactquery.asp" target=right>销售合同查询</A><BR>
  <A href="guestlink.asp" target=right>客户联系表</A><BR>
  <A href="shopdo.asp" target=right>销售处理</A></div><DIV ><A href="#" onclick="expandIt(4); return false"><font color=black size=4>●采购管理</font></A>
  </DIV>
<div id="KB3Child" class="child">
  <A href="buyplan.asp" target=right>采购计划</A><BR>
  <A href="buycompact.asp" target=right>采购合同录入</A><BR>
  <A href="buycompactquery.asp" target=right>采购合同查询</A><BR>
  <A href="providertable.asp" target=right>供应商联系表</A></div><DIV ><A href="#" onclick="expandIt(5); return false"><font color=black size=4>●库存管理</font></A>
  </DIV>
<div id="KB4Child" class="child">
  <A href="stockinput.asp" target=right>原材料入库</A><BR>
  <A href="productinputjudge.asp" target=right>成品入库</A><BR>
  <A href="stockquery.asp" target=right>物品明细查询</A><BR>
  <A href="stockproductcount.asp" target=right>物品数量查询</A><BR>
  <A href="stockoutjudge.asp" target=right>物品出库</A><BR>
  <A href="stockmove.asp" target=right>移库操作</A></div><DIV><A href="#" onclick="expandIt(6); return false"><font color=black size=4>●其  它</font></A>
</DIV>
<div id="KB5Child" class="child">
  <A href="editpass.asp" target=right>更改密码</A><BR>
  <A href="messegeboard.htm" target=right>留言板</A><BR>
  <A href="help.htm" target=right>帮  助</A><BR>
  <A href="out.asp" target=_top>退  出</A></div>
</table>

</BODY>

<html xmlns:ie>
<head>



<style>
ie\:tree {display: block;}
ie\:treeitem {font-weight: expression(this.children.length > 1 ? 'bold' : 'normal');
border-top: 2px
solid white;display: block; margin-left: 20px; visibility: inherit; overflow:
hidden; width: 100%}
ie\:label {display: inline; cursor: hand}
</style>
</head>
<body style="font-family: verdana; font-size: 12px">
<h3>可以拖动的tree</h3>
<ie:tree id=TheTree>
<ie:treeitem><ie:label id=Label1>1.0 First Set</ie:label>
<ie:treeitem><ie:label>1.1 Megalosaurus</ie:label></ie:treeitem>
<ie:treeitem><ie:label>1.2 Iguanodon</ie:label></ie:treeitem>
<ie:treeitem><ie:label>1.3 Hylaeosaurus</ie:label></ie:treeitem>
<ie:treeitem><ie:label>1.4 Tyrannosaurus rex</ie:label></ie:treeitem>
</ie:treeitem>
<ie:treeitem><ie:label>2.0 Later Set</ie:label>
<ie:treeitem><ie:label>2.1 Mammoths</ie:label></ie:treeitem>
<ie:treeitem><ie:label>2.2 Mastodons</ie:label>
<ie:treeitem><ie:label>2.2.1 Plesiosaurs</ie:label></ie:treeitem>
<ie:treeitem><ie:label>2.2.2 Ichthyosaurs</ie:label></ie:treeitem>
<ie:treeitem><ie:label>2.2.3 Dimetrodon </ie:label></ie:treeitem>
<ie:treeitem><ie:label>2.2.4 Sinapsid</ie:label></ie:treeitem>
</ie:treeitem>
<ie:treeitem><ie:label>2.3 Stegosaurus</ie:label></ie:treeitem>
<ie:treeitem><ie:label>2.4 Apatosaurus</ie:label></ie:treeitem>
<ie:treeitem><ie:label>2.5 Mammals</ie:label></ie:treeitem>
<ie:treeitem><ie:label>2.6 Tetrapods</ie:label>
<ie:treeitem><ie:label>2.6.1 Amphibians</ie:label></ie:treeitem>
<ie:treeitem><ie:label>2.6.2 Whales</ie:label></ie:treeitem>
<ie:treeitem><ie:label>2.6.3 Crocodiles</ie:label></ie:treeitem>
<ie:treeitem><ie:label>2.6.4 Sea Turtles</ie:label></ie:treeitem>
</ie:treeitem>
<ie:treeitem><ie:label>2.7 Late Permian</ie:label></ie:treeitem>
<ie:treeitem><ie:label>2.8 Mesozoic</ie:label></ie:treeitem>
</ie:treeitem>
<ie:treeitem><ie:label>3.0 Archosaurs</ie:label>
<ie:treeitem><ie:label>3.1 Mandibular fenestra</ie:label></ie:treeitem>
<ie:treeitem><ie:label>3.2 Pointed Snout</ie:label></ie:treeitem>
<ie:treeitem><ie:label>3.3 Theocodant Tooth Implantation</ie:label></ie:treeitem>
<ie:treeitem><ie:label>3.4 Modified Ankle</ie:label></ie:treeitem>
</ie:treeitem>
<ie:treeitem><ie:label>4.0 Mesozoic</ie:label>
<ie:treeitem><ie:label>4.1 Middle Animals</ie:label>
<ie:treeitem><ie:label>4.1.1 add</ie:label>
<ie:treeitem><ie:label>4.1.1.1 add</ie:label></ie:treeitem>
<ie:treeitem><ie:label>4.1.1.2 add</ie:label>
</ie:treeitem>
</ie:treeitem>
</ie:treeitem>
</ie:tree>
<script>
// variables for drag/drop
var dragElement = null;
var dropElement = null;
var currOver = null; // variables for expanding/collapsing
var flyCount = 5;
var msecs = 5;
var currCount = 0; // event handler hookup
TheTree.onmousedown = preselect;
TheTree.ondragstart = dragstart;
TheTree.ondragend = dragend;
TheTree.ondragenter = dragover;
TheTree.ondragover = dragover;
TheTree.ondragend = dragend;
TheTree.ondrop = dragdrop;
document.onclick = click; // drag/drop code // method called as we start drag/drop
function dragstart() {
var e;
e = window.event.srcElement;
if (e.tagName != "label")
return false; dragElement = e.parentElement;
} // called as we mouse over - note that there is special handling for dragover code
// as dragleave doesn't track the toElement/fromElement as mouseover/mouseout does
function dragover() {
if (window.event.srcElement.tagName != "treeitem")
return; if (!dragElement.contains(window.event.srcElement)) {
if (currOver) {
currOver.style.borderTopColor = "";
}
currOver = window.event.srcElement;
window.event.srcElement.style.borderTopColor = "black";
event.returnValue = false;
}
} // called when drag is ended - always
function dragend() {
if (currOver) {
currOver.style.borderTopColor = "";
}
} // called on drop
function dragdrop() {
if (currOver) {
currOver.style.borderTopColor = "";
}
t = currOver;
t.parentElement.insertBefore(dragElement, t);
} // needed to select items so they can be dragged
// drag drop only supported on selection and images
function preselect() {
var e; e = window.event.srcElement;
if (e.tagName != "label") {
return;
}
r = document.body.createTextRange();
r.moveToElementText(e);
r.select();
window.event.cancelBubble = true;
} // beginning of expand/collapse code // called to handle document click, starts toggling
function click() {
if (window.event.srcElement.tagName != "label") {
return;
}
if (window.event.srcElement.parentElement.children.length > 1) {
toggleState(window.event.srcElement.parentElement);
}
} // toggles expanding/collapse state of an element - does setup
function toggleState(e) {
e.oHeight = e.scrollHeight + 2;
e.style.posHeight = e.offsetHeight; if (e.scrollHeight >= e.offsetHeight) {
growIt(e);
} else {
shrinkIt(e);
}
} // called to initiate growing an element
function growIt(e) {
currCount = 0; window.setTimeout("doGrow(" + e.uniqueID + ");", msecs);
} // called to initiate shrinking an element
function shrinkIt(e) {
currCount = 0;
window.setTimeout("doShrink(" + e.uniqueID + ");", msecs);
} // inner loop for growing an object
function doGrow(e) {
var dh;
var lineHeight = e.children[0].offsetHeight; currCount++; dh = e.oHeight / flyCount;
if (e.style.posHeight != e.oHeight) {
e.style.posHeight += dh;
} if (currCount < flyCount) {
window.setTimeout("doGrow(" + e.uniqueID + ");", msecs);
}
else {
e.style.height = "";
}
} // inner loop for shrinking an object
function doShrink(e) {
var dh, dw;
var lineHeight = e.children[0].offsetHeight;
var p; currCount++; dh = (e.oHeight - lineHeight) / flyCount; e.style.posHeight -= dh; if (currCount < flyCount) {
window.setTimeout("doShrink(" + e.uniqueID + ");", msecs);
}
else {
e.style.posHeight = lineHeight;
}
}
</script>
</body>
</html>

my email: [email protected]
能不能封装成几个简单的函数？

你发我信箱[email protected]
我一收到立刻给

调试易

如何用javascript创建树形菜单

解决方案 »