javascript入门之 ztree（五自定义字体）

<!--<!DOCTYPE html>-->

<!--<HTML>-->

<!--<HEAD>-->

    <!--<TITLE>zTree测试</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 LANGUAGE="JavaScript">-->

        <!--var zTreeObj;-->

        <!--// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）-->

        <!--var setting = {};-->

        <!--// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）-->

        <!--var nodes = [-->

            <!--{name: "父节点1", children: [-->

                    <!--{name: "子节点1"},-->

                    <!--{name: "子节点2"}-->

                <!--]}-->

        <!--];-->

        <!--$(document).ready(function(){-->

            <!--zTreeObj = $.fn.zTree.init($("#first"), setting, nodes);-->

        <!--});-->

    <!--</SCRIPT>-->

<!--</HEAD>-->

<!--<BODY>-->

<!--<div>-->

    <!--<ul id="first" class="ztree"></ul>-->

<!--</div>-->

<!--</BODY>-->

<!--</HTML>-->

<!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 = {

            view: {

                fontCss: getFont,

                nameIsHTML: true

            }

        };

        var nodes =[

            { name:"百度", font:{'font-weight':'bold'} ,url:"http://www.baidu.com/", target:"_blank"},           //超链接到 百度

            { name:"斜体字", font:{'font-style':'italic'}},

            { name:"有背景的字", font:{'background-color':'black', 'color':'white'}},

            { name:"红色字", font:{'color':'red'}},

            { name:"蓝色字", font:{'color':'blue'}},

            { name:"<span style='color:blue;margin-right:0px;'>view</span>.<span style='color:red;margin-right:0px;'>nameIsHTML</span>"},

            { name:"zTree 默认样式"}

        ];

        function getFont(treeId, node) {

            return node.font ? node.font : {};

        }

        $(document).ready(function(){

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

        });

    </SCRIPT>

</HEAD>

<BODY>

<div class="content_wrap">

    <div class="zTreeDemoBackground left">

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

    </div>

</div>

</BODY>

</HTML>

javascript入门之 ztree（五自定义字体）的更多相关文章

javascript入门之 ztree（四自定义Icon）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </TITLE& ...
javascript入门之 zTree（十四增删查改）（一）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...
javascript入门之 zTree（十四增删查改）（二）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...
javascript入门之 zTree（十三移动/复制事件）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...
javascript入门之 zTree（十二托拽事件（二））
1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...
javascript入门之 zTree（十一托拽事件（一））
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...
javascript入门之 ztree (十 checkbox选中事件)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...
javascript入门之 ztree (九单/复选框问题)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
javascript入门之 ztree (八一系列鼠标事件)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

随机推荐

聊聊order by的工作机制
总结写在前面: 1. 介绍了orderBy的两种算法流程:全字段排序和 rowid排序. 2. rowid排序相比全字段排序,参与排序字段较少,耗内存较少,多一步回表,如果内存够的情况下MySQ ...
JavaScript表单序列化的方法详解
本文介绍下,在javascript中实现表单序列化的方法,通过实例加深理解,有需要的朋友参考下吧. 在JavaScript中,可以利用表单字段的type属性,连同name和value属性一起实现对表单 ...
《仙剑奇侠传柔情版》Java的简单实现（二）
基于<仙剑奇侠传柔情版>Java的简单实现(二) 2018-12-02 by Kris 需要上次的GameFrame.class中窗口框架承载:https://www.cnblogs.co ...
[组件封装]微信小程序-底部弹框
描述模仿ios浏览器底部弹框效果. 遮罩层淡入淡出,弹框高度根据内容自适应. 效果源码 popup-bottom.wxml  < ...
Django模型层ORM学习笔记
一. 铺垫 1. 连接Django自带数据库sqlite3 之前提到过Django自带一个叫做sqlite3的小型数据库,当我们做本地测试时,可以直接在sqlite3上测试.不过该数据库是小型的,在有 ...
CF1324C Frog Jumps 题解
原题链接简要题意: 现在河面上有 \(n+2\) 块石头,编号 \(0\) 到 \(n+1\),\(1\)~\(n\) 块石头每块上有一个方向,如果是 \(L\),那么青蛙到这块石头上之后只能往左跳 ...
图-连通分量-DFS-并查集-695. 岛屿的最大面积
2020-03-15 16:41:45 问题描述: 给定一个包含了一些 0 和 1的非空二维数组 grid , 一个岛屿是由四个方向 (水平或垂直) 的 1 (代表土地) 构成的组合.你可以假设二 ...
贪心-Bag of Tokens
2020-01-20 22:32:28 问题描述: 问题求解: 双指针 + 贪心. public int bagOfTokensScore(int[] tokens, int P) { Arrays. ...
GZOI 2017配对统计树状数组
题目 https://www.luogu.com.cn/problem/P5677 分析最开始读题的时候没有读的太懂,以为i是在选定区间内给的,实际上不是,这道题的意思应该是在l和r的区间内找出有多 ...
构建一个简单的 Google Dialogflow 聊天机器人【上】
概述本教程将向您展示如何构建一个简单的Dialogflow聊天机器人,引导您完成Dialogflow的最重要功能.您将学习如何: 创建Dialogflow帐户和第一个Dialogflow聊天机器人, ...

javascript入门 之 ztree（五 自定义字体）

javascript入门 之 ztree（五 自定义字体）的更多相关文章

随机推荐

热门专题

javascript入门之 ztree（五自定义字体）

javascript入门之 ztree（五自定义字体）的更多相关文章