qq空间导航栏代码:用XSLT轻松实现树形折叠导航栏(2)来源: 发布时间:星期四, 2009年2月12日 浏览:147次 评论:0
我引用花园  TOC  是让大家能有个初步印象等文章完成后 把几个文件C&P加上几个图片 在IE5以上机器上象打开个html文件样打开navi.xml后就会出现跟花园很类似TOC了； 2是希望大家根据它层次结构来分析我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:  test=\"@Layer[.>0]\">-Hidden</xsl:></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: test=\"@Childs[.>0]\"> <xsl:attribute name=\"Expanded\">no</xsl:attribute> </xsl: > <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.g \"></IMG></xsl:when> <xsl:otherwise><IMG><xsl:attribute name=\"src\"><xsl:value-of select=\"@Image\" /></xsl:attribute></IMG></xsl:otherwise> </xsl:choose> <A><xsl: test=\"@Childs[.>0]\"><xsl:attribute name=\"onclick\">toggle(\'<xsl:value-of select=\"@ID\" />\')</xsl:attribute></xsl:><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> 0
相关文章读者评论发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
