当前页面: 开发资料首页 → Javascript 专题 → 基于JavaScript的树形菜单
基于JavaScript的树形菜单
摘要: 基于JavaScript的树形菜单
<textarea readonly style="border:none;font-family:Courier New;line-height:150%;width:760px;overflow-y:visible">
基于JavaScript的树形菜单<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
1 前言
显然，树形菜单在网络应用中是很重要的。我也到过国外专业的菜单开发网站看过，但是感觉可维护性很差。由于工作中的一些需要，我认为自己开发一个维护性好，接口简单的树形菜单是十分有用的。本文将详细介绍作者开发的基于JavaScript的树形菜单，并附上源代码。
2 基本功能
2.1 跨平台性能好
2.2 可维护性好
2.3 接口简单
2.4 能够表达子菜单
2.5 菜单显示时间不大于1ms/菜单项，响应时间亦如此。
3 基本分析
3.1 要求可维护性好，需采用完全的面向对象方法。
3.2 树形菜单完全由“菜单项”组成，“菜单项”由表达其类型（有无子菜单项）的开关图和表达其内容的文本，以及表达其事件响应的行为构成。开关图负责响应菜单项是否展开的事件。
3.3 树形菜单以及每个菜单项都使用table元素表示
4 设计
4.1 整个程序整合为一个treedefiniton.js文件，其中包含两个类（js称之为对象）。一个类是Tree,另一个是TreeItem,二者是一对多的关系。当然测试程序是一个test.htm文件。
4.2 程序的设计文档用reference.xml表示，版本信息（包含作者）用versions.xml表示。所有xml的结构尚未固定，仅有用于显示的reference.xsl以及versions.xsl.这些程序的源代码限于篇幅，未公布于此。
4.3 TreeItem设计 <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="all"> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: x-large" align="middle" colspan="2">TreeItem</td></tr> <tr> <td> <table style="BORDER-RIGHT: pink 4px dashed; BORDER-TOP: pink 4px dashed; BORDER-LEFT: pink 4px dashed; BORDER-BOTTOM: pink 4px dashed" cellspacing="8" rules="all"> <tr> <td> <table style="BORDER-LEFT-COLOR: green; BORDER-BOTTOM-COLOR: green; BORDER-TOP-COLOR: green; BORDER-RIGHT-COLOR: green" cellspacing="0" cellpadding="0" rules="all"> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: x-large" align="middle">TreeItem</td></tr> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle">public methods</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">TreeItem()</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">addItem()</td></tr> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle">public attributes</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">text</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">action</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">children</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">tree</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">type</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">id</td></tr></table></td></tr></table></td> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="all"> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="all"> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle">Description</td></tr> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium">An instance of this class is corresponding to an menu item on a tree menu.</td></tr></table></td></tr> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="all"> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle" colspan="3">public methods</td></tr> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="rows"> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: large" colspan="4">TreeItem(text,action) </td></tr> <tr> <td> <table style="WIDTH: 100%"> <tr> <td width="16"></td> <td width="16"></td> <td></td></tr> <tr> <td></td> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; COLOR: red" colspan="2">functions</td></tr> <tr> <td colspan="2"></td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green">CONSTRUCTOR</td></tr></table></td></tr> <tr> <td> <table style="WIDTH: 100%"> <tr> <td width="16"></td> <td width="16"></td> <td width="16"></td> <td width="120"></td> <td></td></tr> <tr> <td></td> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; COLOR: red" colspan="4">arguments</td></tr> <tr> <td colspan="2"></td> <td style="COLOR: blue" colspan="3">text</td></tr> <tr> <td colspan="3"></td> <td>type:</td> <td style="COLOR: green">string</td></tr> <tr> <td colspan="3"></td> <td>description:</td> <td style="COLOR: green">to be shown</td></tr> <tr> <td colspan="2"></td> <td style="COLOR: blue" colspan="3">action</td></tr> <tr> <td colspan="3"></td> <td>type:</td> <td style="COLOR: green">string</td></tr> <tr> <td colspan="3"></td> <td>description:</td> <td style="COLOR: green">The action will be performed when the item is clicked. It will be the onclick property of a html element. CAUTION:DON'T PUT CHAR ' TO IT. </td></tr></table></td></tr></table></td></tr> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="rows"> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: large" colspan="4">addItem() </td></tr> <tr> <td> <table style="WIDTH: 100%"> <tr> <td width="16"></td> <td width="16"></td> <td></td></tr> <tr> <td></td> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; COLOR: red" colspan="2">functions</td></tr> <tr> <td colspan="2"></td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green">Let the menuitems specified by the arguments be the subitems of this menuitem. Their orders are determined by the orders of the correponding arguments. </td></tr></table></td></tr> <tr> <td> <table style="WIDTH: 100%"> <tr> <td width="16"></td> <td width="16"></td> <td width="16"></td> <td width="120"></td> <td></td></tr> <tr> <td></td> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; COLOR: red" colspan="4">arguments</td></tr> <tr> <td colspan="2"></td> <td style="COLOR: blue" colspan="3"></td></tr> <tr> <td colspan="3"></td> <td>type:</td> <td style="COLOR: green">TreeItem</td></tr> <tr> <td colspan="3"></td> <td>description:</td> <td style="COLOR: green">There is no limit on the number of arguments, but each argument should be an instance of Class MenuItem. </td></tr></table></td></tr></table></td></tr></table></td></tr> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="all"> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle" colspan="4">public attributes</td></tr> <tr> <td align="middle"><input style="WIDTH: 100%" type="button" value="number"></td> <td align="middle"><input style="WIDTH: 100%" type="button" value="name"></td> <td align="middle"><input style="WIDTH: 100%" type="button" value="type"></td> <td align="middle"><input style="WIDTH: 100%" type="button" value="description"></td></tr> <tr> <td style="FONT-SIZE: large" align="middle">1</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">text</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">set by the first argument of CONSTRUCTOR. Only for Class Tree.</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">2</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">action</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">set by the second argument of CONSTRUCTOR. Only for Class Tree.</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">3</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">children</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">Array</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">all subitems, set by addChild() method. Only for Class Tree.</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">4</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">tree</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">Tree</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">the tree to which the item belongs. Only for Class Tree.</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">5</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">type</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">should be one of Tree.FILE_TYPE and Tree.FOLDER_TYPE. Only for Class Tree.</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">6</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">id</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">id property of the element corresponding to this item. Only for Class Tree.</td></tr></table></td></tr></table></td></tr></table>
4.4 Tree设计 <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="all"> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: x-large" align="middle" colspan="2">Tree</td></tr> <tr> <td> <table style="BORDER-RIGHT: pink 4px dashed; BORDER-TOP: pink 4px dashed; BORDER-LEFT: pink 4px dashed; BORDER-BOTTOM: pink 4px dashed" cellspacing="8" rules="all"> <tr> <td> <table style="BORDER-LEFT-COLOR: green; BORDER-BOTTOM-COLOR: green; BORDER-TOP-COLOR: green; BORDER-RIGHT-COLOR: green" cellspacing="0" cellpadding="0" rules="all"> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: x-large" align="middle">Tree</td></tr> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle">CONSTANTS</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">VERSION</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">AUTHOR</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">FILE_IMAGE</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">FOLDER_IMAGE</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">UNFOLD_IMAGE</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">VERSIONS</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">REFERENCE</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">FILE_TYPE</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">FOLDER_TYPE</td></tr> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle">public methods</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">Tree()</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">getHtml()</td></tr> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle">public attributes</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">indent</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">withSelfItem</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">itemColor</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">itemBackground</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">selectedItemBackground</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">root</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">selfItem</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">versionsItem</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">referenceItem</td></tr> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle">private attributes</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">name</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">html</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">elementClicked</td></tr> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle">private methods</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">findItem</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">findUnderlines</td></tr> <tr> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">click</td></tr></table></td></tr></table></td> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="all"> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="all"> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle">Description</td></tr> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium">An instance of this class is corresponding to a tree menu.</td></tr></table></td></tr> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="all"> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle" colspan="5">CONSTANTS</td></tr> <tr> <td align="middle"><input style="WIDTH: 100%" type="button" value="number"></td> <td align="middle"><input style="WIDTH: 100%" type="button" value="name"></td> <td align="middle"><input style="WIDTH: 100%" type="button" value="type"></td> <td align="middle"><input style="WIDTH: 100%" type="button" value="value"></td> <td align="middle"><input style="WIDTH: 100%" type="button" value="description"></td></tr> <tr> <td style="FONT-SIZE: large" align="middle">1</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">VERSION</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">"1.08"</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">version number</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">2</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">AUTHOR</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">"liaomingxue"</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">author name</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">3</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">FILE_IMAGE</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">"images/file.gif"</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">relative path of an image file for menu item with no subitems</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">4</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">FOLDER_IMAGE</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">"images/fold.gif"</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">relative path of an image file for menu item having visible subitems</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">5</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">UNFOLD_IMAGE</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">"images/unfold.gif"</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">relative path of an image file for menu item with its invisible subitems </td></tr> <tr> <td style="FONT-SIZE: large" align="middle">6</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">VERSIONS</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">"aboutTree/versions.xml"</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">relative path of file used to show what progresses happened in all versions of this program.</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">7</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">REFERENCE</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">"aboutTree/class.xml"</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">relative path of file used to introduce the design of the classes of this program.</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">8</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">FILE_TYPE</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">"FILE"</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">an option for type atrribute of Class TreeItem</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">9</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">FOLDER_TYPE</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">"FOLDER"</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">an option for type atrribute of Class TreeItem</td></tr></table></td></tr> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="all"> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle" colspan="3">public methods</td></tr> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="rows"> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: large" colspan="4">Tree(instanceName,text,action) </td></tr> <tr> <td> <table style="WIDTH: 100%"> <tr> <td width="16"></td> <td width="16"></td> <td></td></tr> <tr> <td></td> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; COLOR: red" colspan="2">functions</td></tr> <tr> <td colspan="2"></td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green">CONSTRUCTOR</td></tr></table></td></tr> <tr> <td> <table style="WIDTH: 100%"> <tr> <td width="16"></td> <td width="16"></td> <td width="16"></td> <td width="120"></td> <td></td></tr> <tr> <td></td> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; COLOR: red" colspan="4">arguments</td></tr> <tr> <td colspan="2"></td> <td style="COLOR: blue" colspan="3">instanceName</td></tr> <tr> <td colspan="3"></td> <td>type:</td> <td style="COLOR: green">string</td></tr> <tr> <td colspan="3"></td> <td>description:</td> <td style="COLOR: green">the name of the instance 'this' </td></tr> <tr> <td colspan="2"></td> <td style="COLOR: blue" colspan="3">text</td></tr> <tr> <td colspan="3"></td> <td>type:</td> <td style="COLOR: green">string</td></tr> <tr> <td colspan="3"></td> <td>description:</td> <td style="COLOR: green">the text property of root item of Tree</td></tr> <tr> <td colspan="2"></td> <td style="COLOR: blue" colspan="3">action</td></tr> <tr> <td colspan="3"></td> <td>type:</td> <td style="COLOR: green">string</td></tr> <tr> <td colspan="3"></td> <td>description:</td> <td style="COLOR: green">the action property of root item of Tree</td></tr></table></td></tr></table></td></tr> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="rows"> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: large" colspan="4">getHtml() </td></tr> <tr> <td> <table style="WIDTH: 100%"> <tr> <td width="16"></td> <td width="16"></td> <td></td></tr> <tr> <td></td> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; COLOR: red" colspan="2">functions</td></tr> <tr> <td colspan="2"></td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green">to get html property of Tree</td></tr></table></td></tr></table></td></tr></table></td></tr> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="all"> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle" colspan="4">public attributes</td></tr> <tr> <td align="middle"><input style="WIDTH: 100%" type="button" value="number"></td> <td align="middle"><input style="WIDTH: 100%" type="button" value="name"></td> <td align="middle"><input style="WIDTH: 100%" type="button" value="type"></td> <td align="middle"><input style="WIDTH: 100%" type="button" value="description"></td></tr> <tr> <td style="FONT-SIZE: large" align="middle">1</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">indent</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">integer</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">for indenting subitem, greater than 0</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">2</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">withSelfItem</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">boolean</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">if true, show selfItem</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">3</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">itemColor</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">text color of item, eg. "#888888"</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">4</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">itemBackground</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">background color of item</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">5</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">selectedItemBackground</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">background color of item clicked</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">6</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">root</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">TreeItem</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">root item</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">7</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">selfItem</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">TreeItem</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">for demonstrating information about this program</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">8</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">versionsItem</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">TreeItem</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">selfItem's subitem to tell information about all versions</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">9</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">referenceItem</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">TreeItem</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">selfItem's subitem to show Classes designing</td></tr></table></td></tr> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="all"> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle" colspan="4">private attributes</td></tr> <tr> <td align="middle"><input style="WIDTH: 100%" type="button" value="number"></td> <td align="middle"><input style="WIDTH: 100%" type="button" value="name"></td> <td align="middle"><input style="WIDTH: 100%" type="button" value="type"></td> <td align="middle"><input style="WIDTH: 100%" type="button" value="description"></td></tr> <tr> <td style="FONT-SIZE: large" align="middle">1</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">name</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">set by argument 1</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">2</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">html</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">the content(in html format) to be shown</td></tr> <tr> <td style="FONT-SIZE: large" align="middle">3</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">elementClicked</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">string</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">hold the id property of which item clicked</td></tr></table></td></tr> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="all"> <tr> <td style="FONT-SIZE: large; COLOR: #20b2aa" align="middle" colspan="3">private methods</td></tr> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="rows"> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: large" colspan="4">findItem(id) </td></tr> <tr> <td> <table style="WIDTH: 100%"> <tr> <td width="16"></td> <td width="16"></td> <td width="16"></td> <td width="120"></td> <td></td></tr> <tr> <td></td> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; COLOR: red" colspan="4">arguments</td></tr> <tr> <td colspan="2"></td> <td style="COLOR: blue" colspan="3">id</td></tr> <tr> <td colspan="3"></td> <td>type:</td> <td style="COLOR: green">string</td></tr> <tr> <td colspan="3"></td> <td>description:</td> <td style="COLOR: green">the id of what item you want to find</td></tr></table></td></tr></table></td></tr> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="rows"> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: large" colspan="4">findUnderlines(str) </td></tr> <tr> <td> <table style="WIDTH: 100%"> <tr> <td width="16"></td> <td width="16"></td> <td width="16"></td> <td width="120"></td> <td></td></tr> <tr> <td></td> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; COLOR: red" colspan="4">arguments</td></tr> <tr> <td colspan="2"></td> <td style="COLOR: blue" colspan="3">str</td></tr> <tr> <td colspan="3"></td> <td>type:</td> <td style="COLOR: green">string</td></tr> <tr> <td colspan="3"></td> <td>description:</td> <td style="COLOR: green"></td></tr></table></td></tr> <tr> <td> <table style="WIDTH: 100%"> <tr> <td width="16"></td> <td width="16"></td> <td width="120"></td> <td></td></tr> <tr> <td></td> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; COLOR: red" colspan="3">return</td></tr> <tr> <td colspan="2"></td> <td>type:</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">integer</td></tr> <tr> <td colspan="2"></td> <td>description:</td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green; FONT-STYLE: italic">return how many underlines '_' occur in the argument</td></tr></table></td></tr></table></td></tr> <tr> <td> <table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="rows"> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: large" colspan="4">click(itemID) </td></tr> <tr> <td> <table style="WIDTH: 100%"> <tr> <td width="16"></td> <td width="16"></td> <td></td></tr> <tr> <td></td> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; COLOR: red" colspan="2">functions</td></tr> <tr> <td colspan="2"></td> <td style="FONT-WEIGHT: lighter; FONT-SIZE: small; COLOR: green">respond to item click event</td></tr></table></td></tr> <tr> <td> <table style="WIDTH: 100%"> <tr> <td width="16"></td> <td width="16"></td> <td width="16"></td> <td width="120"></td> <td></td></tr> <tr> <td></td> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; COLOR: red" colspan="4">arguments</td></tr> <tr> <td colspan="2"></td> <td style="COLOR: blue" colspan="3">itemID</td></tr> <tr> <td colspan="3"></td> <td>type:</td> <td style="COLOR: green">string</td></tr> <tr> <td colspan="3"></td> <td>description:</td> <td style="COLOR: green">id property of the clicked item</td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table>
4.5 一些补充
4.5.1对于TreeItem的public attributes,显然是不能都作为public的，这里这样处理的原因是我认为程序的功能尚未达到需要严格定义的程度。
4.5.2 根菜单项。树形菜单只有一个根菜单项，其他所有菜单项都是它的子菜单项。
4.5.3 菜单项的id。根菜单项的id仅含一个下划线，其余类推之。
4.5.4 用到的图标资源为，类似于csdn，是我自己画的。
5 性能
在菜单项达到48项时候，显示时间基本达到要求，响应时间好于要求。
6 总结
自己并不是专业做这个的，所以公布这个源代码，希望能够让大家做好这个东西。目前最新版本是1.12. 任何进一步改进该程序的程序员，我将在versions.xml中注明该程序员。原则上每次改进，版本号将增加0.01.限于个人能力，所有改进只能通过e-mail，且，所有改进都将在这篇文章中公布。我的email是mxliao@mails.gscas.ac.cn。暂时由我管理所有改进。如有朋友提供空间，我将感激不尽，并将适时采取其他程序管理方法。
由于本程序的设计者和实现者都是我一人，以及时间有限，所以这里设计和实现的衔接可能有不完备或者不一致的地方，请见谅。
7 测试程序源代码片断（test.htm）
var tree=new Tree("tree","Words Expert","");
tree.root.addChild((Add=new TreeItem("Add","")),
(Recite=new TreeItem("Recite","")),
(View=new TreeItem("View","")),
(Help=new TreeItem("Help","")),
(Config=new TreeItem("Config","")),
(File=new TreeItem("File","")),
(About=new TreeItem("About Words Expert","")));
Recite.addChild((seeChinese=new TreeItem("See Chinese","")),
(seeEnglish=new TreeItem("See English","")),
(lastOrder=new TreeItem("Last order","")));
seeChinese.addChild((reciteChineseAlpha=new TreeItem("Alpha","")),
(reciteChineseFamiliarity=new TreeItem("Familiarity","")),
(reciteChineseTime=new TreeItem("Time","")));
reciteChineseAlpha.addChild(
(new TreeItem("Alpha Order","")),
(new TreeItem("Reverse Alpha Order","")));
reciteChineseFamiliarity.addChild(
(new TreeItem("Familiarity","")),
(new TreeItem("Reverse Reverse Familiarity","")));
reciteChineseTime.addChild(
(new TreeItem("Time","")),
(new TreeItem("Reverse Time","")));
seeEnglish.addChild((reciteEnglishAlpha=new TreeItem("Alpha","")),
(reciteEnglishFamiliarity=new TreeItem("Familiarity","")),
(reciteEnglishTime=new TreeItem("Time","")));
reciteEnglishAlpha.addChild(
(new TreeItem("Alpha Order","")),
(new TreeItem("Reverse Alpha Order","")));
reciteEnglishFamiliarity.addChild(
(new TreeItem("Familiarity","")),
(new TreeItem("Reverse Reverse Familiarity","")));
reciteEnglishTime.addChild(
(new TreeItem("Time","")),
(new TreeItem("Reverse Time","")));
View.addChild(
(lastOrder=new TreeItem("Last Order","")),
(alpha=new TreeItem("Alpha","")),
(familiarity=new TreeItem("Familiarity","")),
(time=new TreeItem("Time","")));
alpha.addChild(
(new TreeItem("Alpha Order","")),
(new TreeItem("Reverse Alpha Order","")));
familiarity.addChild(
(new TreeItem("Familiarity Order","")),
(new TreeItem("Reverse Familiarity Order","")));
time.addChild(
(new TreeItem("Time Order","")),
(new TreeItem("Reverse Time Order","")));
File.addChild((new TreeItem("Save wordbook","")), (new TreeItem("Save config","")),(new TreeItem("Save All","")),(new TreeItem("Save All & Exit","")),
(new TreeItem("Exit Without Saving","")),
(new TreeItem("Backup wordbook","")));
tree.show();
8 TreeDefinition.js源代码（7K）
function TreeItem(text,action)
{
// public attributes
this.text=text;
this.action=action;
this.children=new Array();
this.tree=null;
this.type="";
this.id="";
// public methods
this.addChild=TreeItem_addChild;
}
function Tree(instanceName,text,action)
{
// constants
this.VERSION="1.12";
this.AUTHOR="liaomingxue";
this.FILE_IMAGE="images/file.gif";
this.FOLDER_IMAGE="images/fold.gif";
this.UNFOLD_IMAGE="images/unfold.gif";
this.VERSIONS="aboutTree/versions.xml";
this.REFERENCE="aboutTree/class.xml";
this.FILE_TYPE="FILE";
this.FOLDER_TYPE="FOLDER";
// priavate attributes
this.name=instanceName;
this.html="";
this.elementClicked="";
// public attributes
this.indent=20;
this.withSelfItem=true;
this.itemColor="#000000";
this.itemBackground="#aaafff";
this.itemOverColor="#0000ff";
this.selectedItemBackground="#ccaacc";
this.root=new TreeItem(text,action);
this.root.id="TREEMENU"+"_0";
this.root.tree=this;
this.selfItem=new TreeItem("ABOUT TREE MENU","");
this.versionsItem=new TreeItem("versions","window.open(\""+this.VERSIONS+"\")");
this.referenceItem=new TreeItem("programmer reference","window.open(\""+this.REFERENCE+"\")");
// private methods
this.findItem=Tree_findItem;
this.findUnderlines=Tree_findUnderlines;
this.click=Tree_click;
// public methods
this.show=TREE_show;
this.getHtml=function getHtml(){return this.html;}
}
function Tree_findUnderlines(str)
{
var i,j;
for(i=0,j=0;i return j;
}
function TreeItem_addChild()
{
var child;
var i;
for(i=0;i {
child=arguments[i];
this.children[this.children.length]=child;
this.type=this.tree.FOLDER_TYPE;
child.id=this.id+"_"+(this.children.length-1);
child.tree=this.tree;
child.type=this.tree.FILE_TYPE;
}
}
function TREE_show()
{
this.html+="<table cellspacing=0 cellpadding=0 rules='cols' style='border-width:2;' height='100%'>";
this.html+="<tr><td>";
this.html+="<table cellspacing=0 cellpadding=0>";
var n,i,top,stack;
this.root.addChild(this.selfItem);
this.selfItem.addChild(this.versionsItem,this.referenceItem);
stack=new Array(); //初始化目录栈
stack[0]=this.root; //加入目录栈的栈顶目录
while(stack.length>0)
{
/*弹出栈顶元素，并保存到top变量*/
top=stack[stack.length-1];
stack.length--;
n=this.findUnderlines(top.id);
/*将弹出的栈顶元素作为一个目录加入*/
this.html+="<tr style='";
else this.html+=" display:none;'>";
this.html+="<td>";
this.html+=" <table style='table-layout:fixed;' cellspacing=0 cellpadding=0 id='"+top.id+"'";
for(i=0;i this.html+=" <td width="+this.indent+"> </td>";
this.html+=" <td nowrap>";
this.html+=" if(top.type==this.FOLDER_TYPE)
if(n==1)
this.html+=this.UNFOLD_IMAGE+"'>";
else this.html+=this.FOLDER_IMAGE+"'>";
else this.html+=this.FILE_IMAGE+"'>";
this.html+= "";
this.html+=" this.html+=" onmouseout='this.style.color=\""+this.itemColor+"\";'";
this.html+=" style='color:"+this.itemColor+";cursor=hand;font-family:times new roman;font-size:medium;font-weight:bold;''"
this.html+=" onclick='"+top.action+"'>"+top.text;
this.html+=" ";
this.html+=" </td>";
this.html+=" </tr>";
this.html+=" </table>";
this.html+="</tr></td>";
/*假如弹出的栈顶目录有子目录，应该按逆序把所有子目录加到栈中*/
for(i=top.children.length-1;i>=0;i--) stack[stack.length]=top.children[i];
}
this.html+="</table>";
this.html+="</td></tr>";
this.html+="<tr><td height='100%' style='background:"+this.itemBackground+";'> </td></tr>";
this.html+="</table>";
document.write(this.html);
}
function Tree_click(itemID)
{
/* 首先找到被单击的html元素 */
var e=window.event.srcElement;
/* 找到该元素对应的目录对象 */
var item=this.findItem(itemID);
if(item!=null)
{
/* 如果该目录的类型为文件夹，那么，当它已经展开时，应折叠，否则相反 */
var i,s;
//如果被单击的是文件夹类型的目录
if(item.type==this.FOLDER_TYPE)
{
//如果该文件夹没有展开
if(e.src.indexOf(this.FOLDER_IMAGE)>=0)
{
//首先展开它，也就是更换它的图像
e.src=this.UNFOLD_IMAGE;
var stack=new Array(); //初始化目录栈
//先将所有一级子目录加到栈中
for(i=item.children.length-1;i>=0;i--) stack[stack.length]=item.children[i];
var top;
while(stack.length>0)
{
/*弹出一个目录*/
top=stack[stack.length-1];stack.length--;
document.all(top.id).parentNode.parentNode.style.display=""; //显示它
//如果这个被显示的目录处于展开状态，那么它的所有一级子目录应该加到栈中
if(top.type==this.FOLDER_TYPE &&
document.all(top.id).firstChild.firstChild.lastChild.firstChild.src.indexOf(this.UNFOLD_IMAGE)>=0)
for(i=top.children.length-1;i>=0;i--) stack[stack.length]=top.children[i];
}
}
/* 如果该文件夹已经展开 */
else
{
//首先折叠它
e.src=this.FOLDER_IMAGE;
//然后隐藏它的所有子目录,这里用到一个栈，来求出所有子目录
var stack=new Array(); //初始化目录栈
//先将所有一级子目录加到栈中
for(i=item.children.length-1;i>=0;i--)
stack[stack.length]=item.children[i];
var top;
while(stack.length>0)
{
/*弹出一个目录*/
top=stack[stack.length-1];stack.length--;
document.all(top.id).parentNode.parentNode.style.display="none"; //隐藏它
//再将这个被隐藏的目录的所有一级子目录加到栈中
for(i=top.children.length-1;i>=0;i--) stack[stack.length]=top.children[i];
}
}
}
/*如果以前有被单击的目录，那么以前被单击的元素要恢复到未单击的状态*/
if(this.elementClicked.length!=0)
document.all(this.elementClicked).firstChild.firstChild.lastChild.lastChild.style.background=this.itemBackground;
this.elementClicked=itemID;
document.all(this.elementClicked).firstChild.firstChild.lastChild.lastChild.style.background=this.selectedItemBackground;
}
}
function Tree_findItem(id)
{
/*从根目录开始找*/
var root=this.root;
var item=root;
if(item.id==id) return item;
var i;
for(i=0;i {
item=root.children[i];
/*正好找到*/
if(item.id==id) return item;
/*
如果这个目录的层次大于或者等于要找的目录的层次，那么就不必再找了。
由于目录的层次与目录的id中的下划线个数相同，所以可以用这种方法
*/
if(this.findUnderlines(item.id)>this.findUnderlines(id)) return null;
/*如果找到它的一个直系祖先，那么就应该马上从它的直系祖先开始找下去*/
if(id.indexOf(item.id)==0 && id.charAt(item.id.length)=='_')
{
i=-1;root=item;
}
}
return null;
}
<?xml:namespace prefix = arguments.length;i++)
<?xml:namespace prefix = root.children.length;i++) 9 版本信息（自从1.05）
<table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" rules="all" align="center">
Versions of TreeMenu
By liaomingxue <tr style="FONT-SIZE: medium; BACKGROUND: #33aaff"> <td align="middle">Version Number</td> <td align="middle">Time</td> <td align="middle">Description</td></tr> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; FONT-FAMILY: new times roman" align="middle">1.05</td> <td style="FONT-SIZE: medium; FONT-STYLE: italic; FONT-FAMILY: new times roman" align="middle">2004.7.20</td> <td style="FONT-SIZE: medium; COLOR: green; FONT-FAMILY: new times roman">Eliminated some unnecessary attributes of Class Tree. Now I use xml to present version information and programer reference. The files are within dir aboutTree. The action property of the slefItem of Tree has changed to open a new window to show versions.xml which dwells in dir aboutTree. But Classes' UML presentations are unavailabe at present. Maybe the next version. </td></tr> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; FONT-FAMILY: new times roman" align="middle">1.06</td> <td style="FONT-SIZE: medium; FONT-STYLE: italic; FONT-FAMILY: new times roman" align="middle">2004.7.20</td> <td style="FONT-SIZE: medium; COLOR: green; FONT-FAMILY: new times roman">Eliminated the attribute parent from Class TreeItem. UML diagram of class TreeItem, available. </td></tr> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; FONT-FAMILY: new times roman" align="middle">1.07</td> <td style="FONT-SIZE: medium; FONT-STYLE: italic; FONT-FAMILY: new times roman" align="middle">2004.7.21</td> <td style="FONT-SIZE: medium; COLOR: green; FONT-FAMILY: new times roman">UML diagram beautified. File versions.xsl modified. </td></tr> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; FONT-FAMILY: new times roman" align="middle">1.08</td> <td style="FONT-SIZE: medium; FONT-STYLE: italic; FONT-FAMILY: new times roman" align="middle">2004.7.21</td> <td style="FONT-SIZE: medium; COLOR: green; FONT-FAMILY: new times roman">Class TreeItem changed. No change on TreeItem's functionality.UML diagram of class TreeItem changed. </td></tr> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; FONT-FAMILY: new times roman" align="middle">1.09</td> <td style="FONT-SIZE: medium; FONT-STYLE: italic; FONT-FAMILY: new times roman" align="middle">2004.7.21</td> <td style="FONT-SIZE: medium; COLOR: green; FONT-FAMILY: new times roman">simplified the Class Tree. The former vesions let an "IMG" html element be within an "A" element, now "A" removed. This results in an about 1/8 decrease in length of html property of Tree. </td></tr> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; FONT-FAMILY: new times roman" align="middle">1.10</td> <td style="FONT-SIZE: medium; FONT-STYLE: italic; FONT-FAMILY: new times roman" align="middle">2004.7.21</td> <td style="FONT-SIZE: medium; COLOR: green; FONT-FAMILY: new times roman">Now there is no id property for Tree</td></tr> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; FONT-FAMILY: new times roman" align="middle">1.11</td> <td style="FONT-SIZE: medium; FONT-STYLE: italic; FONT-FAMILY: new times roman" align="middle">2004.7.22</td> <td style="FONT-SIZE: medium; COLOR: green; FONT-FAMILY: new times roman">UML representation of Class Tree, available</td></tr> <tr> <td style="FONT-WEIGHT: bolder; FONT-SIZE: medium; FONT-FAMILY: new times roman" align="middle">1.12</td> <td style="FONT-SIZE: medium; FONT-STYLE: italic; FONT-FAMILY: new times roman" align="middle">2004.7.23</td> <td style="FONT-SIZE: medium; COLOR: green; FONT-FAMILY: new times roman">Redundant information removed to suit the release in CSDN. Some code polished.</td></tr></table> 10 测试程序演示图
