用XSLT生成網(wǎng)頁菜單（1）_1

高山流水 2005-09-19

展開全文

用XSLT生成網(wǎng)頁菜單（1）

日期：2005-2-17 16:18:33 來源:網(wǎng)上轉(zhuǎn)貼編輯：本站轉(zhuǎn) 作者：未知 發(fā)送給好友

四、 XSLT
　　轉(zhuǎn)換菜單的XML (menu.xsl) 的XSLT (menu.xsl) 為：
<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl="http://www./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="menu_com.js"/>
</xsl:template>
<xsl:template match="menu">
<xsl:param name="pr"/>
Menu<xsl:value-of select=""/><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(,position(), ‘_‘)"/>
</xsl:apply-templates>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
這里XSLT一共有三個模板。
第一個模板 <xsl:template match="/"> 它生成簡單的HTML框架和一個空白的網(wǎng)頁，除了調(diào)用第二個模板來插入菜單外，沒有其他功能。實際應(yīng)用中可以擴充這個模板加入網(wǎng)頁的內(nèi)容。
第二個模板 <xsl:template match="menus"> 讀取存儲為 menus 屬性的top, left和style控制網(wǎng)頁菜單的位置和類型(style=0為垂直菜單，style=1為水平菜單), 并且調(diào)用第三個模板繪制菜單項。
第三個模板 <xsl:template match="menu"> 生成了各個菜單項，它能遞歸處理嵌套子菜單項的情況。這里使用了三個 XSLT 函數(shù)[4]：position() 用于監(jiān)測菜單的順序號，count(child::*) 用于判別是否具有子菜單，concat(,position(), ‘_‘) 最終生成了HV menu所需要的菜單變量名。

　　五、實例
　　我們用一段 javascript (test _menu.htm) 實現(xiàn)XSLT轉(zhuǎn)換，以及顯示轉(zhuǎn)換后的效果。
<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>[page]
這段程序在 IE 瀏覽器中創(chuàng)建MSXML[5]對象，然后輸出結(jié)果 HTML。讀者可以嘗試下載本文的范例程序[8],實際體驗網(wǎng)頁菜單的效果。

鑒于Netscape瀏覽器不支持創(chuàng)建MSXML對象，我們可以在IIS服務(wù)器端轉(zhuǎn)換后的返回 HTML[6]。本文介紹的網(wǎng)頁菜單就能在Netscape瀏覽器中顯示和運行。

　　六、結(jié)論
用XML來表達菜單結(jié)構(gòu)非常方便并且易于理解，當(dāng)通過本文介紹的XSLT把菜單XML轉(zhuǎn)換為網(wǎng)頁菜單引擎的調(diào)用接口后，為網(wǎng)頁制作菜單就十分容易了，只需要用普通的文本編輯器編輯XML文件。本文使用了 HV Menu引擎，如果使用其他的引擎，還可以編制一個類似XSLT來配合調(diào)用引擎的接口。最后，XML和XSLT是平臺無關(guān)的標(biāo)準(zhǔn)，我們還可以在apache服務(wù)器[7]中和JSP服務(wù)器[8]中使用本文的方法。
　　【學(xué)習(xí)心得】
本文是學(xué)習(xí)XML及XSL技術(shù)的一個很好的實例。不過使用XML和XSL制作網(wǎng)頁菜單僅僅是它們的一個很小的應(yīng)用方面，XML和XSL的使用還有更多更加廣泛的應(yīng)用值得我們?nèi)W(xué)習(xí)和探討。
本文中所制作的菜單效果雖然已經(jīng)很出色，但是還是具有一定的缺點。例如菜單的位置控制、樣式的擴充性，當(dāng)子菜單過長時（超過瀏覽器縱向顯示的長度）無法正確顯示不可見的子菜單項等等。不過本文所使用的JS腳本給我們留出了很多擴展功能的接口函數(shù)。在長達25KB、600行的JS文件中，我們可以對菜單效果做進一步的改動。
另外，微軟的網(wǎng)站以及MSDN的網(wǎng)站的導(dǎo)航條也運用了XML和XSL技術(shù)，我寫的《仿XP風(fēng)格的導(dǎo)航條制作教程》一文當(dāng)中就是基于微軟網(wǎng)站的導(dǎo)航條而寫的，感興趣的朋友可以參考一下。

用XSLT生成網(wǎng)頁菜單（1）

日期：2005-2-17 16:18:33 來源:網(wǎng)上轉(zhuǎn)貼編輯：本站轉(zhuǎn) 作者：未知 發(fā)送給好友