内容正在载入中,请稍后……
公告
About me
搜索
统计
其他
20 Sep.2012

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

作者: 我就是个世界   分类:技术&学习 » 网页设计   出处:本站原创            | |
项目中使用到树形菜单,正好项目有在用jquery,所以找到了这个基于 jquery的树形菜单插件treeview,网上对此的资料好像很少,官方文档移了地方,也不知道哪去了,最后终于找到一个简单的介绍。

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",
   });
   ......
  Collapse All | Expand All
   ......
   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标签里面包含一些分支
   ...: 分支的具体定义在li标签里面
简单事例说明:


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

分享到QQ空间
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
OpenID登入 权限选项 表情