zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    前端学习之路,前端开发人员如何在团队中规范git commit提交记录
    基于AntV图表库的Ant DeSign Charts图表展示的简单应用
    基于React-Amap组件库的高德地图简单应用
    高效的Coding,前端开发人员值得一看的前端开发工具
    解决git pull拉取更新代码失败,unable to resolve reference ‘refs/remotes/origin/xxx分支名’: reference broken问题
    position: sticky实现导航栏下滑吸顶效果
    javaScript保留三位有效数字
    封装属于自己的axios请求
    微博立场检测 60分Baseline
    Sequence to Sequence Learning with Neural Networks论文阅读
  • 原文地址:https://www.cnblogs.com/viplanyue/p/12700651.html
Copyright © 2011-2022 走看看