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