jquery treeView工具简单树形目录工具

最新推荐文章于 2021-04-20 13:47:41 发布

wei_wei_hnu

最新推荐文章于 2021-04-20 13:47:41 发布

阅读量1.9k

点赞数

分类专栏： javascript 文章标签： jquery 工具 class stylesheet html function

本文链接：https://blog.csdn.net/wei_wei_hnu/article/details/6616577

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用jQuery的treeview插件创建一个简单的树形目录。通过引入jQuery库和treeview的相关样式及脚本文件，然后在HTML中定义结构化的ul列表，利用JavaScript在页面加载完成后初始化treeview。示例包括了不同类型的目录项，如文件夹和文件，并展示了一种初始关闭的目录项状态。

摘要由CSDN通过智能技术生成

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://jquery.bassistance.de/treeview/demo/screen.css" type="text/css" />
<link rel="stylesheet" href="http://jquery.bassistance.de/treeview/jquery.treeview.css" type="text/css" />
<script type="text/javascript" src="http://jquery.bassistance.de/treeview/jquery.treeview.js"></script>
<script>
$(document).ready(function(){
$("#example").treeview();
});
</script>

</head>
<body>
<ul id="example" class="filetree">
<li><span class="folder">Folder 1</span>
<ul>
<li><span class="file">Item 1.1</span></li>
</ul>
</li>
<li><span class="folder">Folder 2</span>
<ul>
<li><span class="folder">Subfolder 2.1</span>
<ul>
<li><span class="file">File 2.1.1</span></li>
<li><span class="file">File 2.1.2</span></li>
</ul>
</li>
<li><span class="file">File 2.2</span></li>
</ul>
</li>
<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
<ul>
<li><span class="file">File 3.1</span></li>
</ul>
</li>
<li><span class="file">File 4</span></li>
</ul>
</body>
</html>