我引用花园的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="/uploadfile/201212/14/72191853759.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> (责任编辑:admin) |