首页 | 5150 | 821 | 2904 | 添加收藏 上一个 下一个
jQuery树形菜单插件zTree

zTree v3.x 入门指南


考虑到还是会有第一次使用 zTree 的朋友,因此入门指南不能少,至少让大家快速明白如何开始制作一棵属于自己的树。


步骤 1、文件准备


将需要使用的 zTree v3.x 相关的 js、css、img 文件分别放置到相应目录,并且保证相对路径正确


步骤 2、编写 html 页面


按照以下代码,制作 html 页面,访问试试看吧,注意:



  1. "" 是必需的!

  2. zTree 的容器 className 别忘了设置为 "ztree"

  3. 入门成功后,就可以按照顺序去看 Demo 了,直接看看源码,应该能看懂的


<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
   var zTreeObj;
   // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
   var setting = {};
   // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
   var zNodes = [
   {name:"test1", open:true, children:[
      {name:"test1_1"}, {name:"test1_2"}]},
   {name:"test2", open:true, children:[
      {name:"test2_1"}, {name:"test2_2"}]}
   ];
   $(document).ready(function(){
      zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   });
  </SCRIPT>
 </HEAD>
<BODY>
<div>
   <ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>