1. <!--<!DOCTYPE html>-->
  2. <!--<HTML>-->
  3. <!--<HEAD>-->
  4.     <!--<TITLE>zTree测试</TITLE>-->
  5.     <!--<meta http-equiv="content-type" content="text/html; charset=UTF-8">-->
  6.     <!--<link rel="stylesheet" href="../bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">-->
  7.     <!--<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>-->
  8.     <!--<script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.all-3.5.js"></script>-->
  9.     <!--<SCRIPT LANGUAGE="JavaScript">-->
  10.         <!--var zTreeObj;-->
  11.         <!--// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）-->
  12.         <!--var setting = {};-->
  13.         <!--// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）-->
  14.         <!--var nodes = [-->
  15.             <!--{name: "父节点1", children: [-->
  16.                     <!--{name: "子节点1"},-->
  17.                     <!--{name: "子节点2"}-->
  18.                 <!--]}-->
  19.         <!--];-->
  20.         <!--$(document).ready(function(){-->
  21.             <!--zTreeObj = $.fn.zTree.init($("#first"), setting, nodes);-->
  22.         <!--});-->
  23.     <!--</SCRIPT>-->
  24. <!--</HEAD>-->
  25. <!--<BODY>-->
  26. <!--<div>-->
  27.     <!--<ul id="first" class="ztree"></ul>-->
  28. <!--</div>-->
  29. <!--</BODY>-->
  30. <!--</HTML>-->
  31.  
  32. <!DOCTYPE html>
  33. <HTML>
  34. <HEAD>
  35.     <TITLE> ZTREE DEMO - Standard Data </TITLE>
  36.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  37.     <link rel="stylesheet" href="../bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
  38.     <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
  39.     <script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.all-3.5.js"></script>
  40.     <SCRIPT type="text/javascript">
  41.  
  42.         var setting = {
  43.             view: {
  44.                 fontCss: getFont,
  45.                 nameIsHTML: true
  46.             }
  47.         };
  48.  
  49.         var nodes =[
  50.             { name:"百度", font:{'font-weight':'bold'} ,url:"http://www.baidu.com/", target:"_blank"},           //超链接到 百度
  51.             { name:"斜体字", font:{'font-style':'italic'}},
  52.             { name:"有背景的字", font:{'background-color':'black', 'color':'white'}},
  53.             { name:"红色字", font:{'color':'red'}},
  54.             { name:"蓝色字", font:{'color':'blue'}},
  55.             { name:"<span style='color:blue;margin-right:0px;'>view</span>.<span style='color:red;margin-right:0px;'>nameIsHTML</span>"},
  56.             { name:"zTree 默认样式"}
  57.         ];
  58.  
  59.         function getFont(treeId, node) {
  60.             return node.font ? node.font : {};
  61.         }
  62.  
  63.         $(document).ready(function(){
  64.             $.fn.zTree.init($("#sys"), setting, nodes);
  65.         });
  66.  
  67.     </SCRIPT>
  68.  
  69. </HEAD>
  70.  
  71. <BODY>
  72. <div class="content_wrap">
  73.     <div class="zTreeDemoBackground left">
  74.         <ul id="sys" class="ztree"></ul>
  75.     </div>
  76. </div>
  77. </BODY>
  78. </HTML>

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

  1. javascript入门 之 ztree（四 自定义Icon）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </TITLE& ...

  2. javascript入门 之 zTree（十四 增删查改）（一）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...

  3. javascript入门 之 zTree（十四 增删查改）（二）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...

  4. javascript入门 之 zTree（十三 移动/复制事件）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...

  5. javascript入门 之 zTree（十二 托拽事件（二））

    1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...

  6. javascript入门 之 zTree（十一 托拽事件（一））

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...

  7. javascript入门 之 ztree (十 checkbox选中事件)

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...

  8. javascript入门 之 ztree (九 单/复选框问题)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  9. javascript入门 之 ztree (八 一系列鼠标事件)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

随机推荐

  1. Oracle - 各类文件损坏处理办法(附实验步骤)

    一.概述 本文将给大家介绍oracle各类文件损坏的现象和应对策略,请注意所有的恢复都是基于有备份的情况,所以请开启数据库的日常备份.文章将从以下文件展开 a. 密码文件 b. 参数文件 c. 控制文 ...

  2. ECharts的使用与总结

    ECharts的使用与总结 一,介绍与需求 1.1,介绍 ECharts商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 ...

  3. Peek和Pop功能开发（3D Touch开发之一）

    1.哪些设备支持3D Touch iPhone 6s/Plus.iPhone 7s/Plus.iPhone 8s/Plus.iPhone X (系统必须是iOS9或者更新的版本) 2.怎么实现Peek ...

  4. angualrjs 总结 随记(二)

    表单控制变量form 控制变量 //字段是否未更改 fromName.inputFieldName.$pristine //字段是否更改 fromName.inputFieldName.$dirty ...

  5. python-pathlib

    2019-12-12 04:27:17 我们知道在不同的操作系统中文件路径的组成方式是不同的,因此在python中关于路径的问题以往我们通常采用os.path.join来进行路径的字符串级别的串联,通 ...

  6. Python第四章-流程控制

    流程控制 在以前的代码中,所有的代码都是交由 Python 忠实地从头执行到结束.但是这些远远不够.很多时候需要根据不同的情况执行不同的代码. 如果你想改变这一工作流程,应该怎么做? 就像这样的情况: ...

  7. 01FPGA设计流程

    今天学习了FPGA设计流程的视频,我理解要做一个完整的FPGA系统,所要经历的步骤,先将它简单总结如下: 我在对上面的流程图进行解释: 第一:设计定义就是我们这个FPGA系统或者FPGA设计所要实现的 ...

  8. PyTorch专栏（五）：迁移学习

    专栏目录: 第一章:PyTorch之简介与下载 PyTorch简介 PyTorch环境搭建 第二章:PyTorch之60分钟入门 PyTorch入门 PyTorch自动微分 PyTorch神经网络 P ...

  9. Mybatis 小记

    1,mybatis 中 $ # 区别 mybatis 动态传参的两种方式 #{ }在动态解析的时候,会将#{ } 解析为一个预编译阶段的一个标记符号?,在预处理阶段才会替换 ${ }在动态解析的时候, ...

  10. spring5之容器始末源码赏析 (一)总览

    首先,本系列并不是以介绍spring5 的新特性为主,之所以以spring5为标题,是因为即将赏析的源码来自最新的spring版本.虽说是spring最新版本,但是容器的整个生命周期与之前版本相比,并 ...