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>

你可能感兴趣的:(JavaScript,html,jquery,css,XHTML)