用xslt轻松实现树形折叠导航栏(1)

　　一般我们见到的xml文件是以元素为结点的，随着层次的不断加深，逐渐成了一棵树，这种文件的好处是我们一看就很明白其中的子、父、祖宗、兄弟关系，不方便之处在于，我个人认为，如果层次很深又有很多的兄弟结点的话，那么文件可能很大而影响处理的效率。正由于xml对描述数据结构的灵活性，所以在某些环境下采用属性值来描述元素之间的关系。例如花园左边的toc（table of content），实现它的xml文件通过属性值来说明元素的类型（node or leaf）， 不过里面仍有子结点存在， 所以用来transform它的xsl文件很复杂，分了好几种情况。当然今天我们不是谈花园toc的实现方法而是用一种更快速、更巧妙的方法来实现类似的toc，当然也可以叫"树形折叠导航栏"。 好了，废话少说，进入正题。先来看一个很简单的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不包含元素但有一系列属性。 也许您已经发现， 属性中有两个叫ancestorid childs的，对了，这两个属性是关键， 当然还有layer， 在他们的共同作用下， navigator元素之间的关系将被明确描述。 好了， 我们来看navi.xml文件， 以花园toc做为例子。

查看花园toc例子:

navi.xml
<@xml version="1.0" encoding="gb2312"@>
<!doctype navi system "navigator.dtd">
<@xml-stylesheet type="text/xsl" href="/1fanwencom/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='计算机技术' childs='2' url='#' image='default'/>
<navigator id='8' ancestorid='7' layer='1' title='dhtml,jscript' childs='0' url='bbsgroup.asp@c=6!amp;g=16' image='images/dc.gif'/>
<navigator id='9' ancestorid='7' layer='1' title='.net,asp+探讨' childs='0' url='bbsgroup.asp@c=6!amp;g=17' image='images/dc.gif'/>
<navigator id='10' ancestorid='7' layer='1' title='asp互助' childs='0' url='bbsgroup.asp@c=6!amp;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='南京大学' childs='0' url='bbsgroup.asp@c=7!amp;g=19' image='images/dc.gif'/>
<navigator id='13' ancestorid='11' layer='1' title='东南大学' childs='0' url='bbsgroup.asp@c=7!amp;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!amp;g=21' image='images/dc.gif'/>
<navigator id='16' ancestorid='14' layer='1' title='花园·人物故事' childs='0' url='bbsgroup.asp@c=8!amp;g=22' image='images/dc.gif'/>
<navigator id='17' ancestorid='17' layer='0' title='园丁办公室' childs='0' url='bbsgroup.asp@c=9!amp;g=23' image='images/dc-key.gif'/>
<navigator id='18' ancestorid='18' layer='0' title='青青芳草地' childs='0' url='bbsgroup.asp@c=9!amp;g=24' image='images/dc.gif'/>
<navigator id='19' ancestorid='19' layer='0' title='统计信息' 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>

结合上面我讲的和花园左边的toc， 仔细分析这个文件后， 找出元素间存在的关系是很容易的， 难的是怎么想到这么来创建xml文件的。 好了， 有了数据， 下一步就是如何manupilate了。