`
superyang
  • 浏览: 22932 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论
阅读更多


<!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>

 

分享到:
评论
1 楼 shily_yuanling 2009-12-07  
你做网站的?怎么都是跟C有关系的啊东西啊!呵呵……姐姐英文不错吧!

相关推荐

    C_disk_directory.rar_disk tree

    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 二叉树实现

    java二叉树实现 (简单实现,入门用) /**创建二叉树*/ public BinaryTree createTree(String treeStr); /**寻找结点*/ public BinaryTree findNode(BinaryTree ... public void disPlayTree(BinaryTree tree);

    js读取xml文件,生成树型结构

    function displayTree(tree, parentElement) { var li = document.createElement('li'); li.textContent = tree.name; for (var attr in tree.attributes) { li.appendChild(document.createTextNode('"' + ...

    NPPJSONViewer1.40.zip

    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.

    编程学C#(3):动态模拟创建二叉树程序

    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的分类,然后对这些子分类递归调用自身,形成层级结构。 在实际应用中,无限级分类广泛应用于如电商网站的商品...

    PHP树结构,实现无限分级

    displayTree($node['children']); } } } ``` 总结来说,PHP实现无限级分类树形结构主要依赖于递归或非递归方法,通过构建节点间的父子关系来形成层级结构。理解这种数据结构对于处理需要展示层次关系的场景至关...

    二叉树数据结构课程设计

    本次课程设计的任务是实现一个能够直观显示二叉树的函数`displaytree`。该函数接收三个参数:二叉树的根指针、数据值宽度以及屏幕的宽度,并以此为基础在屏幕上绘制出二叉树的可视化图像。 ##### 1.2 课程设计任务...

    Display GitHub code in tree format.zip

    Display GitHub code in tree format.zip,类固醇上的github代码树

    php增强版的树形分类

    displayTree($node['children']); echo '&lt;/ul&gt;'; } echo '&lt;/li&gt;'; } } ``` 以上就是PHP增强版树形分类的一些核心知识点。在实际应用中,还需要考虑性能优化、缓存策略等问题,以应对大规模的数据和复杂的查询...

    Category类库:php无限分类类库

    displayTree($category-&gt;getChildCategories(), $indent + 1); } } displayTree($topCategories); ``` 5. **性能优化**: 对于大型分类系统,效率是关键。类库可能包含缓存机制,如使用Memcached或Redis,来存储...

    哈夫曼树的建立

    - `void DisplayTree(HufmNode tree[], int Number)`:输出哈夫曼树,用于调试和展示构建的树结构。 - `void main()`:主函数,调用以上函数并提供用户交互界面,比如读取节点权值,构建哈夫曼树,然后输出结果。 ...

    dir display in the format of tree

    这个小软件的标题“dir display in the format of tree”正是指的这一功能。 `tree`命令并不是Linux内核自带的命令,通常需要通过包管理器(如`apt`、`yum`或`dnf`)进行安装。例如,在Ubuntu上,你可以使用`sudo ...

    Java数据结构与算法之树[整理].pdf

    `Tree`类还包含了四个核心方法:`insert()`用于插入新节点,`displayTree()`用于显示整个树,`find()`用于查找指定键值的节点,以及`delete()`用于删除节点。在实际编程中,这些方法会根据二叉搜索树的特性实现相应...

    遍历json显示树形菜单

    function displayTree(node) { // 显示当前节点 console.log(node.name); // 如果有子节点,递归处理 if (node.children && node.children.length &gt; 0) { for (var i = 0; i ; i++) { displayTree(node....

    PHP无限分类之PHP

    文件可能提供了如`buildTree`、`getChildren`、`displayTree`等方法,用于构建、获取和显示无限分类树。在实际使用中,我们首先需要加载这个库,然后根据需求调用相应的方法,传入必要的参数,如根分类ID等,来生成...

    zupushu.rar_家族树 c_族谱_族谱c++_族谱c++二叉树_树族谱

    4. `displayTree`: 可视化显示家族树,便于用户理解。 `www.pudn.com.txt` 文件可能是一个链接或引用,指向发布这个项目的原始资源,或者包含关于项目背景和作者信息的文本。通常在学习和研究这样的开源项目时,...

    Matlab Algorithms for Representing Similarity Data

    - `addtree.m` 和 `displaytree.m`:可能与树状结构的构建和可视化有关,帮助用户理解和分析聚类结果。 - `adclus.m`:可能是一个自适应聚类算法,能够根据数据特性动态调整聚类过程。 3. **Matlab编程**: ...

    swt创建tree的例子

    SWT(Standard Widget Toolkit)是Eclipse项目提供的一种用于创建Java图形用户界面(GUI)的开源库,它提供了丰富的控件和组件,包括我们这里关注的Tree组件。Tree组件在GUI应用中通常用来展示层级结构的数据,比如...

    实验六 二叉树操作.pdf

    在`displayTree`方法中,遍历数组并打印出每个结点的数据和在层序遍历中的编号。实验中还提供了测试CASE,用于检验这些功能的正确性,包括创建不同结点、查找左右孩子和双亲,以及显示整个二叉树。 实验环境是PC机...

Global site tag (gtag.js) - Google Analytics