Treeview_treeview组件的引用-CSDN博客

简单介绍一下JQUERY中的插件Treeview的用法，

地址：http://docs.jquery.com/Plugins/Treeview
（有大量的例子，下载源码）
http://jquery.bassistance.de/treeview/demo/
（有大量的例子参考）
具体介绍需要导入的js和css
- js：
  http://code.jquery.com/jquery-latest.js
  （支持jquery的源代码）
  http://jquery.bassistance.de/treeview/jquery.treeview.js
  （支持插件treeview的源代码）
  http://jquery.bassistance.de/treeview/lib/jquery.cookie.js
  （当使用cookie保存树的状态的时候，这个js包也是需要引入的）
- css：
  http://jquery.bassistance.de/treeview/jquery.treeview.css
  其中这个css中需要的一些预定好的图片，以及地址需要你下载和修改地址
  当然其实这些css也可以不必下载的，你可以自己编写自己需要的css，并组织自己需要的图片，等等在html网页中确立好你需要放置树形结构的位置。
假设确立好放在id为”test”的标签对象(可以是任何一种容器标签)里面。
eg:$(‘#test’).treeview();
主要是这个标签加入了treeview()这个函数：
treeview(options)
其中的options是很多对可选择性填写的key/value对组成的一个字典量。
这里就介绍几个主要的参数：

    * animated ：string/number树形动作的速度，主要参看animate()函数。
     eg:$("test").treeview({
        animated: "fast"
          })
  collapsed ：Boolean
   设置为True：所有的文件枝是关闭状态
   设置为False(默认)：所有文件枝是打开的状态
   eg:
   $("test").treeview({
   collapsed: true
    })
  unique ：Boolean
   设置为True：一个层次上只允许一个分支是打开的
   设置为False(默认):一个层次上可以同时打开多个分支
   eg：
   $("test").treeview({
   unique : true
    })
  control ：Selector
  放置treecontrol的容器的id，treecontrol就是通过一个点击按钮可以展开，合并以及切换分支。
  $("#test").treeview({
       animated: "fast",
       collapsed: true,
       control: "#sidetreecontrol",
   });
   ......
  <div id="sidetreecontrol"><a href="?#">Collapse All</a> | <a href="?#">Expand All</a></div>
   ......
   persist ：string
    ```
*  在cookie中或是网页位置上保持树的状态，如果设置为“cookie”，保持树形的每一个click点击操作到cookie中，当重新加载树形结构的时候，就恢复这些树形的状态。If set to "location", looks for the anchor that matches location.href and activates that part of the treeview it. Great for href-based state-saving. 
  (如需要更加详细的了解这个插件，可到上面提供的官方网站上查看)

* 如何在你定义好的id为"test"的容器中安排好你的树形结构：
* 主要是通过ul和li这两个标签我做的：
   <ul>...</ul>: ul标签里面包含一些分支
   <li>...</li>: 分支的具体定义在li标签里面

* 简单事例说明：
 ```
[xhtml] view plain copy
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
                    "http://www.w3.org/TR/html4/loose.dtd">  
    <html>  
    <head>  
      <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>  
      <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.css" mce_href="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.css" type="text/css" media="screen" />  
      <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js" mce_src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js"></mce:script>  
      <mce:style type="text/css"><!--  
      #browser {  
        font-family: Verdana, helvetica, arial, sans-serif;  
        font-size: 68.75%;  
      }  

--></mce:style><style type="text/css" mce_bogus="1">      #browser {  
        font-family: Verdana, helvetica, arial, sans-serif;  
        font-size: 68.75%;  
      }  
      </style>  
      <mce:script type="text/javascript"><!--  
      $(document).ready(function(){  
        $("#browser").treeview();  
     $("#add").click(function() {  
         var branches = $("<li><span class='folder'>New Sublist</span><ul>" +  
             "<li><span class='file'>Item1</span></li>" +  
             "<li><span class='file'>Item2</span></li>" +  
             "</ul></li>").appendTo("#browser");  
         $("#browser").treeview({  
             add: branches  
         });  
     });  
      });  

// --></mce:script>  

    </head>  
    <body>  

      <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>  

       <button id="add">Add!</button>  
    </body>  
    </html>