网页中一种动态树形菜单的设计与实现.docVIP

网页中一种动态树形菜单的设计与实现 　　摘要:网页中前台的动态效果通常用JavaScript脚本语言编程实现,该文基于树形菜单的制作,探讨用JavaScript脚本语言实现树形菜单的具体过程,通过对普通菜单和树形菜单的比较,突显树形菜单的优点。进而提出如何设计树形菜单,并分析其具体实现过程,展示其效果图。最后提出此方法的通用性和可发展性。 　　关键词:javascript;树形菜单;铺展;隐藏 　　中图分类号:TP301文献标识码:A文章编号:1009-3044(2009)24-7044-02 　　 　　Design and Realization of a Kind of Dynamic Tree Menu 　　ZHANG Qiong-yao,YANG Meng,ZHAO Jing-jing,YANG Xin 　　(Comptuer Science and Technology, Huazhong Normal University, Wuhan 430079, China) 　　Abstract: The dynaimic effects in webpage are often realized by a kind of language called javascript,This paper talks about how to design and realize a kind of dynamic tree menu.Compared with common menu,it has so many advantages.After the realization of tree menu,the paper illustrate how to realize it and show the effects of this kind of tree menu. 　　Key words: javascript; tree menu; spreading; hide 　　 　　在浏览网页时,会时常看到这样一些效果:新闻图片不断翻新变化,文字闪光并随着鼠标移动,状态栏的文字内容不断移动等。这些动态效果都极大地丰富了网页的动态效果。其中JavaScript是实现这些网页动态效果的主要脚本语言之一。它是一种基于对象和事件驱动的脚本语言,其良好的跨平台性和安全性使之成为一种功能非常强大的脚本设计语言而广泛应用于动态网页的制作中[1]。除此之外,JavaScript脚本语言还能实现如下功能[2]:网页特效:网页上的文字效果,图片滚动,公告栏;提供表单客户端验证 JavaScript在客户端填写的表单发到服务器端前,做有效性测试,提高执行效率;动态响应事件如onload,onMouseOut,onMouseOver,onClick,针对用户为用户的动作设计动态反应等。 　　基于对JavaScript脚本语言的学习,本文探讨了如何在网页中嵌入JavaScript脚本语言来实现树形菜单,分析设计树形菜单中的关键技术,提出此技术在树形菜单制作中的通用性和可发展性。 　　 　　1 树形菜单的提出与设计 　　 　　在普通的菜单中,常常会出现这样的矛盾:一个目录在内容或逻辑上可以包含若干其他目录,但普通菜单却只能实现内容上的链接,不能实现这些目录的归类,使之隶属于总目录,以显示出这些目录间的关联。为了解决此矛盾,这里提出树形菜单的设计与实现中的关键技术,其设计流程图如图1所示。 　　1.1 设计父目录与子目录间关联及其关键技术分析 　　设计一个网页的树形菜单,首先要根据具体网的站内容,设置父目录和子目录的标题以及各子目录内容要链接到的具体网址。首先创建一个父目录的数组来存放父目录的内容以及点击父目录时代表其操作的标记,关键技术如下: 　　var menuitem=new Array() 　　{ 　　menuitem[1]=KB9Child; //第一级父目录 　　menuitem[2]=KB1Child ;//第二级父目录 　　 menuitem[3]=KB2Child ;//第三级父目录 　　} 　　接下来要设计父目录和子目录之间的联系,根据以上数组中各父目录的标记,如:代表第一级父目录,来设置第一级父目录的内容。通过点击各子目录,跳转至相应的链接网页。关键技术如下: 　　计算机科学系 //父目录 　　//孩子目录 　　院系概况 　　人才培养 　　科学研究 　　师资力量B 　　依此类推,实现其他的父目录及其对应的子目录间的关联引用以上技术即可。只需按照数组Array中各父目录的id设置目录名称,修改各目录名称及其链接地址即可。 　　1.2 设计子目录的铺展及其关键技术分