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 ...

随机推荐

css中：如何让一个图片（不知道宽高，宽高可能比父元素div大），在父元素div内部水平垂直居中，并且不溢出父元素div，且图片不拉伸变形（可等比例缩小）？
欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...
【Weiss】【第04章】AVL树例程
普通的二叉搜索树可能会由于数据不平均.删除产生高度差等原因,使树倾向于不平衡生长,导致操作慢于O(NlogN). 为应对此现象,将搜索.删除.插入的最坏时间也控制在O(NlogN)上,产生了平衡二叉树 ...
Linux下Tomcat优化
/etc/profileexport JAVA_OPTS="-server -showversion -Xms2048m -Xmx2048m -XX:PermSize=256m -XX:Ma ...
.net core 依赖注入, autofac 简单使用
综述 ASP.NET Core 支持依赖注入, 也推荐使用依赖注入. 主要作用是用来降低代码之间的耦合度. 什么是控制反转? 控制反转(Inversion of Control,缩写为IoC),是面 ...
ORM单表查询，跨表查询，分组查询
ORM单表查询,跨表查询,分组查询单表查询之下划线 models.Tb1.objects.filter(id__lt=10, id__gt=1) # 获取id大于1 且小于10的值models ...
CMDB_Agent_ssh版本分析
目录 CMDB_Agent+ssh版本+server端 CMDB_Agent版本 CMDB概念 CMDB_Agent介绍 agent方案 ssh类方案相比较 client端架构目录 bin-sta ...
Prism 源码解读3-Modules加载
介绍在软件开发过程中,总想组件式的开发方式,各个组件之间最好互不影响,独立测试.Prism的Modules很好的满足了这一点. 这个架构图很好了讲解了Prism的Modules的概念 Prism支持 ...
洛谷5026 Lycanthropy 差分套差分
题目链接 https://www.luogu.com.cn/problem/P5026 题意在一个长度为m的序列中,每次给一个下标x,和一个权值v,然后从x-v*3到x-v*2单调递增,从x-v*2 ...
使用Python创建自己的Instagram滤镜
不知道你有没有使用过Instagram滤镜,它们非常方便,只需单击几个按钮,就可以变换我要发布的照片. 你是否想过自己可以创建一个?答案是可以的! 在本文中,我将向你展示如何使用代码和示例图像来创 ...
Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序)
Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序) 说明:在实际的业务场景中(无论是TO B还是TO C)不管是休闲食品.餐饮.水果.日用百货.母婴等高频 ...

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

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

随机推荐

热门专题

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

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