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

当前位置：网学 > 编程文档 > XHTML > 正文

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

作者：用户投稿来源：网络发布时间： 12/12/14

　　一般我们见到的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="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&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=''南京大学'' Childs=''0'' Url=''bbsgroup.asp?c=7&g=19'' Image=''images/dc.gif''/>
<Navigator ID=''13'' AncestorID=''11'' Layer=''1'' Title=''东南大学'' 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=''统计信息'' 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了。

(责任编辑：admin)

点击进入论坛和大家一起交流设计,分享设计素材,结交设计朋友

上一篇资讯：用XSLT轻松实现树形折叠导航栏(2)

下一篇资讯： XSLT轻松入门第三章：XSLT的元素语法(2)