欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

如何用XML实现弹出式菜单

来源:本站整理 作者:佚名 时间:2016-09-02 TAG: 我要投稿

XML已经成为了新一代网络计算的世界语,这一点已经在各大软件公司的产品中逐步体现出来。XML本身并不是一种计算语言,而更多表现为一种数据描述的格式。相对于HTML,它更多具有数据定义的特性,而相对于数据库,它又更加灵活和适于在网络上传输。围绕XML的相关技术也层出不穷,如XSL, XSLT等,它们的配合让我们能够真正在XML上开始完成一些有趣的任务。
 本文就是以一个XML初学者的角度在网页上实现一个动态弹出式菜单。对于同样希望了解XML与表现无关的特性的读者应当有所帮助。
 应用情景
 我们经常在一些网站看到形形色色的菜单形式,大部分的菜单都借用了DHTML的一些特性实现,但是想好好地利用这些已有的菜单实现一些自己的菜单并不容易。首先是必须从它们的整个页面中把一些代码“分析”,其次要分析其中的显示方式与显示内容的关系,如果自己的菜单结构和显示方式不同于其它网站的设计,就得花更多的功夫去研究新的显示方法。
 而我们希望实现一个可以动态调整的菜单结构,这种菜单应当可以适用于我们所要完成的整个一个网站。一旦我们的网页页面设计发生了变化,我们可以灵活地把菜单显示方式改变,适应新的网页整体风格。
 我们所希望实现的菜单首先可以表现为以下样子:
 

 图1:我们想实现的弹出式菜单的一种外观
 实现方法
 在大量接触HTML后,今天的网页程序设计中我们更多地愿意直接把一个页面的样子用所见即所得的编辑工具(如Frontpage, Dreamweaver等)“画”出来,而不再习惯于利用数据结构的方式设计能够通用的模块。为了能够达到我们的目的,我们又一次地开始重新考虑如何定义一个通用的菜单数据结构来描述一个菜单的信息,然后再使用一个显示模块表现这些数据信息,如果改变显示模块的一些参数,就可以实现相同菜单内容的不同外观和行为。
 在了解了XML的基本定义方法之后,我们定义了如下的示范数据:
 列表1: 一个示范性菜单数据结构XML
 
 
 
 
 
 中国XML联盟
 http://www.xml.org.cn
 
 
 易方软件公司
 http://www.tangram.com.cn
 
 
 微软MSDN
 http://msdn.microsoft.com
 
 
 
 
 biztalk
 http://www.biztalk.org
 
 
 
 
 精简
 express.htm
 
 
 自解释
 description.htm
 
 
 可交换
 exchange.htm
 
 
 与显示无关
 nopresentation.htm
 
 
 精简
 express.htm
 
 
 自解释
 description.htm
 
 
 可交换
 exchange.htm
 
 
 与显示无关
 nopresentation.htm
 
 
 
 
 Isaac M.
 mailto: isaac@tangram.com.cn
 
 
 
 
 红色牛刀
 red.htm
 
 
 白色牛刀
 white.htm
 
 
 褐色牛刀
 brown.htm
 
 
 
 在这段数据中,菜单的主要项目和子项分别使用和元素表示,一目了然。同时你也可以看到,我们已经为这段数据指定了一段外部的转化为DHTML的XSL代码:
 
 这行信息能够让IE自动把菜单的数据结构与一个特定的XSL结合在一起并转化为DHTML进行解释。另外,为了在IE中正确解释中文内容,在这段数据结构的第一个部分加入了encoding="gb2312" 的描述。
 学习定义XSL是一个稍微麻烦的事情,因为XSL既像一段DHTML的描述,由好像有可执行程序的功能。假如你比较熟悉DHTML,应当很容易掌握XSL的要领,但是自己定义的过程,应当配合XML一起,一边测试一边定义是一个不错的方法。我们在自己的菜单中,采用了把菜单的项目逐个解析成为DHTML的元素。
 列表2:能够表现我们所定义的菜单数据的一种XSL (Menus.xsl)
 
 
 
 
 
 
 TOPICLIST/@TYPE" />
 
 
 
 
 TOPICLIST/@TYPE" />
 
 
 
 
 
 
 tdMenuBarItem
 
 
 
 |
 
 
 
 
 
 
 
 
 divMenu
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 在最早的Menu.xsl定义中,我们把菜单的交互方式(即如何响应鼠标的动作),以及颜色和字体等风格元素都与XSL结合在一起。但是我们发现还可以分离,一边保留更大的灵活性。所以我们又定义了Menus.css和Menus.js文件,单独定义了菜单主项和子项的外观等特性,以及如何响应用户的动作,这样我们又获得了进一步的灵活性。
 列表3:在XSL中可以调整的格式表StyleSheet (Menus.css)
 /* MENUS.CSS */
 BODY { font-family:verdana; font-size:60%; background-color:ffffff; }
 H1 { font-size:120%; font-style:italic; }
 DIV#divMenuBar { background-color:#6699cc; }
 TABLE#tblMenuBar TD { font-size:60%; color:white; padding:0px 5px 0px 5px; cursor:default; }

[1] [2]  下一页

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载