网页设计

基于 jquery的树形菜单 treeview插件 简单介绍使用

作者：我就是个世界 发表于：2012-09-20
项目中使用到树形菜单，正好项目有在用jquery，所以找到了这个基于 jquery的树形菜单插件[b]treeview[/b]，网上对此的资料好像很少，官方文档移了地方，也不知道哪去了，最后终于找到一个简单的介绍。

[b]JQUERY中的插件树形菜单 treeview 的简单用法：[/b]

地址：http://docs.jquery.com/Plugins/Treeview
     （有大量的例子，下载源码）
      http://jquery.bassistance.de/treeview/demo/
      （有大量的例子参考）
具体介绍需要导入的js和css[separator]
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对组成的一个字典量。
这里就介绍几个主要的参数：
  [b]animated[/b]：string/number
  树形动作的速度，主要参看animate()函数。
     eg:$("test").treeview({
        animated: "fast"
          })
[b] collapsed[/b]：Boolean
   设置为True：所有的文件枝是关闭状态
   设置为False(默认)：所有文件枝是打开的状态
   eg:
   $("test").treeview({
   collapsed: true
    })
  [b]unique[/b]：Boolean
   设置为True：一个层次上只允许一个分支是打开的
   设置为False(默认):一个层次上可以同时打开多个分支
   eg：
   $("test").treeview({
   [b]unique[/b]: true
    })
  [b]control[/b]：Selector
  放置treecontrol的容器的id，treecontrol就是通过一个点击按钮可以展开，合并以及切换分支。
  $("#test").treeview({
       animated: "fast",
       collapsed: true,
       control: "#sidetreecontrol",
   });
   ......
  Collapse All | Expand All
   ......
   [b]persist[/b]：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标签里面包含一些分支
   ...: 分支的具体定义在li标签里面
简单事例说明：

[code]
     <!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>
[/code]
版权声明

未经许可，不得转载。