<!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. FastDFS源码学习（一）FastDFS介绍及源码编译安装

    FastDFS是淘宝的余庆主导开发的一个分布式文件系统,采用C语言开发,性能较优.在淘宝网.京东商城.支付宝和某些网盘等系统均有使用,使用场景十分广泛. 下图来源:https://blog.csdn. ...

  2. js String方法总结

    字符方法(3) charAt(pos: number): string; // 返回特定位置的字符. charCodeAt(index: number): number; // 返回表示给定索引的字符 ...

  3. XiaoQi.Study项目(二)

    一.EF Core 使用的补充 1) 创建 接口 IEFCoreService 2)   实现 接口 EFCoreService 3) 在Startup.cs 中注册 ef 服务 并在控制器中注入使用 ...

  4. centOS7python版本升到3

    我们使用Python源代码编译的方式安装python3. 一.安装必要工具 yum-utils ,它的功能是管理repository及扩展包的工具 (主要是针对repository) $ sudo y ...

  5. VMware Tools失效的处理方案

    VMware Tools是一个实现主机与虚拟机文件分享,具有可支持自由拖拽的功能的工具,如果没有VM tools,那么没有了复制粘贴切换的虚拟机是很不方便的. 长时间未开的虚拟机,一次尝试拖拽Wind ...

  6. CVE-2019-3396：Confluence未授权模板注入_代码执行

    title: Confluence未授权模板注入/代码执行(CVE-2019-3396) tags: [poc,cve] 简介 Confluence是一个专业的企业知识管理与协同软件,也可以用于构建企 ...

  7. Python字符串及基本操作（入门必看）

    基础入门的知识一直没有更新完,今天小张接着给大家带来入门级的字符串的常用操作.本文适合刚入门的小白,大佬们请绕过. 一.定义 字符串的意思就是“一串字符”,比如“Hello,Charlie”是一个字符 ...

  8. Django HttpResponse

    HttpResponse 概述:给浏览器返回数据 HttpRequest对象是由django创建的,HttpResponse对象由程序员创建 用法 1:不调用模板,直接返回数据. 例: def get ...

  9. 汉诺塔Java实现

    public class Hanoi { public static void main(String[] args ) { Hanoi hanoi = new Hanoi(); hanoi.hano ...

  10. ECMAScript 6 基础

    ECMAScript 6 基础 ECMAScript 6 简介 JavaScript 三大组成部分 ECMAScript DOM BOM ECMAScript 发展历史 https://develop ...