用XSLT輕松實現樹形折疊導航欄

一般我們見到的xml文件是以元素為結點的，隨著層次的不斷加深，逐漸成了一棵樹，這種文件的好處是我們一看就很明白其中的子、父、祖宗、兄弟關系，不方便之處在於，我個人認為，如果層次很深又有很多的兄弟結點的話，那麼文件可能很大而影響處理的效率。正由於XML對描述數據結構的靈活性，所以在某些環境下采用屬性值來描述元素之間的關系。例如花園左邊的TOC（TABLE OF CONTENT），實現它的XML文件通過屬性值來說明元素的類型（NODE OR LEAF），不過裡面仍有子結點存在，所以用來TRANSFORM它的XSL文件很復雜，分了好幾種情況。當然今天我們不是談花園TOC的實現方法而是用一種更快速、更巧妙的方法來實現類似的TOC，當然也可以叫"樹形折疊導航欄"。好了，廢話少說，進入正題。先來看一個很簡單的DTD。 NAVIGATOR.DTD




文件很簡單，可以這樣理解，頂層元素Navigation包含了多個Navigator元素定義了，Navigator不包含元素但有一系列屬性。 也許您已經發現， 屬性中有兩個叫AncestorID Childs的，對了，這兩個屬性是關鍵， 當然還有Layer， 在他們的共同作用下， Navigator元素之間的關系將被明確描述。 好了， 我們來看Navi.xml文件， 以花園TOC做為例子。

查看花園TOC例子:

NAVI.xml
































結合上面我講的和花園左邊的TOC， 仔細分析這個文件後， 找出元素間存在的關系是很容易的， 難的是怎麼想到這麼來創建XML文件的。 好了， 有了數據， 下一步就是如何MANUPILATE了。

　　我引用花園的TOC，一是讓大家能有個初步印象，等文章完成後， 把幾個文件C&P加上幾個圖片， 在IE5以上的機器上象打開一個html文件一樣打開navi.xml後，就會出現跟花園很類似的TOC了；二是希望大家根據它的層次結構來分析我的xml文件， 因為除頂層外， 我的層次安排和花園是一樣的。 我來解釋一下：Layer相同表示元素處在同一層次即兄弟關系， Childs的值表示該元素是否有子結點， 父子之間用AncestorID和ID聯系， 依次類推可以擴充至無限次深。 在xsl文件中根據Layer的值用padding-left屬性來實現樹形，根據Layer的值用display：none或block來實現折疊。 原理即此， 好，來看看這個關鍵的Navigator.xsl:











有座花園分類目錄




Navigator-Hidden




no


padding-left:em;




toggle('''')







當然， 少了navigator.css是不行的。

navigator.css

BODY
{
font-family:Verdana;
cursor:default;
font-size:9pt;
}

TABLE
{
font-size:110%;
}

A
{
color:"#003366";
text-decoration:none;
}

A:hover
{
text-decoration:underline;
color:#003366;
}

DIV IMG
{
MARGIN-BOTTOM: 0px;
MARGIN-RIGHT: 5px;
MARGIN-TOP: -3px;
VERTICAL-ALIGN: middle
}

DIV A:hover
{
BACKGROUND-COLOR: greenyellow
}
DIV A
{
FONT-WEIGHT: normal;
MARGIN-RIGHT: 5px;
VERTICAL-ALIGN: middle
}

.Navigator
{
color: #003366;
}
.Navigator-Hidden
{
display:none;
}

現在運行Navi.xml的話， 您就會看見所有Layer=0的Navi