<!DOCTYPE html>

<HTML>

<HEAD>

    <TITLE> ZTREE DEMO - Standard Data </TITLE>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="../bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">

    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.all-3.5.js"></script>

    <SCRIPT type="text/javascript">

        <!--

        var setting = {

            data: {

                simpleData: {

                    enable: true

                }

            }

        };

        var nodes =[

            { id:1, pId:0, name:"展开、折叠 自定义图标不同", open:true, iconOpen:"../css/img/diy/1_open.png", iconClose:"../css/img/diy/1_close.png"},

            { id:11, pId:1, name:"叶子节点1", icon:"../css/img/diy/2.png"},

            { id:12, pId:1, name:"叶子节点2", icon:"../css/img/diy/3.png"},

            { id:13, pId:1, name:"叶子节点3", icon:"../css/img/diy/5.png"},                             //icon 方式定义图标

            { id:2, pId:0, name:"展开、折叠 自定义图标相同", open:true, icon:"../css/img/diy/4.png"},

            { id:21, pId:2, name:"叶子节点1"},

            { id:22, pId:2, name:"叶子节点2"},

            { id:23, pId:2, name:"叶子节点3", iconSkin:"ly"},                                           //iconSkin  方式定义图标

            { id:3, pId:0, name:"不使用自定义图标", open:true },

            { id:31, pId:3, name:"叶子节点1"},

            { id:32, pId:3, name:"叶子节点2"},

            { id:33, pId:3, name:"叶子节点3"}

        ];

        $(document).ready(function(){

            $.fn.zTree.init($("#sys"), setting, nodes);

        });

        //-->

    </SCRIPT>

    <style type="text/css">

        .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}

    </style>

</HEAD>

<BODY>

<div class="content_wrap">

    <div class="zTreeDemoBackground left">

        <ul id="sys" class="ztree"></ul>

    </div>

</div>

</BODY>

</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. nodeJS中定时任务cron的使用

    cron模块可以帮助我们在node中定时执行任务.如果你的定时需求是简单的setInterval()与setTimeout()计时器所无法满足的比较复杂的定时规则,推荐使用cron来配置. 安装cro ...

  2. Wireshark过滤器写法总结

    目录 #Wireshark提供了两种过滤器: 1.捕获过滤器 2.显示过滤器 #过滤器具体写法 #显示过滤器写法 #捕捉过滤器写法 #Wireshark提供了两种过滤器: 1.捕获过滤器 捕获过滤器: ...

  3. 一文带你解读：卷积神经网络自动判读胸部CT图像的机器学习原理

    本文介绍了利用机器学习实现胸部CT扫描图像自动判读的任务,这对我来说是一个有趣的课题,因为它是我博士论文研究的重点.这篇文章的主要参考资料是我最近的预印本 “Machine-Learning-Base ...

  4. DOTNET CORE源码分析之IOC容器结果获取内容补充

    补充一下ServiceProvider的内容 可能上一篇文章DOTNET CORE源码分析之IServiceProvider.ServiceProvider.IServiceProviderEngin ...

  5. DS01-线性表

    0.PTA得分截图 1.本周内容总结 1.1总结线性表内容 顺序表结构体定义 typedef struct LNode *List struct LNode { ElementType Data[MA ...

  6. 全国职业技能大赛信息安全管理与评估-第三阶段-弱口令自动爆破+读取Flag脚本

    自动爆破SSH弱口令+读取Flag #coding=utf-8 import paramiko sshc = paramiko.SSHClient() sshc.set_missing_host_ke ...

  7. Java与C语言的区别——含面向对象介绍

    很多初学编程的小伙伴或者想要学习编程的小白弄不清C语言和Java的区别.本文就针对萌新们尽量用通俗的语言来介绍一下我所理解的编程语言界的两大巨头. 为什么说是两巨头,介绍之前我们先看一下某度搜索出来的 ...

  8. OpenCV-Python ORB(面向快速和旋转的BRIEF) | 四十三

    目标 在本章中,我们将了解ORB的基础知识 理论 作为OpenCV的狂热者,关于ORB的最重要的事情是它来自" OpenCV Labs".该算法由Ethan Rublee,Vinc ...

  9. OpenCV-Python 直方图-4：直方图反投影 | 二十九

    目标 在本章中,我们将学习直方图反投影. 理论 这是由Michael J. Swain和Dana H. Ballard在他们的论文<通过颜色直方图索引>中提出的. 用简单的话说是什么意思? ...

  10. 一份精简的Numpy使用指引（附python演练）

    欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! Numpy 的主要用途是以数组的形式进行数据操作. 机器学习中大多 ...