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

随机推荐

iframe 框架父页面刷新子页面
1.父页面添加: <script> function testBtn(){ var reshSrc = document.getElementById('myFrame').src; ...
Qt5小Demo之猜数字游戏
玩法:设定时间进行猜数字,所猜数字为一个四位数,输入自己的数字,系统会提示是大了还是小了,依据条件逐步逼近正确结果.在规定时间里猜对即获胜,否则即失败. 平台支持:Win10下测试正常. 源码地址: ...
Gorm 预加载及输出处理（三）- 自定义时间格式
前言 Gorm 中 time.Time 类型的字段在 JSON 序列化后呈现的格式为 "2020-03-11T18:26:13+08:00",在 Go 标准库文档 - time 的 ...
推荐三款好用的JSON格式化工具——JSON-handle & HiJson & JSTool
工具一:JSON-handle JSON-Handle是一款谷歌浏览器插件. 1.访问http://jsonhandle.sinaapp.com/下载 2.打开Chrome浏览器的扩展程序(访问chr ...
Go语言defer分析
什么是defer? defer语句是专门在函数结束以后做一些清理工作的.我们先举一个例子来更好的理解,现在有一个函数,它的作用是把一个文件内容拷贝到另一个文件. func CopyFile(dstNa ...
Journal of Proteome Research | Single-Shot Capillary Zone Electrophoresis−Tandem Mass Spectrometry Produces over 4400 Phosphopeptide Identifications from a 220 ng Sample （分享人:赵伟宁）
Title: Single-Shot Capillary Zone Electrophoresis−Tandem Mass Spectrometry Produces over 4400 Phosph ...
drf认证源码分析
补充: 一.django中间件之路由斜杠的自动添加源码其实我们每次在写路由的时候,如果在路由层给他设置的是加/,但实际上我们在浏览器中输入的时候并没有加/发现也能调用,前面说了是浏览器内部走了重定向 ...
MySql最左匹配原则解析
看前提问:table中有多个字段组成的联合索引(a,b,c),查询时哪些情况能够命中索引呢? 话不多说,直接开搞: 数据库表结构如下: CREATE TABLE `test` ( `id` ) uns ...
动态规划(Dynamic Programming)算法与LC实例的理解
动态规划(Dynamic Programming)算法与LC实例的理解希望通过写下来自己学习历程的方式帮助自己加深对知识的理解,也帮助其他人更好地学习,少走弯路.也欢迎大家来给我的Github的Le ...
Ubuntu16.04下安装搜狗输入法及实现中英文转换问题
1．问题描述版本信息:Ubuntu16.04 解决问题:搜狗输入法的安装 2．解决办法 STEP1:搜索搜狗输入法for Linux --> 选择64bit --> 下载得到一个sogo ...

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

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

随机推荐

热门专题

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

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