XML教程《用XML实现弹出式菜单（附图）》

您现在的位置： e股脑 >> 程序开发 >> XML教程 >> 用XML实现弹出式菜单（附图） >> 教程正文

教程搜索

图文教程

赞助商

用XML实现弹出式菜单（附图）

来源：e股脑
点击次数：
更新时间：2007-8-9

用XML实现弹出式菜单（附图）

XML已经成为了新一代网络计算的世界语,这一点已经在各大软件公司的产品中逐步体现出来。XML本身并不是一种计算语言,而更多表现为一种数据描述的格式。相对于HTML,它更多具有数据定义的特性,而相对于数据库,它又更加灵活和适于在网络上传输。围绕XML的相关技术也层出不穷,如XSL, XSLT等,它们的配合让我们能够真正在XML上开始完成一些有趣的任务。

本文就是以一个XML初学者的角度在网页上实现一个动态弹出式菜单。对于同样希望了解XML与表现无关的特性的读者应当有所帮助。

应用情景

我们经常在一些网站看到形形色色的菜单形式,大部分的菜单都借用了DHTML的一些特性实现,但是想好好地利用这些已有的菜单实现一些自己的菜单并不容易。首先是必须从它们的整个页面中把一些代码“分析”,其次要分析其中的显示方式与显示内容的关系,如果自己的菜单结构和显示方式不同于其它网站的设计,就得花更多的功夫去研究新的显示方法。

而我们希望实现一个可以动态调整的菜单结构,这种菜单应当可以适用于我们所要完成的整个一个网站。一旦我们的网页页面设计发生了变化,我们可以灵活地把菜单显示方式改变,适应新的网页整体风格。

我们所希望实现的菜单首先可以表现为以下样子:

图1:我们想实现的弹出式菜单的一种外观

实现方法

在大量接触HTML后,今天的网页程序设计中我们更多地愿意直接把一个页面的样子用所见即所得的编辑工具(如Frontpage, Dreamweaver等)“画”出来,而不再习惯于利用数据结构的方式设计能够通用的模块。为了能够达到我们的目的,我们又一次地开始重新考虑如何定义一个通用的菜单数据结构来描述一个菜单的信息,然后再使用一个显示模块表现这些数据信息,如果改变显示模块的一些参数,就可以实现相同菜单内容的不同外观和行为。

在了解了XML的基本定义方法之后,我们定义了如下的示范数据:

列表1: 一个示范性菜单数据结构XML

<?xml version="1.0" encoding="gb2312" ?>

<?xml:stylesheet type="text/xsl" href="menus.xsl"?>

<TOPIC>

<TITLE>中国XML联盟</TITLE>

</TOPIC>

<TOPIC>

<TITLE>易方软件公司</TITLE>

<URL>http://www.tangram.com.cn</URL>

</TOPIC>

<TOPIC>

<TITLE>微软MSDN</TITLE>

<URL>http://msdn.microsoft.com</URL>

</TOPIC>

</TOPICS>

<TOPIC>

<TITLE>biztalk</TITLE>

<URL>http://www.biztalk.org</URL>

</TOPIC>

</TOPICS>

<TOPIC>

<URL>express.htm</URL>

</TOPIC>

<TOPIC>

<URL>description.htm</URL>

</TOPIC>

<TOPIC>

<URL>exchange.htm</URL>

</TOPIC>

<TOPIC>

<TITLE>与显示无关</TITLE>

<URL>nopresentation.htm</URL>

</TOPIC>

<TOPIC>

<URL>express.htm</URL>

</TOPIC>

<TOPIC>

<URL>description.htm</URL>

</TOPIC>

<TOPIC>

<URL>exchange.htm</URL>

</TOPIC>

<TOPIC>

<TITLE>与显示无关</TITLE>

<URL>nopresentation.htm</URL>

</TOPIC>

</TOPICS>

<TOPIC>

<TITLE>Isaac M.</TITLE>

<URL>mailto: isaac@tangram.com.cn</URL>

</TOPIC>

</TOPICS>

<TOPIC>

</TOPIC>

<TOPIC>

<URL>white.htm</URL>

</TOPIC>

<TOPIC>

<URL>brown.htm</URL>

</TOPIC>

</TOPICS>

</TOPICLIST>

在这段数据中,菜单的主要项目和子项分别使用<TOPICS>和<TOPIC>元素表示,一目了然。同时你也可以看到,我们已经为这段数据指定了一段外部的转化为DHTML的XSL代码:

<?xml:stylesheet type="text/xsl" href="http://www.chinaitpower.com/A/2001-12-23/menus.xsl?>

这行信息能够让IE自动把菜单的数据结构与一个特定的XSL结合在一起并转化为DHTML进行解释。另外,为了在IE中正确解释中文内容,在这段数据结构的第一个部分加入了encoding="gb2312" 的描述。

学习定义XSL是一个稍微麻烦的事情,因为XSL既像一段DHTML的描述,由好像有可执行程序的功能。假如你比较熟悉DHTML,应当很容易掌握XSL的要领,但是自己定义的过程,应当配合XML一起,一边测试一边定义是一个不错的方法。我们在自己的菜单中,采用了<DIV>把菜单的项目逐个解析成为DHTML的元素。

列表2:能够表现我们所定义的菜单数据的一种XSL (Menus.xsl)

<?xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

<HTML>

<HEAD>

1 2 3 下一页

上一篇教程： XML编程实例(二)

下一篇教程：使用XML上传文件