当前页面位置: » 丰搜网 » 文档中心 » 详细内容
用xslt轻松实现树形折叠导航栏(2)
我引用花园的toc，一是让大家能有个初步印象，等文章完成后， 把几个文件c&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="navigator.css"/>
<script src="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:value-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:value-of select="@id"/></xsl:attribute>
<xsl:attribute name="ancestorid"><xsl:value-of select="@ancestorid"/></xsl:attribute>
<xsl:attribute name="depth"><xsl:value-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:value-of select="@layer"/>em;</xsl:attribute>
<xsl:choose>
<xsl:when test="@childs[.>0]"><img src="images/bs.gif"></img></xsl:when>
<xsl:otherwise><img><xsl:attribute name="src"><xsl:value-of select="@image" /></xsl:attribute></img></xsl:otherwise>
</xsl:choose>
<a><xsl:if test="@childs[.>0]"><xsl:attribute name="onclick">toggle('<xsl:value-of select="@id" />')</xsl:attribute></xsl:if><xsl:attribute name="href"><xsl:value-of select="@url" /></xsl:attribute><xsl:value-of select="@title" /></a></div></td>
</tr>
</xsl:for-each>
</table>
</div>
</body>
</html>
