这里对JQUERY就不做详细介绍了，给我的感觉它是一个封装了JAVAS
CRIPT的函数库。里面有很多有用的东东，如果对JQUERY还不熟悉读者，请看以下两篇文章篇文章：
1 jQuery中文入门指南，翻译加实例，jQuery的起点教程
http://hi.baidu.com/wolftotem1984/blog/item/4335a618aa097ab44aedbcc5.html
2 JQUERY学习，教程资源汇总
http://hi.baidu.com/wolftotem1984/blog/item/40de9211768c1f7eca80c4a9.html
第一篇文章是我转过来的，第二篇是对JQUERY学习资源的总结，希望对大家入门有所帮助。
好了，言归正传。TREEVIEW是JQUERY的一个插件。用起来非常简单。以下是这个插件的官方网站
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
这里是DEMO
http://jquery.bassistance.de/treeview/treeviewDemo.html
看到效果了吧，有点像WINDOWS的资源管理器。要实现这个效果利用JQUERY的TREEVIEW插件非常的方便，以下几步便可实现了。
第一步：下载JQUERY和TREEVIEW插件。
JQUERY:http://jquery.bassistance.de/dist/jquery.js
TREEVIEW:http://jquery.bassistance.de/treeview/jquery.treeview.zip (注意：解压后里面的DEMO是不能正常显示的，因为缺少jquery.js。大家下载下来放到相应目录即可)
第二步：创建一个HTML文件
因为我们要利用一些图片资源，所以就在jquery.treeview.zip解压以后的目录里面创建。
例如我们创建一个treeview.html文件。用你喜欢的编辑器写以下的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TREEVIEW</title>
这里是引入jquery.js文件，我上面已经提过原来的压缩包是没有的，下载以后复制进去即可。
<script type="text/javascript" src="jquery.js"></script>
这里是引入treeview插件
<script type="text/javascript" src="jquery.treeview.js"></script>
下面这个是jquery的语法格式，不懂的可以到上面看我给的那些入门资料。
<script type="text/javascript">
$(function(){
$("ul").Treeview();
});
</script>
以下是一些CSS样式，这里是必须的。大家可以根据自己的喜好来改它的外观，这也是我特别欣赏 的地方
<style type="text/css">
.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
}
.treeview li {
margin: 0;
padding: 4px 0 3px 20px;
}
.treeview li { background: url(images/tv-item.gif) 0 0 no-repeat; }
.treeview .collapsable { background-image: url(images/tv-collapsable.gif); }
.treeview .expandable { background-image: url(images/tv-expandable.gif); }
.treeview .last { background-image: url(images/tv-item-last.gif); }
.treeview .lastCollapsable { background-image: url(images/tv-collapsable-last.gif); }
.treeview .lastExpandable { background-image: url(images/tv-expandable-last.gif); }
</style>
</head>
<body>
大家可以根据自己的要求改下面的这些代码，只要结构按照html语言里的列表结构即可。
<ul>
<li>Item 1
<ul>
<li>Item 1.1</li>
</ul>
</li>
<li class="closed">Item 2 (如果CLASS指定了closed,那么他默认是关闭的
)
<ul>
<li>Item 2.1
<ul>
<li>Item 2.1.1</li>
<li>Item 2.1.2</li>
</ul>
</li>
<li>Item 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</body></html>
(转载自csdn)
