用XSLT簡單完成樹形折疊導(dǎo)航欄(1)
發(fā)表時間:2024-02-11 來源:明輝站整理相關(guān)軟件相關(guān)文章人氣:
[摘要]一般我們見到的XML文件是以元素為結(jié)點的,隨著層次的不斷加深,逐漸成了一棵樹,這種文件的好處是我們一看就很明白其中的子、父、祖宗、兄弟關(guān)系,不方便之處在于,我個人認(rèn)為,如果層次很深又有很多的兄弟結(jié)點的話,那么文件可能很大而影響處理的效率。正由于XML對描述數(shù)據(jù)結(jié)構(gòu)的靈活性,所以在某些環(huán)境下采用屬性...
一般我們見到的XML文件是以元素為結(jié)點的,隨著層次的不斷加深,逐漸成了一棵樹,這種文件的好處是我們一看就很明白其中的子、父、祖宗、兄弟關(guān)系,不方便之處在于,我個人認(rèn)為,如果層次很深又有很多的兄弟結(jié)點的話,那么文件可能很大而影響處理的效率。正由于XML對描述數(shù)據(jù)結(jié)構(gòu)的靈活性,所以在某些環(huán)境下采用屬性值來描述元素之間的關(guān)系。例如花園左邊的TOC(TABLE OF CONTENT),實現(xiàn)它的XML文件通過屬性值來說明元素的類型(NODE OR LEAF), 不過里面仍有子結(jié)點存在, 所以用來TRANSFORM它的XSL文件很復(fù)雜,分了好幾種情況。當(dāng)然今天我們不是談花園TOC的實現(xiàn)方法而是用一種更快速、更巧妙的方法來實現(xiàn)類似的TOC,當(dāng)然也可以叫"樹形折疊導(dǎo)航欄"。 好了,廢話少說,進入正題。先來看一個很簡單的DTD。 NAVIGATOR.DTD
<!ELEMENT Navigation (Navigator*)>
<!ELEMENT Navigator EMPTY>
<!ATTLIST Navigator ID CDATA #IMPLIED AncestorID CDATA #IMPLIED Layer CDATA #IMPLIED Title CDATA #IMPLIED Childs CDATA #IMPLIED Url CDATA #IMPLIED Image CDATA #IMPLIED>
文件很簡單,可以這樣理解,頂層元素Navigation包含了多個Navigator元素定義了,Navigator不包含元素但有一系列屬性。 也許您已經(jīng)發(fā)現(xiàn), 屬性中有兩個叫AncestorID Childs的,對了,這兩個屬性是關(guān)鍵, 當(dāng)然還有Layer, 在他們的共同作用下, Navigator元素之間的關(guān)系將被明確描述。 好了, 我們來看Navi.xml文件, 以花園TOC做為例子。
查看花園TOC例子:
NAVI.xml
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE Navi SYSTEM "navigator.dtd">
<?xml-stylesheet type="text/xsl" href="navigator.xsl" ?>
<Navigation>
<Navigator ID='1' AncestorID='1' Layer='0' Title='花園首頁' Childs='0' Url='default.asp' Image='images/dc.gif'/>
<Navigator ID='2' AncestorID='2' Layer='0' Title='我的花園' Childs='4' Url='#' Image='default'/>
<Navigator ID='3' AncestorID='2' Layer='1' Title='收藏夾' Childs='4' Url='#' Image='default'/>
<Navigator ID='21' AncestorID='3' Layer='2' Title='我管理的花壇' Childs='0' Url='mybbs.asp?cat=g' Image='images/dc-new.gif'/>
<Navigator ID='22' AncestorID='3' Layer='2' Title='我種下的種子' Childs='0' Url='mybbs.asp?cat=t' Image='images/dc-new.gif'/>
<Navigator ID='23' AncestorID='3' Layer='2' Title='我喜歡的花園' Childs='0' Url='myfavorite.asp?cat=g' Image='images/dc-new.gif'/>
<Navigator ID='24' AncestorID='3' Layer='2' Title='我收藏的文章' Childs='0' Url='myfavorite.asp?cat=t' Image='images/dc-new.gif'/>
<Navigator ID='4' AncestorID='2' Layer='1' Title='個人工具箱' Childs='2' Url='#' Image='default'/>
<Navigator ID='25' AncestorID='4' Layer='2' Title='配置和管理' Childs='0' Url='personal.asp' Image='images/dc-config.gif'/>
<Navigator ID='26' AncestorID='4' Layer='2' Title='花瓣兌換點' Childs='0' Url='apetal.asp' Image='images/dc-config.gif'/>
<Navigator ID='27' AncestorID='2' Layer='1' Title='我的日記本' Childs='0' Url='mydiary.asp' Image='images/dc-diary.gif'/>
<Navigator ID='6' AncestorID='2' Layer='1' Title='好友和短訊' Childs='0' Url='myfriend.asp' Image='images/dc-friends.gif'/>
<Navigator ID='7' AncestorID='7' Layer='0' Title='計算機技術(shù)' Childs='2' Url='#' Image='default'/>
<Navigator ID='8' AncestorID='7' Layer='1' Title='DHTML,JScript' Childs='0' Url='bbsgroup.asp?c=6&g=16' Image='images/dc.gif'/>
<Navigator ID='9' AncestorID='7' Layer='1' Title='.NET,ASP+探討' Childs='0' Url='bbsgroup.asp?c=6&g=17' Image='images/dc.gif'/>
<Navigator ID='10' AncestorID='7' Layer='1' Title='ASP互助' Childs='0' Url='bbsgroup.asp?c=6&g=18' Image='images/dc.gif'/>
<Navigator ID='11' AncestorID='11' Layer='0' Title='箐箐校園' Childs='2' Url='#' Image='default'/>
<Navigator ID='12' AncestorID='11' Layer='1' Title='南京大學(xué)' Childs='0' Url='bbsgroup.asp?c=7&g=19' Image='images/dc.gif'/>
<Navigator ID='13' AncestorID='11' Layer='1' Title='東南大學(xué)' Childs='0' Url='bbsgroup.asp?c=7&g=20' Image='images/dc.gif'/>
<Navigator ID='14' AncestorID='14' Layer='0' Title='花園·有個廣場' Childs='2' Url='#' Image='default'/>
<Navigator ID='15' AncestorID='14' Layer='1' Title='意見箱' Childs='0' Url='bbsgroup.asp?c=8&g=21' Image='images/dc.gif'/>
<Navigator ID='16' AncestorID='14' Layer='1' Title='花園·人物故事' Childs='0' Url='bbsgroup.asp?c=8&g=22' Image='images/dc.gif'/>
<Navigator ID='17' AncestorID='17' Layer='0' Title='園丁辦公室' Childs='0' Url='bbsgroup.asp?c=9&g=23' Image='images/dc-key.gif'/>
<Navigator ID='18' AncestorID='18' Layer='0' Title='青青芳草地' Childs='0' Url='bbsgroup.asp?c=9&g=24' Image='images/dc.gif'/>
<Navigator ID='19' AncestorID='19' Layer='0' Title='統(tǒng)計信息' Childs='0' Url='viewlog.asp' Image='images/dc-chart.gif'/>
<Navigator ID='20' AncestorID='20' Layer='0' Title='ActiveCard' Childs='0' Url='activecard?fromgarden' Image='images/dc-card.gif'/>
</Navigation>
結(jié)合上面我講的和花園左邊的TOC, 仔細(xì)分析這個文件后, 找出元素間存在的關(guān)系是很容易的, 難的是怎么想到這么來創(chuàng)建XML文件的。 好了, 有了數(shù)據(jù), 下一步就是如何MANUPILATE了。