正在阅读：用XSLT轻松实现树形折叠导航栏用XSLT轻松实现树形折叠导航栏

2004-02-14 09:33 出处：奥索网作者：vinekey 责任编辑：pjl

我引用花园的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>