日期：2005-2-17 16:19:14 來源:網(wǎng)上轉(zhuǎn)貼 編輯：本站轉(zhuǎn) 作者：未知
發(fā)送給好友一、 概述
一個好的導(dǎo)航 (navigation) 系統(tǒng)能增加網(wǎng)頁的可讀性和美觀性，尤其是當(dāng)網(wǎng)站內(nèi)容比較豐富時，其邏輯結(jié)構(gòu)更加需要用好導(dǎo)航系統(tǒng)來組織，使得網(wǎng)頁讀者知道其所在的位置以及還有那些內(nèi)容可以瀏覽。導(dǎo)航系統(tǒng)中很重要的一個組成部分就是網(wǎng)頁菜單。
普通 Windows 應(yīng)用程序一般都有一個菜單系統(tǒng)，但是在網(wǎng)頁中實現(xiàn)菜單要復(fù)雜一些。因為 Windows 操作系統(tǒng)中菜單是標準的用戶界面接口，編制Windows 應(yīng)用程序時，只需要描述菜單，菜單的顯示和調(diào)用則由 Windows負責(zé)。在網(wǎng)頁中則情況不同，HTML 沒有菜單規(guī)范，網(wǎng)頁開發(fā)者必須自己利用 DHTML 和 javascript 來實現(xiàn)菜單的顯示和調(diào)用等功能。編制這樣的程序還是比較復(fù)雜的。加上各種瀏覽器實現(xiàn)的DHTML 和 javascript 有差異，又使得原本已經(jīng)復(fù)雜的網(wǎng)頁菜單程序更加復(fù)雜。
本文將介紹用 XML 和 XSLT 來生成網(wǎng)頁菜單的方法，它將使得網(wǎng)頁開發(fā)者只需要描述菜單，而不用擔(dān)心那些復(fù)雜的javascript程序，使得制作網(wǎng)頁菜單比做 Windows 程序的菜單還要簡單。
二、 菜單的定義
先從菜單的邏輯概念講起。所謂菜單，包含了一組菜單項，每個菜單項，具有屬性標題和連接，菜單項又可以包含一組子菜單項，從而形成一個嵌套的樹狀結(jié)構(gòu)
樹狀結(jié)構(gòu)的菜單
如圖所示的結(jié)構(gòu)很容易用 XML 來描述 (menu.xml)。
XML (eXtensible Markup Language,擴展標記語言) 是一種數(shù)據(jù)格式[1]，它的特點是人們能非常容易讀懂其中的含義，例如上面所示的菜單結(jié)構(gòu)就一目了然。不僅僅是人能容易看懂 XML，計算機也能非常容易讀懂其中的含義，這句話的含義是處理XML的程序已經(jīng)非常普及，Windows下有MSXML[5]，Java下有JAXP，即幾乎所有平臺上都有了XML處理程序[7][8]。并且處理XML有標準的辦法，比如本文將用到的 XSLT (eXtensible Stylesheet Language Transformation, 擴展樣式語言轉(zhuǎn)換)就是將XML格式的數(shù)據(jù)轉(zhuǎn)化到另外一種格式的標準方法[2][3][4]。
如果我們能用 XSLT 轉(zhuǎn)化上述菜單的XML到網(wǎng)頁上的菜單，那么制作網(wǎng)頁菜單就比較簡單了。因為編輯菜單的XML非常容易，普通的文本編輯器就可以了。
實現(xiàn)網(wǎng)頁菜單的DHTML和javascript程序常常被制作成程序庫的形式，稱為網(wǎng)頁菜單引擎。這些引擎都提供調(diào)用的接口，使得我們能夠定制(customize)我們自己的菜單，但問題是定制菜單需要修改這些程序，比較麻煩也容易出錯。
我們要解決的就是用XSLT根據(jù)菜單的XML，自動生成調(diào)用接口。
先讓我們看看有哪些現(xiàn)成可用的網(wǎng)頁菜單引擎。
三、 網(wǎng)頁菜單引擎
因特網(wǎng)上有很多javascript資源網(wǎng)站，dynamicdrive.com 就是其中很優(yōu)秀的一個。那里有許多很好的javascript程序可供下載使用，尤其是它的"Menus and Navigation Systems"分類中收集了不少網(wǎng)頁菜單引擎。經(jīng)過比較，我們選擇使用"HV menu" (http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm)。 HV menu 的優(yōu)點是既可以做水平排列的菜單，又可以做垂直排列的菜單；可以包含多層子菜單結(jié)構(gòu)；可以自定義菜單的字體、顏色、對齊方式；以及支持IE4+, NS4, NS6+等多種瀏覽器。
"HV menu"的程序庫為 menu_com.js 文件。它的接口規(guī)范是：
MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width);
因此在網(wǎng)頁中使用這個菜單引擎的 javascript 函數(shù)調(diào)用為：
<script>
Menu1=new Array(‘論壇首頁‘,‘http://www.delphibbs.com‘, ‘‘, 4, 20, 120);
Menu2=new Array(‘論壇分類‘,‘‘, ‘‘, 8, 20, 120);
Menu3=new Array(‘我的論壇‘,‘‘, ‘‘, 5, 20, 120);
Menu4=new Array(‘富翁用戶‘,‘‘, ‘‘, 3, 20, 120);
Menu5=new Array(‘大富翁系列‘,‘‘, ‘‘, 3, 20, 120);
Menu6=new Array(‘幫助‘,‘‘, ‘‘, 4, 20, 120);
Menu6_1=new Array(‘使用說明‘,‘tutorial.htm‘, ‘‘, 0, 20, 120);
Menu6_2=new Array(‘常見問題‘,‘faq.htm‘, ‘‘, 0, 20, 120);
Menu6_3=new Array(‘關(guān)于我們‘,‘a(chǎn)boutus.htm‘, ‘‘, 0, 20, 120);
Menu6_4=new Array(‘聯(lián)系我們‘,‘contactus.htm‘, ‘‘, 0, 20, 120);
</script>
下面我們將用XSLT把菜單的XML轉(zhuǎn)換為上述函數(shù)調(diào)用。
