使用jQuery Treeview插件实现树状结构效果

首先到一个国外网站上下载Treeview插件：
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
当然你也可以通过我博客的源文件直接下载：
http://files.cnblogs.com/jishume/jquery_api_for_dw4.rar

为了形象一点，先看一个效果图：

这个树状结构使用的HTML为<ul><li>标记，层层嵌套实现联级关系，具体的输出与样式的设置请看源码。

这里重点介绍下这个插件的几个功能效果：

1、animated:"fast"

设置展开子节点时的显示速度，一般有slow、normal、fast几个值，与jQuery的hide（show）中的speed参数相似。

2、persist: "location"

记忆折叠的方式。location，页面刷新不保留折叠状态；cookie，页面刷新保留折叠状态。
3、collapsed: true

初始化时的折叠状态。true，初始化为收缩节点状态；false，与前相反。

4、unique: true

展开同级节点的唯一性。true，当展开一个节点时，同级的其他节点会自动关闭；false，当展开一个节点时，同级的其他节点保持原形，不做为。

贴一段源码中的插件代码：
[JS]

    //给ID为browser的UL标签添加树状交互
    $("#browser").treeview({
     persist: "location",
     collapsed: true,
      unique: true
    });

});

</script>

[HTML]

<ul id="browser" 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 id="folder21">
      <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>