无限级树形菜单

转载 2012年03月29日 15:28:39
<!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.smallrain.net
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.xmlasp.net/c49.aspx">风格模板</a> 
      </li>
      <li>
        <a href="http://www.xmlasp.net/c48.aspx">使用帮助</a>
      </li>
      <li>
        <a href="http://www.xmlasp.net/c36.aspx">使用技巧</a>
      </li>
    </ul>
  </li>
  <li> 技术文章 
    <ul>
      <li>
        <a href="http://www.xmlasp.net/c17.aspx">脚本技术</a>
      </li>
      <li>
        <a href="http://www.xmlasp.net/c12.aspx">Asp.net</a>
        <ul>
          <li>
            <a href="http://www.xmlasp.net/c13.aspx">C#</a>
          </li>
          <li>
            <a href="http://www.xmlasp.net/c14.aspx">Ado.net</a>
          </li>
          <li>
            <a href="http://www.xmlasp.net/c37.aspx">Xml</a>
          </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>
   

无限级树形菜单(源码)

  • 2008年02月19日 13:53
  • 427KB
  • 下载

ASP.NET AJAX无限级JS树形菜单

ASP.NET AJAX无限级JS树形菜单
  • sqlove
  • sqlove
  • 2011年06月01日 23:24
  • 825

Wijmo json 格式的数据回还 无限级解析 成树形菜单

//json 格式如下 {"menulist":[{"code":16963,"id":"FM01","name":"已签未付单据","parent":0,"pcode":16944,"sequen...

JS无限级树形菜单

  • 2014年08月27日 21:51
  • 14KB
  • 下载

dTree 生成无限级树形菜单

  • 2009年09月28日 09:22
  • 39KB
  • 下载

无限级CSS树形菜单 Ver2.0

实例演示:    http://www.jb51.net/tools/cssTREE/index.html http://www.jb51.net/tools/cssTREE/index.b...

无限级树形菜单(Sql数据库)

  • 2007年12月14日 11:01
  • 429KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:无限级树形菜单
举报原因:
原因补充:

(最多只允许输入30个字)