1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4.     <TITLE> ZTREE DEMO - Standard Data </TITLE>
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.     <link rel="stylesheet" href="../bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
  7.     <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
  8.     <script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.all-3.5.js"></script>
  9.     <SCRIPT type="text/javascript">
  10.         <!--
  11.         var setting = {
  12.             data: {
  13.                 simpleData: {
  14.                     enable: true
  15.                 }
  16.             }
  17.         };
  18.  
  19.         var nodes =[
  20.             { id:1, pId:0, name:"展开、折叠 自定义图标不同", open:true, iconOpen:"../css/img/diy/1_open.png", iconClose:"../css/img/diy/1_close.png"},
  21.             { id:11, pId:1, name:"叶子节点1", icon:"../css/img/diy/2.png"},
  22.             { id:12, pId:1, name:"叶子节点2", icon:"../css/img/diy/3.png"},
  23.             { id:13, pId:1, name:"叶子节点3", icon:"../css/img/diy/5.png"},                             //icon 方式定义图标
  24.             { id:2, pId:0, name:"展开、折叠 自定义图标相同", open:true, icon:"../css/img/diy/4.png"},
  25.             { id:21, pId:2, name:"叶子节点1"},
  26.             { id:22, pId:2, name:"叶子节点2"},
  27.             { id:23, pId:2, name:"叶子节点3", iconSkin:"ly"},                                           //iconSkin  方式定义图标
  28.             { id:3, pId:0, name:"不使用自定义图标", open:true },
  29.             { id:31, pId:3, name:"叶子节点1"},
  30.             { id:32, pId:3, name:"叶子节点2"},
  31.             { id:33, pId:3, name:"叶子节点3"}
  32.  
  33.         ];
  34.  
  35.         $(document).ready(function(){
  36.             $.fn.zTree.init($("#sys"), setting, nodes);
  37.         });
  38.         //-->
  39.     </SCRIPT>
  40.  
  41.     <style type="text/css">
  42.         .ztree li span.button.ly_ico_docu{margin-right:2px; background: url(../css/img/diy/8.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
  43.     </style>
  44. </HEAD>
  45.  
  46. <BODY>
  47. <div class="content_wrap">
  48.     <div class="zTreeDemoBackground left">
  49.         <ul id="sys" class="ztree"></ul>
  50.     </div>
  51. </div>
  52. </BODY>
  53. </HTML>

javascript入门 之 ztree（四 自定义Icon）的更多相关文章

  1. javascript入门 之 zTree（十四 增删查改）（一）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...

  2. javascript入门 之 zTree（十四 增删查改）（二）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...

  3. javascript入门 之 ztree（五 自定义字体）

    <!--<!DOCTYPE html>--> <!--<HTML>--> <!--<HEAD>--> <!--<TI ...

  4. javascript入门 之 zTree（十三 移动/复制事件）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...

  5. javascript入门 之 zTree（十二 托拽事件（二））

    1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...

  6. javascript入门 之 zTree（十一 托拽事件（一））

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...

  7. javascript入门 之 ztree (十 checkbox选中事件)

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...

  8. javascript入门 之 ztree (九 单/复选框问题)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  9. javascript入门 之 ztree (八 一系列鼠标事件)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

随机推荐

  1. juery 实现选项卡

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 深入理解“骑士”漏洞 VoltJockey

    先理解一下题目:VoltJockey: Breaching TrustZone by Software-Controlled Voltage Manipulation over Multi-core ...

  3. 普通索引和唯一索引如何选择（谈谈change buffer）

    假设有一张市民表(本篇只需要用其中的name和id_card字段,有兴趣的可以翻看“索引”篇,里面有建表语句) 每个人都有一个唯一的身份证号,且业务代码已经保证不会重复. 由于业务需求,市民需要按身份 ...

  4. Mysql优化大分页查询

    如题,年前做了一个需求,涉及到Mysql大分页查询,整理一下,希望对需要的小伙伴有帮助. 背景分页查询的性能瓶颈B+树简述B+比起二叉查找树,有什么优势?分页查询过程测试集解决方法1 延迟关联法:2 ...

  5. Journal of Proteome Research | An automated ‘cells-to-peptides’ sample preparation workflow for high-throughput, quantitative proteomic assays of microbes (解读人：陈浩）

    文献名:An automated ‘cells-to-peptides’ sample preparation workflow for high-throughput, quantitative p ...

  6. shellcode

    msf > use windows/exec msf > set CMD calc.exe msf > set EXITFUNC thread msf > generate - ...

  7. centos7 LVM扩容案例

    测试数据 cd / && dd if=/dev/zero of=file bs=1M count=10000 将磁盘变大的测试命令. 生产环境不要用. 这只是用于测试扩容后的效果 LV ...

  8. [JVM教程与调优] 什么是JVM运行时参数？

    我们接着上一章节[JVM教程与调优] JVM都有哪些参数类型?的内容继续讲解,这章我们来介绍一下:如何查看JVM运行时参数.这一点十分重要,因为我们在进行JVM参数调优的时候,我们首先得知道目前系统运 ...

  9. Python第六章-函数01-函数的概念和使用

    函数 为了便于程序的维护和更好的实现模块化,好的程序都会分解为很多函数. 可以这么说,对于任何的编程语言,函数都是一个非常重要的概念. python 不仅简化了函数的定义过程,而且还大量借鉴了其他函数 ...

  10. MySQL数据库参数调优方法

    怎么配置MySQL服务器,但考虑到服务器硬件配置的不同,具体应用的差别,那些文章的做法只能作为初步设置参考,我们需要根据自己的情况进行配置优化,好的做法是MySQL服务器稳定运行了一段时间后运行,根据 ...