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的SVG学习
SVG 意为可缩放矢量图形(Scalable Vector Graphics). HTML三种方法导入svg文件: <html xmlns:svg="http://www.w3.org ...
File的功能--> 获取功能-->所有的根目录 | 创建文件功能,但是如果文件已经存在-->不再创建(新手)
//导入的包.import java.io.File;import java.io.FileFilter;import java.io.IOException; // 获取功能-->所有的根目录 ...
fastjson JSONObject.toJSONString 出现 $ref: "$."的解决办法（重复引用）
首先,fastjson作为一款序列化引擎,不可避免的会遇到循环引用的问题,为了避免StackOverflowError异常,fastjson会对引用进行检测. 如果检测到存在重复/循环引用的情况,fa ...
List集合概述和特点
List集合概述有序集合(也称序列)用户可以精确控制列表的每一个元素的位置插入,用户可以通过整数索引访问元素,并搜索列表中的元素与set集合不同,列表通常允许重复的元素 List集合的特点有序: ...
android 练习效果（界面一）
adt-bundle环境搭建(Win7+Win10)
一.adt-bundle安装包安装包的下载地址:http://tools.android-studio.org/index.php/adt-bundle-plugin 链接中包含有windows. ...
springMVC容器简介和执行流程
先来看一下,初始化的大体流程: 然后,我们再来看一下,我们的控制器DispatcherServlet的类图及继承关系. 系统启动的时候根据配置文件创建spring的容器, 首先是发送http请求到 ...
MySQL----SQL操作
1.什么是SQL? Structured Query Language:结构化查询语言其实就是定义了操作所有关系型数据库的规则.每一种数据库操作的方式存在不一样的地方,称为“方言”. 2.SQL通用 ...
Building Applications with Force.com and VisualForce(Dev401)(十三):Implementing Business Processes:Automating Business Processes Part II
ev401-014:Implementing Business Processes:Automating Business Processes Part II Module Agenda1.Multi ...
CNN更新换代！性能提升算力减半，还即插即用
传统的卷积运算,要成为过去时了. Facebook和新加坡国立大学联手提出了新一代替代品:OctConv(Octave Convolution),效果惊艳,用起来还非常方便. OctConv就如同卷积 ...

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

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

随机推荐

热门专题

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

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