<!--<!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(五 自定义字体)
最新推荐文章于 2023-03-15 11:37:29 发布