车辆维修档案管理制度:"DXML" Redux：从 XML 创建动态的 HTML菜单

来源：百度文库编辑：九乡新闻网时间：2024/04/28 08:27:23

"DXML" Redux：从 XML 创建动态的 HTML 菜单

George Young
Microsoft Corporation

请下载本文的源代码（压缩文件，4.80K）

在上个月的专栏中, 我们讨论了使用 XSL、层叠样式表 (CSS) 和 JScript(R)，从 XML 文件中创建动态 HTML(DHTML) 目录 (TOC)。我们从链接列表和相关的标签着手，结果获得了一个有助于站点浏览的可折叠 TOC。

在这个月的专栏中，我们将 XML 数据转换成 DHTML 菜单，就像在 MSDN Online 中所使用的菜单，在这一过程中有望进一步说明 XML 所提供的演示提取功能的优点。

这里的代码不是 MSDN Online 中所使用的实际菜单代码的严格再现。如果需要您提交 HTML 的浏览器不是 Internet Explorer 4.0 或其更新版本，我们将创建低级 HTML 的练习留给您，但所用的技术是一样的。

图 1. DHTML 菜单

如果您正在用 Internet Explorer 4.0 或更新版本阅读这篇文档, 您就可以查看 DHTML 菜单。

我们在这个月的讨论中假设您已经熟悉了上个月的专栏所论及的关于 XML 和 XSL 的基本知识。

在 XML 中保存 TOC

这里又用到了我们保存在 XML 中的站点浏览数据。因为上个月我们对 XML 进行了详细论述, 所以这里我们只列出文件的清单，然后继续进行讨论。

列表 1：webdev.xml

对象/workshop/author/dhtml/reference/objects.asp属性/workshop/author/dhtml/reference/properties.asp方法/workshop/author/dhtml/reference/methods.asp事件/workshop/author/dhtml/reference/events.asp集合/workshop/author/dhtml/reference/collections.asp属性/workshop/author/css/reference/attributes.asp长度单位/workshop/author/css/reference/lengthunits.asp颜色表/workshop/author/dhtml/reference/colors/colors.asp开发人员指南/xml/guide/default.asp对象/xml/xmldom/scriptref/XMLDOM_Objects.asp开发人员指南/xml/xsl/tutorials/xsl-overview.asp元素/xml/xsl/reference/XSLElements.asp方法/xml/xsl/reference/xslmethods.asp模式语法/xml/xsl/reference/XSLPatternSyntax.asp

使用 XSL 样式表生成菜单的“框架”HTML

DHTML 菜单由两种组件组成：第一种是菜单栏，扩展了页宽度并显示主 TOPICS 标题；第二种是单个菜单本身，当鼠标在给定 TOPICS 标题上方滑动时，它们会自动弹出。我们将在 XSL 样式表中创建这两种组件。

列表 2：menus.xsl

tdMenuBarItem |
divMenu
http://msdn.microsoft.com

生成菜单栏

首先，我们输出一个

，它的唯一目的是将背景颜色横跨整个页面宽度。

...

然后，在

内，我们输出一个，它的单元格 (

) 将包含 TOPICS 标题。

...

在

内,我们使用 xsl:for-each 为至少包含一个 TOPIC 的每一 TOPICS 元素创建 ...

最后，我们创建以“|”作为内容的

创建好菜单栏后，我们现在将注意力转到单个菜单。

生成单个菜单

由至少带有一个 TOPIC 子元素的 TOPICS 元素表征的每个菜单是一个

。我们赋予每一个

“clsMenu”类和一个由相链接的字符串“divMenu”组成的特有的 ID 以及 TOPICS TYPE 属性，很像以上我们对菜单栏所进行的操作。

  divMenu...

在每个菜单

内部，我们输出一个空的

，对于后者我们设置为“clsMenuSpacer”类，用于在菜单栏和展开的菜单之间提供空间。

...

最后，对于菜单中的每一菜单项，我们输出一个

，为它指定“clsMenuBarItem”类。这样我们就能够识别每一个标题，并将其与菜单相关联，我们使用xsl:attribute/A> 赋予

以字符串“tdMenuMarItem”表征的 ID，我们使用 xsl:value-of 将 TOPICS 元素的 TYPE 属性与其相链接。例如，我们的 XML 元素将获取以“tdMenuBarItemCSS”作为 ID 的

。

tdMenuBarItem

，从而添加一条竖线分隔每一标题。我们通过与 XSL context()和 end()方法一同使用 xsl:if，以检查当前的 TOPICS 元素是否是最后一个元素，从而避免在最后一个 TOPICS 元素中添加竖线。