zoukankan      html  css  js  c++  java
  • javascript、CSS、XML动太生成树菜单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
        
    <title>Untitled</title>
        
    <Style>
    /*    .on
        {
            background:#5eeDBE url(images/menu_head_bg.gif) repeat-x;
            text-decoration:none;
            border: 1px solid #2a4dab;
            font:bold 12px/22px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;
            
        }
    */

        .list
    {margin:0;padding:0;}
        .list ul
        
    {
            
    /*background:#5eeDBE url(images/menu_head_bg.gif) repeat-x;背景样式依次为:颜色,图片路径,横向重复*/
            list-style-type
    :none;    
            margin
    :0,0,0,9;
            padding
    :0;
            padding-left
    :1px;    
        
    }

        .list li
        
    {
            font
    :bold 12px/22px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;/*文字样式依次为:粗体 大小/行高 字族*/
            list-style-type
    :none;
            margin
    :0;
            padding
    :0;
            padding-left
    :12px;
            cursor
    :hand;
            background
    :#008080
        
    }


        A:link 
    {font-size:12px;text-decoration:none;color: #FFFFFF}
        A:visited 
    {font-size:12px;text-decoration:none;color: #FFFFFF}
        A:active 
    {font-size:12px;text-decoration: none;color: ##FFFFFF}
        A:hover 
    {font-size:12px;text-decoration:none;color: #ff00ff;border: 1px solid #2a4dab;/*边框颜色*/ }

        
    </Style>
        
    <script language='javascript'>
        
    function showhide(thisobj,id)
        
    {
            
    var obj=document.getElementById(id);
            
    //alert(thisobj.previousSibling.previousSibling.getAttribute("src"));
            if(obj.style.display=="")
            
    {
                obj.style.display
    ="none";
                
    //thisobj.innerText="+"+thisobj.innerText.substring(1);
                thisobj.previousSibling.setAttribute("src","C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_close.gif")
                thisobj.previousSibling.previousSibling.setAttribute(
    "src","C:\\Documents and Settings\\kevin.long\\桌面\\Web\\plus.gif")
            }

            
    else
            
    {
                obj.style.display
    ="";
                
    //thisobj.innerText="-"+thisobj.innerText.substring(1);
                thisobj.previousSibling.setAttribute("src","C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_open.gif")
                thisobj.previousSibling.previousSibling.setAttribute(
    "src","C:\\Documents and Settings\\kevin.long\\桌面\\Web\\minus.gif")
            }

        }

        
    function show(thisobj)
        
    {
            
            alert(thisobj);
            
        }

        
    </script>
        
    <script language='javascript'>
        
    var xmlDoc;
        
    function CreateXmlObj()
        
    {
            
    if(window.ActiveXObject)
            
    {
            xmlDoc
    =new ActiveXObject("Microsoft.XMLDOM");
            }

            
    else
            
    {
                xmlDoc
    ==document.implementation.createDocument("","",null);
            }

            
    //xmlDoc.async=false;
            xmlDoc.load("C:\\Documents and Settings\\kevin.long\\桌面\\Tree.xml");
            
    if(xmlDoc.parseError.errorCode!=0)
            
    {
                
    var xmlErr=xmlDoc.parseError;
                alert(
    "出错:"+xmlErr.reason);
            }

        }

        
    var str="<div class=\"list\" id=\"menu1_child\" title=\"菜单功能区\">";
        
    function CreateTreeNode(root)
        
    {
            
    if(root.hasChildNodes)
            
    {
                
    var uid=root.getAttribute("Id")+"-1";
                str
    +="<ul id=\""+uid+"\">"
                
    for(var i=0;i<root.childNodes.length;i++)
                
    {
                    
    var node=root.childNodes[i];
                    
    var id=node.getAttribute("Id");
                    
    var name=node.getAttribute("Name");                                            
                    
    if(node.hasChildNodes)
                    
    {
                        
    //str+="<li id=\""+id+"\" ><img src=\"C:\\Documents and Settings\\kevin.long\\桌面\\minus.gif\"/><SPAN onclick=\"showhide(this,'"+id+"-1')\"><a >-"+name+"</a></SPAN>"
                        str+="<li id=\""+id+"\"><img src=\"C:\\Documents and Settings\\kevin.long\\桌面\\Web\\minus.gif\"/><img src=\"C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_open.gif\"/><SPAN onclick=\"showhide(this,'"+id+"-1')\"><a >"+name+"</a></SPAN>"

                        CreateTreeNode(node)
                        str
    +="</li>";
                    }

                    
    else
                    
    {
                        str
    +="<li id=\""+id+"\" style=\"margin-left:18px;\" ><img src=\"C:\\Documents and Settings\\kevin.long\\桌面\\Web\\leaf.gif\"/><a href=\"javascript:\">"+name+"</a></li>"
                    }
                    
                }

                str
    +="</ul>"
            
    //    alert(root.childNodes.length);
            }

        }

        
    function showAll()
        
    {
            
        }

        
    function closeAll()
        
    {}
        
    function Test()
        
    {
            CreateXmlObj();
            
    //alert(xmlDoc.documentElement.firstChild.getAttribute("Name"));
            var root=xmlDoc.documentElement;
            CreateTreeNode(root);
            str
    +="</div>";
            
    //alert(str);
            document.getElementById("codeText").value=str
            idmenu.innerHTML
    =str;
        }

        
    </script>
    </head>

    <body>
    <input type="button" onclick="showAll()" value="全部展開">
    <input type="button" onclick="closeAll()" value="全部關閉">
    <input type="button" onclick="Test()" value="测试">
    <input id="codeText" type="text" value="">
    <div id="idmenu">555</div>
    </body>
    </html>
    Tree.xml
    <?xml version="1.0" encoding="UTF-8"?>
    <Root>
     
    <Menu Id="000" Name="樹菜單"> 
      
    <Menu Id="001" Name="用户功能" >  
          
    <Menu Id="002" Name="注册信息" >
                  
    <Menu Id="025" Name="文章管理" >      
                      
    <Menu Id="021" Name="文章分类" />
                      
    <Menu Id="022" Name="添加文章" />
                      
    <Menu Id="023" Name="评论管理" />
                      
    <Menu Id="024" Name="添加图片" />
                  
    </Menu>
                  
    <Menu Id="026" Name="可可豆" >
                      
    <Menu Id="021" Name="文章分类" />
                      
    <Menu Id="022" Name="添加文章" />
                      
    <Menu Id="023" Name="评论管理" />
                      
    <Menu Id="024" Name="添加图片" />
                  
    </Menu>  
                  
    <Menu Id="027" Name="凤飞飞" />
                  
    <Menu Id="028" Name="万维网" />
        
    </Menu>
          
    <Menu Id="007" Name="系统设置" />  
          
    <Menu Id="008" Name="环境变量" />
          
    <Menu Id="009" Name="执行SQL" />
          
    <Menu Id="010" Name="友情链接" />
        
    <Menu Id="016" Name="文章管理" >      
                  
    <Menu Id="017" Name="文章分类" />
                  
    <Menu Id="018" Name="添加文章" />
                  
    <Menu Id="019" Name="评论管理" />
                  
    <Menu Id="020" Name="添加图片" />
        
    </Menu>
          
    <Menu Id="003" Name="我的文档" />
          
    <Menu Id="004" Name="回收站" />
          
    <Menu Id="005" Name="控制面板" />      
      
    </Menu>
      
      
    <Menu Id="007" Name="系统设置" >  
          
    <Menu Id="008" Name="环境变量" />
          
    <Menu Id="009" Name="执行SQL" />
          
    <Menu Id="010" Name="友情链接" />
          
    <Menu Id="011" Name="文章管理" >      
              
    <Menu Id="012" Name="文章分类" />
              
    <Menu Id="013" Name="添加文章" />
              
    <Menu Id="014" Name="评论管理" />
              
    <Menu Id="015" Name="添加图片" />
          
    </Menu>
      
    </Menu>
      
    <Menu Name="广东省" Id="440000">
        
    <Menu Name="广州市" Id="440100" />
        
    <Menu Name="韶关市" Id="440200" />
        
    <Menu Name="深圳市" Id="440300" />
        
    <Menu Name="珠海市" Id="440400" />
        
    <Menu Name="汕头市" Id="440500" />
        
    <Menu Name="佛山市" Id="440600" />
        
    <Menu Name="江门市" Id="440700" />
        
    <Menu Name="湛江市" Id="440800" />
        
    <Menu Name="茂名市" Id="440900" />
        
    <Menu Name="肇庆市" Id="441200" />
        
    <Menu Name="惠州市" Id="441300" />
        
    <Menu Name="梅州市" Id="441400" />
        
    <Menu Name="汕尾市" Id="441500" />
        
    <Menu Name="河源市" Id="441600" />
        
    <Menu Name="阳江市" Id="441700" />
        
    <Menu Name="清远市" Id="441800" />
        
    <Menu Name="东莞市" Id="441900" />
        
    <Menu Name="中山市" Id="442000" />
        
    <Menu Name="潮州市" Id="445100" />
        
    <Menu Name="揭阳市" Id="445200" />
        
    <Menu Name="云浮市" Id="445300" />
      
    </Menu>
      
    <Menu Name="广西壮族自治区" Id="450000">
        
    <Menu Name="南宁市" Id="450100" />
        
    <Menu Name="柳州市" Id="450200" />
        
    <Menu Name="桂林市" Id="450300" />
        
    <Menu Name="梧州市" Id="450400" />
        
    <Menu Name="北海市" Id="450500" />
        
    <Menu Name="防城港市" Id="450600" />
        
    <Menu Name="钦州市" Id="450700" />
        
    <Menu Name="贵港市" Id="450800" />
        
    <Menu Name="玉林市" Id="450900" />
        
    <Menu Name="百色市" Id="451000" />
        
    <Menu Name="贺州市" Id="451100" />
        
    <Menu Name="河池市" Id="451200" />
        
    <Menu Name="来宾市" Id="451300" />
        
    <Menu Name="崇左市" Id="451400" />
      
    </Menu>
      
    <Menu Name="海南省" Id="460000">
        
    <Menu Name="海口市" Id="460100" />
        
    <Menu Name="三亚市" Id="460200" />
        
    <Menu Name="省直辖县级行政单位" Id="469000" />
      
    </Menu>
      
    <Menu Name="重庆市" Id="500000">
        
    <Menu Name="市辖区" Id="500100" />
        
    <Menu Name="县" Id="500200" />
        
    <Menu Name="市" Id="500300" />
      
    </Menu>
      
    <Menu Name="四川省" Id="510000">
        
    <Menu Name="成都市" Id="510100" />
        
    <Menu Name="自贡市" Id="510300" />
        
    <Menu Name="攀枝花市" Id="510400" />
        
    <Menu Name="泸州市" Id="510500" />
        
    <Menu Name="德阳市" Id="510600" />
        
    <Menu Name="绵阳市" Id="510700" />
        
    <Menu Name="广元市" Id="510800" />
        
    <Menu Name="遂宁市" Id="510900" />
        
    <Menu Name="内江市" Id="511000" />
        
    <Menu Name="乐山市" Id="511100" />
        
    <Menu Name="南充市" Id="511300" />
        
    <Menu Name="眉山市" Id="511400" />
        
    <Menu Name="宜宾市" Id="511500" />
        
    <Menu Name="广安市" Id="511600" />
        
    <Menu Name="达州市" Id="511700" />
        
    <Menu Name="雅安市" Id="511800" />
        
    <Menu Name="巴中市" Id="511900" />
        
    <Menu Name="资阳市" Id="512000" />
        
    <Menu Name="阿坝藏族羌族自治州" Id="513200" />
        
    <Menu Name="甘孜藏族自治州" Id="513300" />
        
    <Menu Name="凉山彝族自治州" Id="513400" />
      
    </Menu>
      
    </Menu> 
    </Root>
  • 相关阅读:
    如何将数组初始化为全0?
    什么是优先级队列(priority queue)?
    C语言中指针的指针是如何工作的?
    什么是队列(Queue)?
    理解*ptr++
    【Luogu】P4172水管局长(LCT)
    【Luogu】P4159迷路(矩阵优化)
    【Luogu】P3971Alice And Bob(贪心)
    【Luogu】P3211XOR和路径(高斯消元)
    【Luogu】P2445动物园(最大流)
  • 原文地址:https://www.cnblogs.com/jacklong/p/1041468.html
Copyright © 2011-2022 走看看