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>
  • 相关阅读:
    【JavaScript数据结构系列】04-优先队列PriorityQueue
    【JavaScript数据结构系列】02-栈Stack
    【JavaScript数据结构系列】01-数组Array
    【JavaScript数据结构系列】00-开篇
    2019个人年度总结
    批处理·命令行中常用的操作
    flutter 环境出错后排查
    [图解算法]线性时间选择Linear Select——<递归与分治策略>
    阿里云轻量应用服务器——配置MySQL远程连接(踩坑,LAMP+CentOS)
    [知识复习] C语言文件读写
  • 原文地址:https://www.cnblogs.com/viplanyue/p/12700651.html
Copyright © 2011-2022 走看看