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>
  • 相关阅读:
    团队管理-每日站会,代码审查,结对编程
    Linux awk命令详解
    【Vegas原创】Excel中,日期和时间用&连接后格式不正确的解决方法
    SQLServer 数据库变成单个用户后无法访问问题的解决方法
    【Vegas原创】查询SQL Server更改记录的语句
    【Vegas原创】SQL Server 只安装客户端的方法
    IT? 挨踢
    64位Windows无法打开会声会影X5的解决方法
    小型IT部门建设之我见
    要熟练掌握的七个人生工具
  • 原文地址:https://www.cnblogs.com/viplanyue/p/12700651.html
Copyright © 2011-2022 走看看