網(wǎng)頁中一種動態(tài)樹形菜單的設(shè)計與實現(xiàn)
2009-04-29 00:00:00張瓊瑤楊萌趙晶晶楊蕊
電腦知識與技術(shù) 2009年24期
摘要:網(wǎng)頁中前臺的動態(tài)效果通常用JavaScript腳本語言編程實現(xiàn)，該文基于樹形菜單的制作，探討用JavaScript腳本語言實現(xiàn)樹形菜單的具體過程，通過對普通菜單和樹形菜單的比較，突顯樹形菜單的優(yōu)點。進(jìn)而提出如何設(shè)計樹形菜單，并分析其具體實現(xiàn)過程，展示其效果圖。最后提出此方法的通用性和可發(fā)展性。
關(guān)鍵詞:javascript;樹形菜單;鋪展;隱藏
中圖分類號:TP301文獻(xiàn)標(biāo)識碼:A文章編號:1009-3044(2009)24-7044-02
Design and Realization of a Kind of Dynamic Tree Menu
ZHANG Qiong-yao，YANG Meng，ZHAO Jing-jing，YANG Xin
(Comptuer Science and Technology， Huazhong Normal University， Wuhan 430079， China)
Abstract: The dynaimic effects in webpage are often realized by a kind of language called javascript，This paper talks about how to design and realize a kind of dynamic tree menu.Compared with common menu，it has so many advantages.After the realization of tree menu，the paper illustrate how to realize it and show the effects of this kind of tree menu.
Key words: javascript; tree menu; spreading; hide
在瀏覽網(wǎng)頁時，會時常看到這樣一些效果:新聞圖片不斷翻新變化，文字閃光并隨著鼠標(biāo)移動，狀態(tài)欄的文字內(nèi)容不斷移動等。這些動態(tài)效果都極大地豐富了網(wǎng)頁的動態(tài)效果。其中JavaScript是實現(xiàn)這些網(wǎng)頁動態(tài)效果的主要腳本語言之一。它是一種基于對象和事件驅(qū)動的腳本語言，其良好的跨平臺性和安全性使之成為一種功能非常強大的腳本設(shè)計語言而廣泛應(yīng)用于動態(tài)網(wǎng)頁的制作中[1]。除此之外，JavaScript腳本語言還能實現(xiàn)如下功能[2]:網(wǎng)頁特效:網(wǎng)頁上的文字效果，圖片滾動，公告欄;提供表單客戶端驗證 JavaScript在客戶端填寫的表單發(fā)到服務(wù)器端前，做有效性測試，提高執(zhí)行效率;動態(tài)響應(yīng)事件如onload，onMouseOut，onMouseOver，onClick，針對用戶為用戶的動作設(shè)計動態(tài)反應(yīng)等。
基于對JavaScript腳本語言的學(xué)習(xí)，本文探討了如何在網(wǎng)頁中嵌入JavaScript腳本語言來實現(xiàn)樹形菜單，分析設(shè)計樹形菜單中的關(guān)鍵技術(shù)，提出此技術(shù)在樹形菜單制作中的通用性和可發(fā)展性。
1 樹形菜單的提出與設(shè)計
在普通的菜單中，常常會出現(xiàn)這樣的矛盾:一個目錄在內(nèi)容或邏輯上可以包含若干其他目錄，但普通菜單卻只能實現(xiàn)內(nèi)容上的鏈接，不能實現(xiàn)這些目錄的歸類，使之隸屬于總目錄，以顯示出這些目錄間的關(guān)聯(lián)。為了解決此矛盾，這里提出樹形菜單的設(shè)計與實現(xiàn)中的關(guān)鍵技術(shù)，其設(shè)計流程圖如圖1所示。
1.1 設(shè)計父目錄與子目錄間關(guān)聯(lián)及其關(guān)鍵技術(shù)分析
設(shè)計一個網(wǎng)頁的樹形菜單，首先要根據(jù)具體網(wǎng)的站內(nèi)容，設(shè)置父目錄和子目錄的標(biāo)題以及各子目錄內(nèi)容要鏈接到的具體網(wǎng)址。首先創(chuàng)建一個父目錄的數(shù)組來存放父目錄的內(nèi)容以及點擊父目錄時代表其操作的標(biāo)記，關(guān)鍵技術(shù)如下:
var menuitem=new Array()
{
menuitem[1]=KB9Child; //第一級父目錄
menuitem[2]=KB1Child ;//第二級父目錄
menuitem[3]=KB2Child ;//第三級父目錄
}
接下來要設(shè)計父目錄和子目錄之間的聯(lián)系，根據(jù)以上數(shù)組中各父目錄的標(biāo)記，如:
依此類推，實現(xiàn)其他的父目錄及其對應(yīng)的子目錄間的關(guān)聯(lián)引用以上技術(shù)即可。只需按照數(shù)組Array中各父目錄的id設(shè)置目錄名稱，修改各目錄名稱及其鏈接地址即可。 1.2 設(shè)計子目錄的鋪展及其關(guān)鍵技術(shù)分析 在1.1的分析中，第一級父目錄的操作設(shè)置代碼onclick=\"expandIt(1)用來實現(xiàn)鼠標(biāo)點擊父目錄時，其包含的子目錄鋪展開來，鼠標(biāo)點擊父目錄，其目錄下的子目錄鋪展，點擊子目錄即可鏈接到子目錄對應(yīng)的網(wǎng)頁地址。實現(xiàn)此功能的關(guān)鍵技術(shù)如下: expandIt(index) { if (menuitem[index].style.display==\"block\") displayall() ; else menuitem[index].style.display=\"block\" ; } 通過在父目錄操作中引入expandIt(index)函數(shù)來實現(xiàn)其子目錄的展開，當(dāng)menuitem[index].style.display==\"block\"時，表明鼠標(biāo)點擊，要求展開此父目錄下的所有子目錄，否則子目錄不鋪展。此技術(shù)同樣應(yīng)用于其他所有父目錄下各子目錄的鋪展。 1.3 設(shè)計子目錄的隱藏及其關(guān)鍵技術(shù)分析 鼠標(biāo)點擊某一父目錄，此目錄下的所有子目錄鋪展開來，當(dāng)鼠標(biāo)點擊其他父目錄時，在此之前的父目錄的各子目錄如果還是鋪展，其一，浪費了網(wǎng)頁的空間且不美觀;其二，點擊其他父目錄代表當(dāng)前已經(jīng)不關(guān)注此前點擊的目錄。由此就要設(shè)計子目錄的隱藏，即當(dāng)鼠標(biāo)點擊其他父目錄時，此前已經(jīng)鋪展開的其他任何父目錄下的子目錄都應(yīng)該隱藏。實現(xiàn)此功能的關(guān)鍵技術(shù)如下: function displayall() { KB9Child.style .display =\"none\" KB1Child.style .display =\"none\" KB2Child.style .display =\"none\" } 通過display()函數(shù)和Array()數(shù)組中父目錄的id來實現(xiàn)其他父目錄中子目錄的隱藏，設(shè)置其目錄的display為\"none\"來實現(xiàn)其隱藏。 以上的樹形菜單的具體設(shè)計過程和關(guān)鍵技術(shù)給出了樹形菜單的通用方法，利用嵌入JavaScript腳本語言編寫JavaScript語句，通過函數(shù)定義以及函數(shù)間的調(diào)用關(guān)系，實現(xiàn)父目錄中子目錄的鋪展與隱藏。 2 樹形菜單的實現(xiàn)效果 根據(jù)以上的設(shè)計，樹形菜單的效果及其大致功能截圖如下: 3 結(jié)束語 該文運用JavaScript腳本語言設(shè)計出樹形菜單，并給出實現(xiàn)子目錄菜單鋪展和隱藏的關(guān)鍵技術(shù)。在一定程度上此技術(shù)具有通用性，可以以此技術(shù)為模板，只需改變目錄的名稱和鏈接網(wǎng)址，即可實現(xiàn)所需樹形菜單，再把此技術(shù)嵌入具體網(wǎng)頁中，即可實現(xiàn)網(wǎng)頁中的樹形菜單，此外，此技術(shù)還具有可發(fā)展性，通過嵌入更多的JavaScript腳本語言可以實現(xiàn)樹形菜單跟隨鼠標(biāo)移動的效果，普通菜單和樹形菜單間的互換，樹形菜單中父目錄順序的變換，目錄響應(yīng)鼠標(biāo)的拖動等動態(tài)效果。以此技術(shù)實現(xiàn)的樹形菜單所具有的通用性和可發(fā)展性已經(jīng)在網(wǎng)頁制作中得到廣泛應(yīng)用，隨著JavaScript腳本語言的不斷發(fā)展和豐富。 參考文獻(xiàn): [1] Goodman D，Morrison M. JavaScript 寶典[M].4版.張文波，譯.北京:人民郵電出版社，2002:98-100. [2] 李戰(zhàn).悟透JavaScript(美繪本) [M]. 北京:電子工業(yè)出版社，2008:289-291.
