一、演示说明
基于jquery的jquery.treeview组件，实现tree型效果代码示例，如下图所示
二、示例源码
<!DOCTYPE html>@b@<html>@b@<head>@b@<meta charset="utf-8">@b@ <title>jQuery Treeview demo</title>@b@@b@ <link rel="stylesheet" href="http://www.xwood.net/js/jquery/treeview/jquery.treeview.css" />@b@@b@ <script src="http://www.xwood.net/js/jquery-1.6.2.min.js"></script>@b@ <script src="http://www.xwood.net/js/jquery/cookie/jquery.cookie-min.js"></script>@b@ @b@ <script src="http://www.xwood.net/js/jquery/treeview/jquery.treeview.js" type="text/javascript"></script>@b@@b@ <script type="text/javascript">@b@ $(document).ready(function(){@b@ $("#browser").treeview({@b@ toggle: function() {@b@ console.log("%s was toggled.", $(this).find(">span").text());@b@ }@b@ });@b@@b@ $("#add").click(function() {@b@ var branches = $("<li><span class='folder'>New Sublist</span><ul>" +@b@ "<li><span class='file'>Item1</span></li>" +@b@ "<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");@b@ $("#browser").treeview({@b@ add: branches@b@ });@b@ });@b@ });@b@ </script>@b@ </head>@b@ <body>@b@@b@ <h1 id="banner">jQuery Treeview</h1>@b@ <div id="main">@b@@b@ @b@@b@ <ul id="browser" class="filetree treeview-famfamfam">@b@ <li><span class="folder">Folder 1</span>@b@ <ul>@b@ <li><span class="folder">Item 1.1</span>@b@ <ul>@b@ <li><span class="file">Item 1.1.1</span></li>@b@ </ul>@b@ </li>@b@ <li><span class="folder">Folder 2</span>@b@ <ul>@b@ <li><span class="folder">Subfolder 2.1</span>@b@ <ul id="folder21">@b@ <li><span class="file">File 2.1.1</span></li>@b@ <li><span class="file">File 2.1.2</span></li>@b@ </ul>@b@ </li>@b@ <li><span class="folder">Subfolder 2.2</span>@b@ <ul>@b@ <li><span class="file">File 2.2.1</span></li>@b@ <li><span class="file">File 2.2.2</span></li>@b@ </ul>@b@ </li>@b@ </ul>@b@ </li>@b@ <li class="closed"><span class="folder">Folder 3 (closed at start)</span>@b@ <ul>@b@ <li><span class="file">File 3.1</span></li>@b@ </ul>@b@ </li>@b@ <li><span class="file">File 4</span></li>@b@ </ul>@b@ </li>@b@ </ul>@b@@b@ <button id="add">Add!</button>@b@@b@ @b@@b@</div>@b@@b@</body></html>