一般我们见到的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