<!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. css3特性简要概括

    ---恢复内容开始--- css3新增核心知识 背景和边框 文本效果 2d/3d转换 过渡和动画 多列布局 弹性盒模型 媒体查询 增强选择器 css3浏览器兼容性 css3在线工具 css3gener ...

  2. 曹工说Spring Boot源码（23）-- ASM又立功了，Spring原来是这么递归获取注解的元注解的

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  3. 035.集群安全-Pod安全

    一 Pod安全 1.1 PodSecurityPolicy启用 为了更精细地控制Pod对资源的使用方式,Kubernetes从1.4版本开始引入了PodSecurityPolicy资源对象对Pod的安 ...

  4. C/C++、C#、JAVA(一)：代码模板与库代码的引入

    代码默认模板 编译性高级编程语言中,几乎每种语言,都有个静态的 main 方法作为程序启动入口,每种语言都有其编写规范.为了学习 C/C++.C#.JAVA四种语言,我们要先从默认代码模板中,慢慢摸索 ...

  5. 使用TensorFlow进行训练识别视频图像中物体

    本教程针对Windows10实现谷歌公布的TensorFlow Object Detection API视频物体识别系统,其他平台也可借鉴. 本教程将网络上相关资料筛选整合(文末附上参考资料链接),旨 ...

  6. 渗透神器cobalt strike在数字杀软环境下的使用

    当我们拿到cobalt strike的beacon权限时,使用它如何渗透目标内网.因为我看网上的文章都是在无杀软下写的,这难免有点脱离实战环境,本文主要测试CS的beacon在数字杀软环境下进行常规渗 ...

  7. 简单BBS项目开始（一）

    1.BBS需求分析和创建ORM 1. 需要哪些表 1. UserInfo 1. username 2. password 3. avatar #头像图片 2. 文章表: title publish_d ...

  8. MySQL学习(5)

    三 触发器 对某个表进行某种操作(如:增删改查),希望触发某个动作,可以使用触发器. 1.创建触发器 create trigger trigger1_before_insert_tb1 before ...

  9. 从 ASP.NET Core 3.1 迁移到 5.0

    3月中旬,微软官方已经发布了dotnet 5的第一个预览版:5.0.0-preview.1. dotnet core经过前几个版本的发展和沉淀,到3.1已经基本趋于稳定. 所以从.net core 3 ...

  10. 简述UDF/UDAF/UDTF是什么，各自解决问题及应用场景

    UDF User-Defined-Function 自定义函数 .一进一出: 背景 系统内置函数无法解决实际的业务问题,需要开发者自己编写函数实现自身的业务实现诉求. 应用场景非常多,面临的业务不同导 ...