用XSLT生成网页菜单（２） - GOODSGY电脑学习网 | 计算机教程 | 电脑知识 | 电子书 | 培训资料

用XSLT生成网页菜单（２）

　　四、 XSLT
　　转换菜单的XML (menu.xsl) 的XSLT (menu.xsl) 为：
<?XML version="1.0" encoding="gb2312" ?>
<xsl:stylesheet XMLns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<HTML>
<HEAD>
<TITLE>Menu Test</TITLE>
</HEAD>
<BODY leftmargin="0" topmargin="0">
<xsl:apply-templates select="menus"/>
</BODY>
</HTML>
</xsl:template>
<xsl:template match="menus">
<script>
　　var NoOffFirstLineMenus=<xsl:value-of select="count(child::*)"/>;
　　var StartTop=<xsl:value-of select="@top"/>;
　　var StartLeft=<xsl:value-of select="@left"/>;
　　var FirstLineHorizontal=<xsl:value-of select="@style"/>;
　　<xsl:apply-templates select="menu">
　　<xsl:with-param name="pr" select="''"/>
　　</xsl:apply-templates>
</script>
<script type="text/JavaScript" src="http://www.blue1000.com/article/menu_com.js"/>
</xsl:template>
<xsl:template match="menu">
　　<xsl:param name="pr"/>
　　Menu<xsl:value-of select="$pr"/><xsl:value-of select="position()"/>=new Array('<xsl:value-of select="@caption"/>','<xsl:value-of select="@url"/>', '', <xsl:value-of select="count(child::*)"/>, 20, 120);
　　<xsl:if test="count(child::*) > 0">
　　　<xsl:apply-templates select="menu">
　　　　<xsl:with-param name="pr" select="concat($pr,position(), '_')"/>
　　　</xsl:apply-templates>
　　</xsl:if>
</xsl:template>
</xsl:stylesheet>
　　这里XSLT一共有三个模板。
　　第一个模板 <xsl:template match="/"> 它生成简单的HTML框架和一个空白的网页，除了调用第二个模板来插入菜单外，没有其他功能。实际应用中可以扩充这个模板加入网页的内容。
　　第二个模板 <xsl:template match="menus"> 读取存储为 menus 属性的top, left和style控制网页菜单的位置和类型(style=0为垂直菜单，style=1为水平菜单), 并且调用第三个模板绘制菜单项。
　　第三个模板 <xsl:template match="menu"> 生成了各个菜单项，它能递归处理嵌套子菜单项的情况。这里使用了三个 XSLT 函数[4]：position() 用于监测菜单的顺序号，count(child::*) 用于判别是否具有子菜单，concat($pr,position(), '_') 最终生成了HV menu所需要的菜单变量名。

　　五、实例
　　我们用一段 JavaScript (test _menu.htm) 实现XSLT转换，以及显示转换后的效果。
<script>
load_XML("menu.XML", "menu.xsl");
function load_XML(XMLf, xslf) {
　　try {
　　　　var myXML = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
　　　　myXML.async = false;
　　　　myXML.load(XMLf);
　　　　//alert(myXML.XML);
　　　　var myxsl = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
　　　　myxsl.async = false;
　　　　myxsl.load(xslf);
　　　　HTML = myXML.transformNode(myxsl);
　　　　document.write(HTML);
　　}
　　catch (exception) {
　　　　alert(exception.description);
　　}
}
</script>
　　这段程序在 IE 浏览器中创建MSXML[5]对象，然后输出结果 HTML。读者可以尝试下载本文的范例程序[8],实际体验网页菜单的效果。

http://it365cn.com/articleimg/662-1.jpg' border=0 align=absmiddle>

http://it365cn.com/articleimg/662-2.jpg' border=0 align=absmiddle>

　　鉴于Netscape浏览器不支持创建MSXML对象，我们可以在IIS服务器端转换后的返回 HTML[6]。本文介绍的网页菜单就能在Netscape浏览器中显示和运行。

　　六、结论
　　用XML来表达菜单结构非常方便并且易于理解，当通过本文介绍的XSLT把菜单XML转换为网页菜单引擎的调用接口后，为网页制作菜单就十分容易了，只需要用普通的文本编辑器编辑XML文件。本文使用了 HV Menu引擎，如果使用其他的引擎，还可以编制一个类似XSLT来配合调用引擎的接口。最后，XML和XSLT是平台无关的标准，我们还可以在apache服务器[7]中和JSP服务器[8]中使用本文的方法。
　　【学习心得】
　　本文是学习XML及XSL技术的一个很好的实例。不过使用XML和XSL制作网页菜单仅仅是它们的一个很小的应用方面，XML和XSL的使用还有更多更加广泛的应用值得我们去学习和探讨。
　　本文中所制作的菜单效果虽然已经很出色，但是还是具有一定的缺点。例如菜单的位置控制、样式的扩充性，当子菜单过长时（超过浏览器纵向显示的长度）无法正确显示不可见的子菜单项等等。不过本文所使用的JS脚本给我们留出了很多扩展功能的接口函数。在长达25KB、600行的JS文件中，我们可以对菜单效果做进一步的改动。
　　另外，微软的网站以及MSDN的网站的导航条也运用了XML和XSL技术，我写的《仿XP风格的导航条制作教程》一文当中就是基于微软网站的导航条而写的，感兴趣的朋友可以参考一下。

在百度中搜索：用XSLT生成网页菜单（２）
在Google中搜索：用XSLT生成网页菜单（２）
在Yahoo中搜索：用XSLT生成网页菜单（２）

收藏到网摘:新浪VIVI 365key 我摘 POCO网摘博采中心 YouNote 和讯网摘天天收藏

[] [返回上一页] [打印] [收藏]

上一篇文章：用XSLT生成网页菜单（1）

下一篇文章：XML 中的常见问题（1）

相关文章

· XML和XSLT结合进行网站设计
· 网页教程：XML技巧五则
· XML语法概述
· XML轻松学习手册
· XML 中的常见问题（3）
· XML 中的常见问题（2）
· XML 中的常见问题（1）
· 用XSLT生成网页菜单（２）
· 用XSLT生成网页菜单（1）
· 将改变我们生活的这些XML应用之二

∷相关文章评论∷　　　（评论内容只代表网友观点，与本站立场无关！） [更多评论…]

站内搜索

精彩图文