jQuery树形菜单插件zTree

所属分类:导航-垂直导航,文件树

 139024  519  查看评论 (19)
分享到微信朋友圈
X
jQuery树形菜单插件zTree ie兼容6

更新时间:2017/5/24下午5:37:58

更新说明:更新至zTree v3.5.28版


zTree v3.x 入门指南

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

步骤 1、文件准备

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

步骤 2、编写 html 页面

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

    1)  "<!DOCTYPE html>" 是必需的!

    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>
相关插件-垂直导航,文件树

jquery下拉菜单导航

jquery hover事件下拉菜单导航仿京东商城商品分类导航样式布局,通过鼠标滑过商品分类导航展示商品分类子菜单内容的效果
  垂直导航
 47415  368

Css多级侧边栏导航

纯Css多级侧边栏导航
  垂直导航
 44220  395

jQuery条件锚点导航

自动定位锚点导航
  垂直导航
 41040  372

超酷的SVG左侧导航栏特效

超酷的SVG左侧导航栏特效(Cool SVG left navigation bar effects)
  垂直导航
 53433  612

讨论这个项目(19)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    qzuser 0
    2018/9/26 16:51:05
    请问下,当我勾选了选项后怎么获取已经勾选项的标识id啊? 回复
    见你,人群中 0
    2017/6/5 11:07:27

    可不可以不跨页面进行切换页

    回复
    0
    2017/6/5 9:14:22

    点击树形菜单可以不跨页面进行切换么

    回复
    一直在路上 0
    2017/5/11 13:43:38

    为何查看演示的时候提示文件未找到

    回复
    youyoumy 0
    2017/3/11 0:08:02

    恶心,就是zTree原始API,没用

        默默是一只爱犬0
        2017/12/13 18:49:26

    回复
    自由kj 0
    2016/10/20 11:10:13
    多谢,有view的配置就完美了 回复
    purple? 0
    2016/9/1 16:09:23
    苏宝宝 0
    2016/5/18 22:05:19
    smartdw 0
    2016/5/3 20:05:46
    正在用,很强大啊。 回复
    wolly 0
    2016/2/25 17:02:37
    很漂亮~~~
        默默是一只爱犬0
        2017/12/13 18:48:17
        是的
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复