<!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. iframe的父子层跨域 用了百度的postMessage（）方法

    父层:第一个是方法申明 第二个是接收子层过来的数据 <script type="text/javascript"> $("#main").load( ...

  2. FastDFS源码学习（一）FastDFS介绍及源码编译安装

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

  3. (转)SpringBoot :(has no explicit mapping for /error)

    转载自:https://www.cnblogs.com/panchanggui/p/9945261.html 异常:This application has no explicit mapping f ...

  4. Fluent算例精选｜03利用VOF和蒸发-冷凝模型

    通过学习本算例您将获得? 1.学会基本的VOF模型设置流程 2.学会利用蒸发-冷凝模型来模拟传热沸腾 目录 1摘要4 2传热沸腾模型介绍4 3前处理4 4求解设置5 4.1启动Fluent5 4.2网 ...

  5. Natas33 Writeup（Phar反序列化漏洞）

    Natas33: 又是一个上传文件的页面,源码如下: // graz XeR, the first to solve it! thanks for the feedback! // ~morla cl ...

  6. jsp(3，6，9) EL表达式及JSTL

    1. jsp 1.1jsp是什么 全称: Java Server Pages,java服务器页面.和Servlet一样,是sun公司定义的一种动态网页开发技术.    特点:基于html模版,可以在h ...

  7. SCF（SenparcCoreFramework） 系列教程（一）：项目介绍及快速搭建

    2020年3月25日的“盛派周三分享”活动首次使用直播的方式与大家见面,共有 500 多人参与了活动,得到了众多开发者的好评,并强烈要求我分享 PPT,这点要求当然必须满足啦! 除此以外,还有许多开发 ...

  8. editplus软件使用技巧

    1.文本文件的特点 注:不针对editplus这个软件,对于其他的文本文件处理软件也同样适用. 文本文件就是不包含其它文字格式(比如字体,字号,对齐,行间距等)以及富文本(比如图片,表格等)的一种纯文 ...

  9. VIM不正常退出产生的swp文件

    VIM不正常退出产生的swp文件 当你非正常关闭vim编辑器时(比如直接关闭终端或者电脑断电),会生成一个.swp文件,这个文件是一个临时交换文件,用来备份缓冲区中的内容. 第一次产生的交换文件名为“ ...

  10. Codeforce219C-Color Stripe

    E. Color Stripe time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...