您的位置:首页资讯网络应用 → 用XSLT轻松实现树形折叠导航栏

用XSLT轻松实现树形折叠导航栏

时间:2004/10/8 16:35:00来源:本站整理作者:蓝点我要评论(0)

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




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

查看花园TOC例子:

NAVI.xml
































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

  我引用花园的TOC,一是让大家能有个初步印象,等文章完成后, 把几个文件C&P加上几个图片, 在IE5以上的机器上象打开一个html文件一样打开navi.xml后,就会出现跟花园很类似的TOC了;二是希望大家根据它的层次结构来分析我的xml文件, 因为除顶层外, 我的层次安排和花园是一样的。 我来解释一下:Layer相同表示元素处在同一层次即兄弟关系, Childs的值表示该元素是否有子结点, 父子之间用AncestorID和ID联系, 依次类推可以扩充至无限次深。 在xsl文件中根据Layer的值用padding-left属性来实现树形,根据Layer的值用display:none或block来实现折叠。 原理即此, 好,来看看这个关键的Navigator.xsl:


XSLT树形导航栏













Navigator-Hidden




no




有座花园分类目录

padding-left:em;




toggle('''')





当然, 少了navigator.css是不行的。

navigator.css

BODY
{
font-family:Verdana;
cursor:default;
font-size:9pt;
}

TABLE
{
font-size:110%;
}

A
{
color:"#003366";
text-decoration:none;
}

A:hover
{
text-decoration:underline;
color:#003366;
}

DIV IMG
{
MARGIN-BOTTOM: 0px;
MARGIN-RIGHT: 5px;
MARGIN-TOP: -3px;
VERTICAL-ALIGN: middle
}

DIV A:hover
{
BACKGROUND-COLOR: greenyellow
}
DIV A
{
FONT-WEIGHT: normal;
MARGIN-RIGHT: 5px;
VERTICAL-ALIGN: middle
}

.Navigator
{
color: #003366;
}
.Navigator-Hidden
{
display:none;
}

现在运行Navi.xml的话, 您就会看见所有Layer=0的Navigator了(因为那些Layer>0的被Class="Navigator-Hidden"隐藏起来了), 当然现在还不能实现展开和折叠, 缺少toggle这个函数。

展开和折叠其实就是显示或不显示(display:none or block)它与可见与不可见(visible or invisible)是有区别的, 前者不在页面预留空间。 这个toggle函数完成两个功能, 改变TR原来的Hidden属性, 使原来不显示的显示; 改变IMG的src属性, 更改图片。

toggle.js

function toggle(id)
{
var thisRow = document.all.item(id);
if (thisRow)
{
if (thisRow.getAttribute("Expanded") == ''yes'')
{
thisRow.setAttribute("Expanded", "no");
thisRow.children(0).children(0).children(0).src = "images/bs.gif";

var allRows = document.all.tags("TR");
for (var i=1; i < allRows.length; i++)
{
var row = allRows[i];
if (row.getAttribute("AncestorID") == id)
{
if (row.getAttribute("Expanded") == ''yes'') {
toggle(row.getAttribute("id"));
}
row.className = ''Navigator-Hidden'';
}
}
thisRow.className = ''Navigator'';
}
else
{
thisRow.setAttribute("Expanded", "yes");
thisRow.children(0).children(0).children(0).src = "images/bo.gif";

var allRows = document.all.tags("TR");
var depth = parseInt(thisRow.getAttribute("Depth"));
for (var i=1; i < allRows.length; i++)
{
var row = allRows[i];
if (row.getAttribute("AncestorID") == id &&
parseInt(row.getAttribute("Depth")) == depth + 1 )
{
row.className = ''Navigator'';
}
}
}
}
}

到此结束。

诚然这个TOC的功能还是最基本的, 例如我还未做内容和目录的同步,其中有的地方还可以修改, 对xml和xsl文件可以进一步瘦身。 不过对一般用户来讲, 这已经足够了。
真诚希望这篇文章能对您有所启发、有所帮助, 以后做出更酷、更快、更方便、功能更强的TOC。

相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么

文章评论
发表评论

热门文章 360免费wifi电脑版怎么有道云笔记怎么保存网有道云笔记内容丢失怎360免费wifi一直显示正

最新文章 微博热搜宝盒是什么 微最新微信编辑器哪个好 百度网盘安全吗?百度网盘信息泄露怎么回事乐视云盘关闭怎么办 乐视云盘关闭怎么转移文百度云盘下载速度慢解决方法2017 百度云盘下百度网盘怎么用迅雷下载2017 百度网盘怎么用

人气排行 无线网络密码破解WPA/WPA2教程(包教包会)微信编辑器哪个好 3种实用微信编辑器推荐foxmail邮件存储位置在哪 foxmail7.2邮件存p2p种子搜索器用不了解决办法360免费wifi没有无线网卡怎么办百度云网盘中怎么添加好友 百度云网盘添加微信电脑版聊天记录保存在哪 微信电脑版文件360云盘上传速度慢怎么办 360云盘上传速度慢