<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页教学网无限级树型菜单演示</title>
<script type="text/javascript">
//more javascript from http://www.webjx.com
var temp, temp2, cookieArray, cookieArray2, cookieCount;
function initiate(){
cookieCount=0;
if(document.cookie){
cookieArray=document.cookie.split(";");
cookieArray2=new Array();
for(i in cookieArray){
cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
}
}
cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();
temp=document.getElementById("containerul");
for(var o=0;o<temp.getElementsByTagName("li").length;o++){
if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){
temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(tree/minus.png)":"url(tree/plus.png)"):"url(tree/plus.png)";
temp2.onclick=function(){
showhide(this.parentNode);
writeCookie();
}
temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)
temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";
if(cookieArray[cookieCount]=="true"){
showhide(temp.getElementsByTagName("li")[o]);
}
cookieCount++;
}
else{
temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = "url(tree/page.png)";
temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);
}
}
}
function showhide(el){
el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";
el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(tree/minus.png)":"url(tree/plus.png)";
}
function writeCookie(){ // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.
cookieArray=new Array()
for(var q=0;q<temp.getElementsByTagName("li").length;q++){
if(temp.getElementsByTagName("li")[q].childNodes.length>0){
if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){
cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");
}
}
}
document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();
}
</script>
<style type="text/css"><!--
#containerul, #containerul ul{
text-align:left;
margin:0; /* Removes browser default margins applied to the lists. */
padding:0; /* Removes browser default padding applied to the lists. */
}
#containerul li{
margin:0 0 0 30px; /* A left margin to indent the list items and give the menu a sense of structure. */
padding:0; /* Removes browser default padding applied to the list items. */
list-style-type:none; /* Removes the bullet point that usually goes next to each item in a list. */
}
#containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */
float:left;
width:12px;
height:1em;
background-position:0 50%;
background-repeat:no-repeat;
}
--></style>
</head>
<body>
<ul id="containerul">
<li> 网页教学网
<ul>
<li> <a href="http://www.webjx.com/htmldata/sort/2.html">建站指南</a>
</li>
<li>
<a href="http://www.webjx.com/htmldata/sort/3.html">网页制作</a>
</li>
<li>
<a href="http://www.webjx.com/htmldata/sort/4.html">动画制作</a>
</li>
</ul>
</li>
<li> 网络编程
<ul>
<li>
<a href="http://www.webjx.com/htmldata/sort/24.html">Asp.net</a>
</li>
<li>
<a href="http://www.webjx.com/htmldata/sort/25.html">Asp</a>
<ul>
<li>
<a href="http://www.webjx.com/htmldata/sort/26.html">PHP</a>
</li>
<li>
<a href="http://www.webjx.com/htmldata/sort/28.html">数据库</a>
</li>
<li>
<a href="http://www.webjx.com/htmldata/sort/29.html">CGI</a>
</li>
<li>
<a href="http://www.webjx.com/htmldata/sort/29.html">java网络编程</a>
<ul>
<li>
<a href="http://www.webjx.com/htmldata/sort/26.html">jsp</a>
</li>
<li>
<a href="http://www.webjx.com/htmldata/sort/28.html">j2ee</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>
<script type="text/javascript">
initiate(); // This must be placed immediately after the menu in order to format it properly.
</script>
</p>
<h3>树形菜单</h3>
<p>说明：一个很容易制作树形菜单，你可以无限级的添加下级菜单，菜单是通过列表方式写成的 </p>
</body>
</html>
分享到：
相关推荐
private void DisplayTree(DirectoryTreeNode node, TreeView treeView) { TreeNode treeNode = new TreeNode(node.Name); treeView.Nodes.Add(treeNode); if (node.IsExpanded) { foreach (var childNode in ...
java二叉树实现 （简单实现，入门用） /**创建二叉树*/ public BinaryTree createTree(String treeStr); /**寻找结点*/ public BinaryTree findNode(BinaryTree ... public void disPlayTree(BinaryTree tree);
function displayTree(tree, parentElement) { var li = document.createElement('li'); li.textContent = tree.name; for (var attr in tree.attributes) { li.appendChild(document.createTextNode('"' + ...
issue-73 Display tree for Array of Object issue-80 use line ending setting from editor Relaxed parsing. Supports trailling commas, comments(only parsing), NaN and infinity JS literals.
public static void DisplayTree(TreeNode node, int level = 0) { if (node == null) return; DisplayTree(node.RightChild, level + 1); Console.WriteLine(new string(' ', level * 2) + node.Value); ...
在这个示例中，`displayTree`函数接受一个分类数组和父分类ID，遍历数组并打印出所有父分类为指定ID的分类，然后对这些子分类递归调用自身，形成层级结构。 在实际应用中，无限级分类广泛应用于如电商网站的商品...
displayTree($node['children']); } } } ``` 总结来说，PHP实现无限级分类树形结构主要依赖于递归或非递归方法，通过构建节点间的父子关系来形成层级结构。理解这种数据结构对于处理需要展示层次关系的场景至关...
本次课程设计的任务是实现一个能够直观显示二叉树的函数`displaytree`。该函数接收三个参数：二叉树的根指针、数据值宽度以及屏幕的宽度，并以此为基础在屏幕上绘制出二叉树的可视化图像。 ##### 1.2 课程设计任务...
Display GitHub code in tree format.zip,类固醇上的github代码树
displayTree($node['children']); echo '</ul>'; } echo '</li>'; } } ``` 以上就是PHP增强版树形分类的一些核心知识点。在实际应用中，还需要考虑性能优化、缓存策略等问题，以应对大规模的数据和复杂的查询...
displayTree($category->getChildCategories(), $indent + 1); } } displayTree($topCategories); ``` 5. **性能优化**： 对于大型分类系统，效率是关键。类库可能包含缓存机制，如使用Memcached或Redis，来存储...
- `void DisplayTree(HufmNode tree[], int Number)`：输出哈夫曼树，用于调试和展示构建的树结构。 - `void main()`：主函数，调用以上函数并提供用户交互界面，比如读取节点权值，构建哈夫曼树，然后输出结果。 ...
这个小软件的标题“dir display in the format of tree”正是指的这一功能。 `tree`命令并不是Linux内核自带的命令，通常需要通过包管理器（如`apt`、`yum`或`dnf`）进行安装。例如，在Ubuntu上，你可以使用`sudo ...
`Tree`类还包含了四个核心方法：`insert()`用于插入新节点，`displayTree()`用于显示整个树，`find()`用于查找指定键值的节点，以及`delete()`用于删除节点。在实际编程中，这些方法会根据二叉搜索树的特性实现相应...
function displayTree(node) { // 显示当前节点 console.log(node.name); // 如果有子节点，递归处理 if (node.children && node.children.length > 0) { for (var i = 0; i ; i++) { displayTree(node....
文件可能提供了如`buildTree`、`getChildren`、`displayTree`等方法，用于构建、获取和显示无限分类树。在实际使用中，我们首先需要加载这个库，然后根据需求调用相应的方法，传入必要的参数，如根分类ID等，来生成...
4. `displayTree`: 可视化显示家族树，便于用户理解。 `www.pudn.com.txt` 文件可能是一个链接或引用，指向发布这个项目的原始资源，或者包含关于项目背景和作者信息的文本。通常在学习和研究这样的开源项目时，...
- `addtree.m` 和 `displaytree.m`：可能与树状结构的构建和可视化有关，帮助用户理解和分析聚类结果。 - `adclus.m`：可能是一个自适应聚类算法，能够根据数据特性动态调整聚类过程。 3. **Matlab编程**： ...
SWT（Standard Widget Toolkit）是Eclipse项目提供的一种用于创建Java图形用户界面（GUI）的开源库，它提供了丰富的控件和组件，包括我们这里关注的Tree组件。Tree组件在GUI应用中通常用来展示层级结构的数据，比如...
在`displayTree`方法中，遍历数组并打印出每个结点的数据和在层序遍历中的编号。实验中还提供了测试CASE，用于检验这些功能的正确性，包括创建不同结点、查找左右孩子和双亲，以及显示整个二叉树。 实验环境是PC机...