一、文件概述:
1. FhTreeView1.js 生成树的主要js代码
2. FhTreeView1.css 树的样式表文件
3. testJsTreeView.htm 向用户展示树的效果的文件。
二、文件内容
1. FhTreeView1.js
3. testJsTreeView.htm
三、概括一下应用时的具体步骤：
1. 仿照前述js产生js文件
2. 仿照前述css产生css文件
3. 在展示页面中:
（1）引用css文件。例如：
(4) 在需要显示树的地方调用生成树的函数。如下：
打开第一个节点后的效果：
到这里可以发现，类leaf中并没有target属性，现在我们来添加这个属性：
FhTreeView1.js文件中：
1. FhTreeView1.js 生成树的主要js代码
2. FhTreeView1.css 树的样式表文件
3. testJsTreeView.htm 向用户展示树的效果的文件。
二、文件内容
1. FhTreeView1.js
var openImg = new Image();
openImg.src = "open.ico";
var closedImg = new Image();
closedImg.src = "close.ico";
function showBranch(branch){
var objBranch = document.getElementById(branch).style;
if (objBranch.display=="block")
objBranch.display="none";
else
objBranch.display="block";
swapFolder('I' + branch);
}
function swapFolder(img){
objImg = document.getElementById(img);
if (objImg.src.indexOf('close.ico')>-1)
objImg.src = openImg.src;
else
objImg.src = closedImg.src;
}
function tree(){
this.branches = new Array();
this.add = addBranch;
this.write = writeTree;
}
function addBranch(branch){
this.branches[this.branches.length] = branch;
}
function writeTree(){
var treeString = '';
var numBranches = this.branches.length;
for (var i=0;i <numBranches;i++) treeString += this.branches[i].write();
document.write(treeString);
}
function branch(id, text){
this.id = id;
this.text = text;
this.write = writeBranch;
this.add = addLeaf;
this.leaves = new Array();
}
function addLeaf(leaf){
this.leaves[this.leaves.length] = leaf;
}
function writeBranch(){
var branchString = '<span class="branch" ' + 'onClick="showBranch(\'' + this.id + '\')"';
branchString += '><img src="close.ico" id="I' + this.id + '">' + this.text;
branchString += '</span>';
branchString += '<span class="leaf" id="';
branchString += this.id + '">';
var numLeaves = this.leaves.length;
for (var j=0;j<numLeaves;j++) branchString += this.leaves[j].write();
branchString += '</span>';
return branchString;
}
function leaf(text, link){
this.text = text;
this.link = link;
this.write = writeLeaf;
}
function writeLeaf(){
var leafString = '<a href="' + this.link + '">';
leafString += '<img src="doc.ico" border="0">';
leafString += this.text;
leafString += '</a><br>';
return leafString;
}
function CreateATree()
{
var myTree = new tree();
var branch1 = new branch('branch1','JavaScript参考书');
var leaf1 = new leaf('前言','http://www.csdn.net');
var leaf2 = new leaf('绪论','#');
branch1.add(leaf1);
branch1.add(leaf2);
myTree.add(branch1);
var branch2 = new branch('branch2','第一章');
branch2.add(new leaf('第一节','#'));
branch2.add(new leaf('第二节','#'));
branch2.add(new leaf('第三节','#'));
branch1.add(branch2);
var branch3 = new branch('branch2','第二章');
branch3.add(new leaf('第一节','#'));
branch3.add(new leaf('第二节','#'));
branch3.add(new leaf('第三节','#'));
branch1.add(branch3);
myTree.add(new leaf('联系我们','#'));
myTree.write();
}
openImg.src = "open.ico";
var closedImg = new Image();
closedImg.src = "close.ico";
function showBranch(branch){
var objBranch = document.getElementById(branch).style;
if (objBranch.display=="block")
objBranch.display="none";
else
objBranch.display="block";
swapFolder('I' + branch);
}
function swapFolder(img){
objImg = document.getElementById(img);
if (objImg.src.indexOf('close.ico')>-1)
objImg.src = openImg.src;
else
objImg.src = closedImg.src;
}
function tree(){
this.branches = new Array();
this.add = addBranch;
this.write = writeTree;
}
function addBranch(branch){
this.branches[this.branches.length] = branch;
}
function writeTree(){
var treeString = '';
var numBranches = this.branches.length;
for (var i=0;i <numBranches;i++) treeString += this.branches[i].write();
document.write(treeString);
}
function branch(id, text){
this.id = id;
this.text = text;
this.write = writeBranch;
this.add = addLeaf;
this.leaves = new Array();
}
function addLeaf(leaf){
this.leaves[this.leaves.length] = leaf;
}
function writeBranch(){
var branchString = '<span class="branch" ' + 'onClick="showBranch(\'' + this.id + '\')"';
branchString += '><img src="close.ico" id="I' + this.id + '">' + this.text;
branchString += '</span>';
branchString += '<span class="leaf" id="';
branchString += this.id + '">';
var numLeaves = this.leaves.length;
for (var j=0;j<numLeaves;j++) branchString += this.leaves[j].write();
branchString += '</span>';
return branchString;
}
function leaf(text, link){
this.text = text;
this.link = link;
this.write = writeLeaf;
}
function writeLeaf(){
var leafString = '<a href="' + this.link + '">';
leafString += '<img src="doc.ico" border="0">';
leafString += this.text;
leafString += '</a><br>';
return leafString;
}
function CreateATree()
{
var myTree = new tree();
var branch1 = new branch('branch1','JavaScript参考书');
var leaf1 = new leaf('前言','http://www.csdn.net');
var leaf2 = new leaf('绪论','#');
branch1.add(leaf1);
branch1.add(leaf2);
myTree.add(branch1);
var branch2 = new branch('branch2','第一章');
branch2.add(new leaf('第一节','#'));
branch2.add(new leaf('第二节','#'));
branch2.add(new leaf('第三节','#'));
branch1.add(branch2);
var branch3 = new branch('branch2','第二章');
branch3.add(new leaf('第一节','#'));
branch3.add(new leaf('第二节','#'));
branch3.add(new leaf('第三节','#'));
branch1.add(branch3);
myTree.add(new leaf('联系我们','#'));
myTree.write();
}
2. FhTreeView1.css
<style>
font: 10pt 宋体,sans-serif; color: navy; }
.branch{
cursor: pointer;
cursor: hand;
display: block; }
.leaf{
display: none;
margin-left: 16px; }
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
</style>
font: 10pt 宋体,sans-serif; color: navy; }
.branch{
cursor: pointer;
cursor: hand;
display: block; }
.leaf{
display: none;
margin-left: 16px; }
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
</style>
3. testJsTreeView.htm
<html>
<head>
<link rel="stylesheet" href="FhTreeView1.css" type="text/css" media="all" />
<script src = "FhTreeView1.js" ></script>
</head>
<body>
<table>
<tr><td colspan="3">在下面输出树</td></tr>
<tr><td>在右面输出树</td><td>
<script language='javascript'>
CreateATree();
</script>
</td><td>在左面输出树</td></tr>
<tr><td colspan="3">在上面输出树</td></tr>
</table>
</body>
</html>
<head>
<link rel="stylesheet" href="FhTreeView1.css" type="text/css" media="all" />
<script src = "FhTreeView1.js" ></script>
</head>
<body>
<table>
<tr><td colspan="3">在下面输出树</td></tr>
<tr><td>在右面输出树</td><td>
<script language='javascript'>
CreateATree();
</script>
</td><td>在左面输出树</td></tr>
<tr><td colspan="3">在上面输出树</td></tr>
</table>
</body>
</html>
三、概括一下应用时的具体步骤：
1. 仿照前述js产生js文件
2. 仿照前述css产生css文件
3. 在展示页面中:
（1）引用css文件。例如：
<link rel="stylesheet" href="FhTreeView1.css" type="text/css" media="all" />
（2）引用js文件。例如：<script src = "FhTreeView1.js" ></script>
（3）写其他的html代码。(4) 在需要显示树的地方调用生成树的函数。如下：
<script language='javascript'>
CreateATree();
</script>
四、运行效果 CreateATree();
</script>
打开第一个节点后的效果：
到这里可以发现，类leaf中并没有target属性，现在我们来添加这个属性：
FhTreeView1.js文件中：
function leaf(text, link , target ){
this.text = text;
this.link = link;
if( typeof(target) == "undefined" )
{
this.target = "_self"
}
else
{
this.target = target;
}
this.write = writeLeaf;
}
this.text = text;
this.link = link;
if( typeof(target) == "undefined" )
{
this.target = "_self"
}
else
{
this.target = target;
}
this.write = writeLeaf;
}
function writeLeaf(){
var leafString = '<a href="' + this.link + '" target="' + this.target + '">';
leafString += '<img src="doc.gif" border="0">';
leafString += this.text;
leafString += '</a><br>';
return leafString;
}
var leafString = '<a href="' + this.link + '" target="' + this.target + '">';
leafString += '<img src="doc.gif" border="0">';
leafString += this.text;
leafString += '</a><br>';
return leafString;
}
var branch2 = new branch('branch2','第一章');
branch2.add(new leaf('第一节','http://www.sohu.com','_cc'));
branch2.add(new leaf('第二节','#'));
branch2.add(new leaf('第三节','#'));
branch1.add(branch2);
至此，一个完整的javascript类就完成了branch2.add(new leaf('第一节','http://www.sohu.com','_cc'));
branch2.add(new leaf('第二节','#'));
branch2.add(new leaf('第三节','#'));
branch1.add(branch2);
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架