<!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. 「踩坑记」Android API 判断权限申请结果的闪退问题

    这几天尝试着用Android Studio写一个小工具的时候遇到了一个动态权限申请的问题.权限的申请使用的语句为: ActivityCompat.requestPermissions(this, ne ...

  2. zabbix笔记_008 zabbix监控交换机路由器

    zabbix监控交换机路由器 要监控路由器交换机,需要使用到SNMP协议 SNMP是一个简单网络管理协议,他基于C/S模型实现的监控和管理. 服务器安装SNMP: yum -y install net ...

  3. 洛谷1363 幻象迷宫dfs

    题目网址:https://www.luogu.com.cn/problem/P1363 迷宫是无限多块地图拼接而成的,问是否可以在迷宫中走无限远.解决方案是dfs,走出初始地图之后的位置映射到原位置( ...

  4. 太赞了！阿里几位工程师重写了 《Java 并发编程》

    事情是这样的,前些日子和得知一个读者在准备阿里的面试,我蛮有兴趣的跟他聊了起来,随着话题越来越深入,我发现这位读者有意思,他和几位阿里的工程师之前编写了一本 concurrent.redspider. ...

  5. Servlet（五）----Request登录案例

    ##  案例:用户登录 准备工作: 准备Maven  配置pom.xml <?xml version="1.0" encoding="UTF-8"?> ...

  6. windows10 64位 安装mysql服务端 并使用navicat客户端链接 掉的一堆坑

    1.目的 安装mysql服务端 并使用navicat客户端链接 2.过程 1)下载mysql服务端 下载过程(参考https://blog.csdn.net/youxianzide/article/d ...

  7. [并查集+逆向思维]Codeforces Round 722C Destroying Array

    Destroying Array time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  8. NASNet : Google Brain经典作，改造搜索空间，性能全面超越人工网络，继续领跑NAS领域 | CVPR 2018

    论文将搜索空间从整体网络转化为卷积单元(cell),再按照设定堆叠成新的网络家族NASNet.不仅降低了搜索的复杂度,从原来的28天缩小到4天,而且搜索出来的结构具有扩展性,在小模型和大模型场景下都能 ...

  9. Anomaly Detection-异常检测算法（Coursera-Ng-ML课程）

    现实生活中有许多需要提前预防一些异常问题出现的情况,例如在飞机起飞前,对飞机各部分进行评估,看发动机等各个零件是否性能正常,若有潜在的问题(可能出现异常情况),则需要及时检修或更换. 那么我们如何去评 ...

  10. OpenCV-Python 交互式前景提取使用GrabCut算法 | 三十五

    目标 在本章中, 我们将看到GrabCut算法来提取图像中的前景 我们将为此创建一个交互式应用程序. 理论 GrabCut算法由英国微软研究院的Carsten Rother,Vladimir Kolm ...