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（五自定义字体）
