我引用花园的toc，一是让大家能有个初步印象，等文章完成后， 把几个文件c!amp;p加上几个图片， 在ie5以上的机器上象打开一个html文件一样打开navi.xml后，就会出现跟花园很类似的toc了；二是希望大家根据它的层次结构来分析我的xml文件， 因为除顶层外， 我的层次安排和花园是一样的。 我来解释一下：layer相同表示元素处在同一层次即兄弟关系， childs的值表示该元素是否有子结点， 父子之间用ancestorid和id联系， 依次类推可以扩充至无限次深。 在xsl文件中根据layer的值用padding-left属性来实现树形，根据layer的值用display：none或block来实现折叠。 原理即此， 好，来看看这个关键的navigator.xsl: <@xml version="1.0" encoding="gb2312" @>
<html>
<head>
<title>xslt树形导航栏</title>
<link rel="stylesheet" type="text/css" href="/1fanwencom/navigator.css"/>
<script src="http://www.1fanwen.com/toggle.js"></script>
</head>
<body>
<div xmlns:xsl="http://www.w3.org/tr/wd-xsl" >
<table>
<tr>
<td><div nowrap="true" style="padding-left:0em;">有座花园分类目录</div></td>
</tr>
<xsl:for-each select="navigation/navigator">
<tr>
<xsl:attribute name="title"><xsl:＆#118alue-of select="@title" /></xsl:attribute>
<xsl:attribute name="class">navigator<xsl:if test="@layer[.>0]">-hidden</xsl:if></xsl:attribute>
<xsl:attribute name="id"><xsl:＆#118alue-of select="@id"/></xsl:attribute>
<xsl:attribute name="ancestorid"><xsl:＆#118alue-of select="@ancestorid"/></xsl:attribute>
<xsl:attribute name="depth"><xsl:＆#118alue-of select="@layer"/></xsl:attribute>
<xsl:if test="@childs[.>0]">
<xsl:attribute name="expanded">no</xsl:attribute>
</xsl:if>
<td style="cursor:hand">
<div nowrap="true"><xsl:attribute name="style">padding-left:<xsl:＆#118alue-of select="@layer"/>em;</xsl:attribute>
<xsl:choose>
<xsl:when test="@childs[.>0]"><img src="http://www.1fanwen.com/files/beyondpic/2005-12/8/0512817053731883.gif"></img></xsl:when>
<xsl:otherwise><img><xsl:attribute name="src"><xsl:＆#118alue-of select="@image" /></xsl:attribute></img></xsl:otherwise>
</xsl:choose>
<a><xsl:if test="@childs[.>0]"><xsl:attribute name="＆#111nclick">toggle('<xsl:＆#118alue-of select="@id" />')</xsl:attribute></xsl:if><xsl:attribute name="href"><xsl:＆#118alue-of select="@url" /></xsl:attribute><xsl:＆#118alue-of select="@title" /></a></div></td>
</tr>
</xsl:for-each>
</table>
</div>
</body>
</html>
最后更新时间：2024年12月22日
返回页面顶端
