最近在写一个文件分享的程序,突然想能不能做一个目录树浏览的功能,但是又不想话太多的时间。想到已经把目录树用XML输出用于资源互联,就想试一下用XSLT显示一个这样的目录树。
参考资料:
http://www.west263.com/www/info/22688-1.htm
http://www.w3school.com.cn/xsl/index.asp
XML文件的格式:
<EnterPoint startPath="/" Version="1.0">
<File name="软件" size="16384" lastModified="1307619056218" type="FILE" isDir="true">
<File name="Linux" size="4096" lastModified="1303369207691" type="FILE" isDir="true">
<File name="apache-tomcat-7.0.5.tar.gz" size="7130543" lastModified="1291110060000" type="FILE" isDir="false"/>
<File name="dia-0.96.1.tar.bz2" size="4445553" lastModified="1175138668000" type="FILE" isDir="false"/>
<File name="eclipse-jee-helios-SR2-linux-gtk.tar.gz" size="215060891" lastModified="1298523600000" type="FILE" isDir="false"/>
<File name="google-earth-stable_current_i386.rpm" size="31788040" lastModified="1292432400000" type="FILE" isDir="false"/>
<File name="jdk-6u22-linux-i586.bin" size="83761756" lastModified="1287562990000" type="FILE" isDir="false"/>
<File name="Monospace.ttf" size="187953" lastModified="1291364936000" type="FILE" isDir="false"/>
<File name="myeclipse-9.0M1-linux-gtk-x86.tgz" size="843288985" lastModified="1290607504000" type="FILE" isDir="false"/>
<File name="netbeans-6.9.1-ml-linux.sh" size="278520832" lastModified="1291026576000" type="FILE" isDir="false"/>
<File name="PPStream.rpm" size="1488923" lastModified="1291961422000" type="FILE" isDir="false"/>
</File>
</File>
</EnterPoint>
XSLT文件:
<?xml version="1.0"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="EnterPoint">
<html>
<head>
<title>目录树</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/tree.js"></script>
<link rel="stylesheet" href="css/tree.css" type="text/css" />
</head>
<body>
<ul class="tree">
<xsl:apply-templates select="File">
<xsl:with-param name="path" select="'files/'"></xsl:with-param>
</xsl:apply-templates>
</ul>
</body>
</html>
</xsl:template>
<xsl:template match="File">
<xsl:param name="path"></xsl:param>
<xsl:if test="@isDir='true'">
<li><span class="dir"><xsl:value-of select="@name"></xsl:value-of></span>
<ul>
<xsl:apply-templates select="child::File">
<xsl:with-param name="path" select="concat($path,@name,'/')"></xsl:with-param>
</xsl:apply-templates>
</ul>
</li>
</xsl:if>
<xsl:if test="@isDir='false'">
<li><span class="file">
<a href="{concat($path,@name)}" target="_blank">
<xsl:value-of select="@name"></xsl:value-of>
</a>
</span>
</li>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
tree.js
var tree = {
buildTree : function() {
$('.tree li').each(function() {
if ($(this).is(':has(ul)'))
$(this).addClass('collapse');
if ($(this).next().is('li') || $(this).next().is('ul'))
$(this).css({
borderLeft : 'dashed 1px #dedede'
});
});
$('li.collapse>span').click(
function() {
$(this).next('ul').slideToggle(
'fast',
function() {
if ($(this).parent().hasClass('collapse'))
$(this).parent().removeClass('collapse')
.addClass('expand');
else
$(this).parent().removeClass('expand')
.addClass('collapse');
});
});
$('span.func').css({
'cursor' : 'pointer'
}).hover(function() {
$(this).css({
'color' : '#3de',
'text-decoration' : 'underline'
});
}, function() {
$(this).css({
'color' : '#000',
'text-decoration' : 'none'
});
}).click(function() {
$.fn.jerichoTab.addTab({
tabFirer : $(this),
title : $(this).text(),
closeable : true,
iconImg : $(this).attr('iconImg'),
data : {
dataType : $(this).attr('dataType'),
dataLink : $(this).attr('dataLink')
}
}).showLoader().loadData();
});
}
};
$().ready(function() {
tree.buildTree();
contractAll();
});
function contractAll() {
$('li.collapse>span').each(function() {
$(this).next('ul').slideToggle('fast', function() {
if ($(this).parent().hasClass('collapse'))
$(this).parent().removeClass('collapse').addClass('expand');
else
$(this).parent().removeClass('expand').addClass('collapse');
});
});
}
tree.css
.tree {
margin: 0;
padding: 0;
}
.tree ul,.tree li {
list-style-type: none;
margin: 0;
padding: 0;
}
.tree li {
padding-left: 14px;
line-height: 18px;
}
.tree span.modules {
cursor: pointer;
color: #783432;
}
.tree li.collapse {
background: url(../img/collapse.gif) no-repeat left 4px;
}
.tree li.expand {
background: url(../img/expand.gif) no-repeat left 4px;
}
以前几乎没怎么用过XML做啥,觉得笨重,看到那些XML格式的配置文件也觉得不可思议,即使只有少量配置变量,我还需要用一长串的标签将其包括起来。这次用了感觉XML挺适合用来处理树状的内容。
分享到:
相关推荐
1.4.1 xml将数据与显示分开 5 1.4.2 xml对文档的格式要求更加严格 6 1.4.3 xml有且只能有一个根元素 6 1.5 xml的编辑工具 7 1.6 xml文档 8 1.6.1 xml声明 9 1.6.2 文档类型声明 10 1.6.3 元素 11 1.6.4 注释...
1.4.1 xml将数据与显示分开 5 1.4.2 xml对文档的格式要求更加严格 6 1.4.3 xml有且只能有一个根元素 6 1.5 xml的编辑工具 7 1.6 xml文档 8 1.6.1 xml声明 9 1.6.2 文档类型声明 10 1.6.3 元素 11 1.6.4 注释...
1.4.1 xml将数据与显示分开 5 1.4.2 xml对文档的格式要求更加严格 6 1.4.3 xml有且只能有一个根元素 6 1.5 xml的编辑工具 7 1.6 xml文档 8 1.6.1 xml声明 9 1.6.2 文档类型声明 10 1.6.3 元素 11 1.6.4 注释...
1.4.1 xml将数据与显示分开 5 1.4.2 xml对文档的格式要求更加严格 6 1.4.3 xml有且只能有一个根元素 6 1.5 xml的编辑工具 7 1.6 xml文档 8 1.6.1 xml声明 9 1.6.2 文档类型声明 10 1.6.3 元素 11 1.6.4 注释...
其建立机制是通过特定的XSL风格页将定义好的目录树XML文件转换成满足要求的HTML推送给客户端浏览器(IE5.5+)显示。客户端负责处理所有对目录的操作,如展开/收缩、最大化/最小化子目录和整个目录结点。
3.3.1 显示控件树 3.3.2 页头 3.3.3 动态控件的创建 3.4 Page类 3.4.1 Session、Application和Cache 3.4.2 Request 3.4.3 Response 3.4.4 Server 3.4.5 User 3.4.6 Trace 3.4.7 访问其他类中...
7.1.2 使用外部XML文件实现映射 185 7.1.3 使用SqlMetal工具 186 7.1.4 LINQ to SQL设计器 188 7.2 将查询表达式转换为SQL 190 7.2.1 IQueryable接口 190 7.2.2 表达式树 191 7.3 业务实体的生命周期 ...
7.1.2 使用外部XML文件实现映射 185 7.1.3 使用SqlMetal工具 186 7.1.4 LINQ to SQL设计器 188 7.2 将查询表达式转换为SQL 190 7.2.1 IQueryable接口 190 7.2.2 表达式树 191 7.3 业务实体的生命周期 ...
7.1.2 使用外部XML文件实现映射 185 7.1.3 使用SqlMetal工具 186 7.1.4 LINQ to SQL设计器 188 7.2 将查询表达式转换为SQL 190 7.2.1 IQueryable接口 190 7.2.2 表达式树 191 7.3 业务实体的生命周期 ...
7.1.2 使用外部XML文件实现映射 185 7.1.3 使用SqlMetal工具 186 7.1.4 LINQ to SQL设计器 188 7.2 将查询表达式转换为SQL 190 7.2.1 IQueryable接口 190 7.2.2 表达式树 191 7.3 业务实体的生命周期 ...
7.1.2 使用外部XML文件实现映射 185 7.1.3 使用SqlMetal工具 186 7.1.4 LINQ to SQL设计器 188 7.2 将查询表达式转换为SQL 190 7.2.1 IQueryable接口 190 7.2.2 表达式树 191 7.3 业务实体的生命周期 ...
7.1.2 使用外部XML文件实现映射 185 7.1.3 使用SqlMetal工具 186 7.1.4 LINQ to SQL设计器 188 7.2 将查询表达式转换为SQL 190 7.2.1 IQueryable接口 190 7.2.2 表达式树 191 7.3 业务实体的生命周期 ...
7.1.2 使用外部XML文件实现映射 185 7.1.3 使用SqlMetal工具 186 7.1.4 LINQ to SQL设计器 188 7.2 将查询表达式转换为SQL 190 7.2.1 IQueryable接口 190 7.2.2 表达式树 191 7.3 业务实体的生命周期 ...