用XSLT生成網(wǎng)頁(yè)菜單（1）
日期：2005-2-17 16:18:33 來(lái)源:網(wǎng)上轉貼 編輯：本站轉 作者：未知
發(fā)送給好友四、 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="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一共有三個(gè)模板。
第一個(gè)模板 <xsl:template match="/"> 它生成簡(jiǎn)單的HTML框架和一個(gè)空白的網(wǎng)頁(yè)，除了調用第二個(gè)模板來(lái)插入菜單外，沒(méi)有其他功能。實(shí)際應用中可以擴充這個(gè)模板加入網(wǎng)頁(yè)的內容。
第二個(gè)模板 <xsl:template match="menus"> 讀取存儲為 menus 屬性的top, left和style控制網(wǎng)頁(yè)菜單的位置和類(lèi)型(style=0為垂直菜單，style=1為水平菜單), 并且調用第三個(gè)模板繪制菜單項。
第三個(gè)模板 <xsl:template match="menu"> 生成了各個(gè)菜單項，它能遞歸處理嵌套子菜單項的情況。這里使用了三個(gè) XSLT 函數[4]：position() 用于監測菜單的順序號，count(child::*) 用于判別是否具有子菜單，concat(,position(), ‘_‘) 最終生成了HV menu所需要的菜單變量名。
五、 實(shí)例
我們用一段 javascript (test _menu.htm) 實(shí)現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>[page]
這段程序在 IE 瀏覽器中創(chuàng )建MSXML[5]對象，然后輸出結果 HTML。讀者可以嘗試下載本文的范例程序[8],實(shí)際體驗網(wǎng)頁(yè)菜單的效果。
鑒于Netscape瀏覽器不支持創(chuàng )建MSXML對象，我們可以在IIS服務(wù)器端轉換后的返回 HTML[6]。本文介紹的網(wǎng)頁(yè)菜單就能在Netscape瀏覽器中顯示和運行。
六、 結論
用XML來(lái)表達菜單結構非常方便并且易于理解，當通過(guò)本文介紹的XSLT把菜單XML轉換為網(wǎng)頁(yè)菜單引擎的調用接口后，為網(wǎng)頁(yè)制作菜單就十分容易了，只需要用普通的文本編輯器編輯XML文件。本文使用了 HV Menu引擎，如果使用其他的引擎，還可以編制一個(gè)類(lèi)似XSLT來(lái)配合調用引擎的接口。最后，XML和XSLT是平臺無(wú)關(guān)的標準，我們還可以在apache服務(wù)器[7]中和JSP服務(wù)器[8]中使用本文的方法。
【學(xué)習心得】
本文是學(xué)習XML及XSL技術(shù)的一個(gè)很好的實(shí)例。不過(guò)使用XML和XSL制作網(wǎng)頁(yè)菜單僅僅是它們的一個(gè)很小的應用方面，XML和XSL的使用還有更多更加廣泛的應用值得我們去學(xué)習和探討。
本文中所制作的菜單效果雖然已經(jīng)很出色，但是還是具有一定的缺點(diǎn)。例如菜單的位置控制、樣式的擴充性，當子菜單過(guò)長(cháng)時(shí)（超過(guò)瀏覽器縱向顯示的長(cháng)度）無(wú)法正確顯示不可見(jiàn)的子菜單項等等。不過(guò)本文所使用的JS腳本給我們留出了很多擴展功能的接口函數。在長(cháng)達25KB、600行的JS文件中，我們可以對菜單效果做進(jìn)一步的改動(dòng)。
另外，微軟的網(wǎng)站以及MSDN的網(wǎng)站的導航條也運用了XML和XSL技術(shù)，我寫(xiě)的《仿XP風(fēng)格的導航條制作教程》一文當中就是基于微軟網(wǎng)站的導航條而寫(xiě)的，感興趣的朋友可以參考一下。
用XSLT生成網(wǎng)頁(yè)菜單（1）
日期：2005-2-17 16:18:33 來(lái)源:網(wǎng)上轉貼 編輯：本站轉 作者：未知
發(fā)送給好友四、 XSLT
轉換菜單的XML (menu.xsl) 的XSLT (menu.xsl) 為：
[page]
這段程序在 IE 瀏覽器中創(chuàng )建MSXML[5]對象，然后輸出結果 HTML。讀者可以嘗試下載本文的范例程序[8],實(shí)際體驗網(wǎng)頁(yè)菜單的效果。
鑒于Netscape瀏覽器不支持創(chuàng )建MSXML對象，我們可以在IIS服務(wù)器端轉換后的返回 HTML[6]。本文介紹的網(wǎng)頁(yè)菜單就能在Netscape瀏覽器中顯示和運行。
六、 結論
用XML來(lái)表達菜單結構非常方便并且易于理解，當通過(guò)本文介紹的XSLT把菜單XML轉換為網(wǎng)頁(yè)菜單引擎的調用接口后，為網(wǎng)頁(yè)制作菜單就十分容易了，只需要用普通的文本編輯器編輯XML文件。本文使用了 HV Menu引擎，如果使用其他的引擎，還可以編制一個(gè)類(lèi)似XSLT來(lái)配合調用引擎的接口。最后，XML和XSLT是平臺無(wú)關(guān)的標準，我們還可以在apache服務(wù)器[7]中和JSP服務(wù)器[8]中使用本文的方法。
【學(xué)習心得】
本文是學(xué)習XML及XSL技術(shù)的一個(gè)很好的實(shí)例。不過(guò)使用XML和XSL制作網(wǎng)頁(yè)菜單僅僅是它們的一個(gè)很小的應用方面，XML和XSL的使用還有更多更加廣泛的應用值得我們去學(xué)習和探討。
本文中所制作的菜單效果雖然已經(jīng)很出色，但是還是具有一定的缺點(diǎn)。例如菜單的位置控制、樣式的擴充性，當子菜單過(guò)長(cháng)時(shí)（超過(guò)瀏覽器縱向顯示的長(cháng)度）無(wú)法正確顯示不可見(jiàn)的子菜單項等等。不過(guò)本文所使用的JS腳本給我們留出了很多擴展功能的接口函數。在長(cháng)達25KB、600行的JS文件中，我們可以對菜單效果做進(jìn)一步的改動(dòng)。
另外，微軟的網(wǎng)站以及MSDN的網(wǎng)站的導航條也運用了XML和XSL技術(shù)，我寫(xiě)的《仿XP風(fēng)格的導航條制作教程》一文當中就是基于微軟網(wǎng)站的導航條而寫(xiě)的，感興趣的朋友可以參考一下。
