专注于互联网--专注于架构

最新标签
网站地图
文章索引
Rss订阅

首页 »XML教程 » qq空间导航栏代码:用XSLT轻松实现树形折叠导航栏(1) »正文

qq空间导航栏代码:用XSLT轻松实现树形折叠导航栏(1)

来源: 发布时间:星期四, 2009年2月12日 浏览:202次 评论:0


  般我们见到XML文件是以元素为结点随着层次不断加深逐渐成了棵树这种文件好处是我们看就很明白其中子、父、祖宗、兄弟关系不方便的处在于我个人认为如果层次很深又有很多兄弟结点那么文件可能很大而影响处理效率正由于XML对描述数据结构灵活性所以在某些环境下采用属性值来描述元素的间关系例如花园左边TOC(TABLE OF CONTENT)实现它XML文件通过属性值来介绍说明元素类型(NODE OR LEAF) 不过里面仍有子结点存在 所以用来TRANSFORM它XSL文件很复杂分了好几种情况当然今天我们不是谈花园TOC实现思路方法而是用种更快速、更巧妙思路方法来实现类似TOC当然也可以叫\"树形折叠导航栏\" 好了废话少说进入正题先来看个很简单DTD NAVIGATOR.DTD
<!ELEMENT Navigation (Navigator*)>
<!ELEMENT Navigator EMPTY>
<!ATTLIST Navigator ID CDATA #IMPLIED AncestorID CDATA #IMPLIED Layer CDATA #IMPLIED Title CDATA #IMPLIED Childs CDATA #IMPLIED Url CDATA #IMPLIED Image CDATA #IMPLIED>

文件很简单可以这样理解顶层元素Navigation包含了多个Navigator元素定义了Navigator不包含元素但有系列属性 也许您已经发现 属性中有两个叫AncestorID Childs对了这两个属性是关键 当然还有Layer 在他们共同作用下 Navigator元素的间关系将被明确描述 好了 我们来看Navi.xml文件 以花园TOC做为例子

查看花园TOC例子:

NAVI.xml
<?xml version=\"1.0\" encoding=\"gb2312\"?>
<!DOCTYPE Navi SYSTEM \"navigator.dtd\">
<?xml-stylesheet type=\"text/xsl\" href=\"navigator.xsl\" ?>
<Navigation>
<Navigator ID=\'1\' AncestorID=\'1\' Layer=\'0\' Title=\'花园首页\' Childs=\'0\' Url=\'default.asp\' Image=\'images/dc.g\'/>
<Navigator ID=\'2\' AncestorID=\'2\' Layer=\'0\' Title=\'我花园\' Childs=\'4\' Url=\'#\' Image=\'default\'/>
<Navigator ID=\'3\' AncestorID=\'2\' Layer=\'1\' Title=\'收藏夹\' Childs=\'4\' Url=\'#\' Image=\'default\'/>
<Navigator ID=\'21\' AncestorID=\'3\' Layer=\'2\' Title=\'我管理花坛\' Childs=\'0\' Url=\'mybbs.asp?cat=g\' Image=\'images/dc-.g\'/>
<Navigator ID=\'22\' AncestorID=\'3\' Layer=\'2\' Title=\'我种下种子\' Childs=\'0\' Url=\'mybbs.asp?cat=t\' Image=\'images/dc-.g\'/>
<Navigator ID=\'23\' AncestorID=\'3\' Layer=\'2\' Title=\'我喜欢花园\' Childs=\'0\' Url=\'myfavorite.asp?cat=g\' Image=\'images/dc-.g\'/>
<Navigator ID=\'24\' AncestorID=\'3\' Layer=\'2\' Title=\'我收藏文章\' Childs=\'0\' Url=\'myfavorite.asp?cat=t\' Image=\'images/dc-.g\'/>
<Navigator ID=\'4\' AncestorID=\'2\' Layer=\'1\' Title=\'个人工具箱\' Childs=\'2\' Url=\'#\' Image=\'default\'/>
<Navigator ID=\'25\' AncestorID=\'4\' Layer=\'2\' Title=\'配置和管理\' Childs=\'0\' Url=\'personal.asp\' Image=\'images/dc-config.g\'/>
<Navigator ID=\'26\' AncestorID=\'4\' Layer=\'2\' Title=\'花瓣兑换点\' Childs=\'0\' Url=\'apetal.asp\' Image=\'images/dc-config.g\'/>
<Navigator ID=\'27\' AncestorID=\'2\' Layer=\'1\' Title=\'我日记本\' Childs=\'0\' Url=\'mydiary.asp\' Image=\'images/dc-diary.g\'/>
<Navigator ID=\'6\' AncestorID=\'2\' Layer=\'1\' Title=\'好友和短讯\' Childs=\'0\' Url=\'myfriend.asp\' Image=\'images/dc-friends.g\'/>
<Navigator ID=\'7\' AncestorID=\'7\' Layer=\'0\' Title=\'计算机技术\' Childs=\'2\' Url=\'#\' Image=\'default\'/>
<Navigator ID=\'8\' AncestorID=\'7\' Layer=\'1\' Title=\'DHTML,JScript\' Childs=\'0\' Url=\'bbsgroup.asp?c=6&g=16\' Image=\'images/dc.g\'/>
<Navigator ID=\'9\' AncestorID=\'7\' Layer=\'1\' Title=\'.NET,ASP+探讨\' Childs=\'0\' Url=\'bbsgroup.asp?c=6&g=17\' Image=\'images/dc.g\'/>
<Navigator ID=\'10\' AncestorID=\'7\' Layer=\'1\' Title=\'ASP互助\' Childs=\'0\' Url=\'bbsgroup.asp?c=6&g=18\' Image=\'images/dc.g\'/>
<Navigator ID=\'11\' AncestorID=\'11\' Layer=\'0\' Title=\'箐箐校园\' Childs=\'2\' Url=\'#\' Image=\'default\'/>
<Navigator ID=\'12\' AncestorID=\'11\' Layer=\'1\' Title=\'南京大学\' Childs=\'0\' Url=\'bbsgroup.asp?c=7&g=19\' Image=\'images/dc.g\'/>
<Navigator ID=\'13\' AncestorID=\'11\' Layer=\'1\' Title=\'东南大学\' Childs=\'0\' Url=\'bbsgroup.asp?c=7&g=20\' Image=\'images/dc.g\'/>
<Navigator ID=\'14\' AncestorID=\'14\' Layer=\'0\' Title=\'花园·有个广场\' Childs=\'2\' Url=\'#\' Image=\'default\'/>
<Navigator ID=\'15\' AncestorID=\'14\' Layer=\'1\' Title=\'意见箱\' Childs=\'0\' Url=\'bbsgroup.asp?c=8&g=21\' Image=\'images/dc.g\'/>
<Navigator ID=\'16\' AncestorID=\'14\' Layer=\'1\' Title=\'花园·人物故事\' Childs=\'0\' Url=\'bbsgroup.asp?c=8&g=22\' Image=\'images/dc.g\'/>
<Navigator ID=\'17\' AncestorID=\'17\' Layer=\'0\' Title=\'园丁办公室\' Childs=\'0\' Url=\'bbsgroup.asp?c=9&g=23\' Image=\'images/dc-key.g\'/>
<Navigator ID=\'18\' AncestorID=\'18\' Layer=\'0\' Title=\'青青芳草地\' Childs=\'0\' Url=\'bbsgroup.asp?c=9&g=24\' Image=\'images/dc.g\'/>
<Navigator ID=\'19\' AncestorID=\'19\' Layer=\'0\' Title=\'统计信息\' Childs=\'0\' Url=\'viewlog.asp\' Image=\'images/dc-chart.g\'/>
<Navigator ID=\'20\' AncestorID=\'20\' Layer=\'0\' Title=\'ActiveCard\' Childs=\'0\' Url=\'activecard?fromgarden\' Image=\'images/dc-card.g\'/>


</Navigation>

结合上面我讲和花园左边TOC 仔细分析这个文件后 找出元素间存在关系是很容易是如何想到这么来创建XML文件 好了 有了数据步就是如何MANUPILATE了


0

相关文章

读者评论

发表评论

  • 昵称:
  • 内容: