XML生成树型菜单

qingfengxia

浏览: 89337 次
性别:
来自: 杭州

最近访客更多访客>>

java19880223

ztha

Mdyou

麦兜响当当

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript资料

XML IE Firefox JavaScript 浏览器

<!-- 

= * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *    
*    作 者：  我本有心   
=    QQ:     381584252   
*     E-Mail: hztgcl1986@163.com  
=     转载请注明出处及作者！   
*     版权所有,侵权必究！！！   
=   
*    http://www.8848so.com，人物搜索，8848So       
= * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *    
-->  
<?xml version='1.0' encoding='utf-8'?>  
<menu>  
<rootLevel id='2'>  
<selfName>美国</selfName>  
</rootLevel>  
<rootLevel id='1'>  
<selfName>中国</selfName>  
<level id='4'>  
<selfName>河南</selfName>  
<parentID>1</parentID>  
</level>  
<level id='3'>  
<selfName>山东</selfName>  
<parentID>1</parentID>  
<level id='6'>  
<selfName>菏泽</selfName>  
<parentID>3</parentID>  
<level id='8'>  
<selfName>曹县</selfName>  
<parentID>6</parentID>  
</level>  
<level id='7'>  
<selfName>东明</selfName>  
<parentID>6</parentID>  
</level>  
</level>  
<level id='5'>  
<selfName>济南</selfName>  
<parentID>3</parentID>  
</level>  
</level>  
</rootLevel>  
</menu>

javascript 树型菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>JavaScript + XML树型菜单</title>  
<style type="text/css">  
li.plus   
{   
    list-style-type:none;   
    list-style-image:url(Images/Plus.png); /*展开时图片,如"+"*/   
    cursor:hand;   
}   
  
li.minus   
{   
    list-style-type:none;   
    list-style-image:url(Images/Minus.png); /*折叠时图片,如"-"*/   
    cursor:hand;   
}   
  
li.item   
{   
    list-style-type:none;   
    list-style-image:url(Images/Item.png); /*无子项目时图片*/   
    cursor:hand;   
}   
</style>  
</head>  
  
<body>  
<ul id="tree">  
    <li>树</li>  
</ul>  
<!--  
= * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *    
*    作 者：  我本有心   
=    QQ:     381584252   
*     E-Mail: hztgcl1986@163.com  
=     转载请注明出处及作者！   
*     版权所有,侵权必究！！！   
=   
*    http://www.8848so.com，人物搜索，8848So       
= * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = *    
-->  
<script language="javascript" type="text/javascript">  
treeMenu("tree"); //树   
  
function createXMLDom() //创建XMLDOM对象函数，跨浏览器解决方案   
{   
    var xmlDom;   
       
    if (window.ActiveXObject) //IE   
    {   
        xmlDom = new ActiveXObject("Microsoft.XMLDOM");   
        xmlDom.async = false;   
        xmlDom.load("/XML/InfoClass.xml");   
        if (xmlDom.parseError.errorCode != 0)   
        {   
            window.alert("XML文件加载错误. errorCode：" + xmlDom.parseError.errorCode + " reason：" + xmlDom.parseError.reason);   
            return false;   
        }   
        else   
        {return xmlDom;}   
    }   
    else if (document.implementation && document.implementation.createDocument) //FireFox   
    {   
        xmlDom = document.implementation.createDocument("","",null);   
        xmlDom.async = false;   
        xmlDom.load("/XML/InfoClass.xml");   
        return xmlDom;   
    }   
    else   
    {   
        window.alert("不支持XMLDOM对象");   
        return false;   
    }   
}   
  
function treeMenu(ulID)   
{   
    var xmlDom = createXMLDom(); //创建XMLDOM对象   
    var menu = xmlDom.documentElement; //xml文档根节点   
    var rootLevels = menu.getElementsByTagName("rootLevel"); //一级分类集合   
           
    var ul = document.getElementById(ulID);   
    for (var i=0;i<rootLevels.length;i++) //循环显示一级分类   
    {   
        var selfID = rootLevels[i].getAttribute("id");   
        var selfName = rootLevels[i].getElementsByTagName("selfName")[0].firstChild.nodeValue;   
        var li = document.createElement("li");   
        li.innerHTML = selfName;   
        li.id = selfID;   
               
        var levels = rootLevels[i].getElementsByTagName("level"); //集合   
        if (levels.length > 0) //有子类   
        {   
            li.className = "plus";   
            li.onclick = function () {liClick(this,this.id,xmlDom);} //单击事件   
        }   
        else //无子类   
        {   
            li.className = "item";   
        }   
        ul.appendChild(li);   
    }   
}   
  
function liClick(li,id,xmlDom,event)   
{   
    var childUL = li.getElementsByTagName("ul"); //ul集合   
       
    if (childUL.length > 0)//折叠   
    {closeChild(li,childUL);}   
    else //展开   
    {openChild(li,id,xmlDom);}   
       
    cancelBuble(event); //plus停止事件冒泡   
}   
  
function openChild(li,id,xmlDom) //展开函数   
{   
    li.className = "minus"; //折叠图标   
       
    var levels = xmlDom.documentElement.getElementsByTagName("level"); //level集合   
    var ul = document.createElement("ul");   
    for (var m=0;m<levels.length;m++)   
    {   
        var selfID = levels[m].getAttribute("id");   
        var selfName = levels[m].getElementsByTagName("selfName")[0].firstChild.nodeValue;   
        var parentID = levels[m].getElementsByTagName("parentID")[0].firstChild.nodeValue;   
           
        if (id == parentID) //属于id子类   
        {   
            var ulli = document.createElement("li");   
            ulli.innerHTML = selfName;   
            ulli.id = selfID;   
               
            var childLevels = levels[m].getElementsByTagName("level"); //集合   
            if (childLevels.length > 0) //有子类   
            {   
                ulli.className = "plus";   
                   
                /*停止事件冒泡，跨浏览器解决方案 Start*/   
                if (window.ActiveXObject) //IE   
                {ulli.onclick = function () {liClick(this,this.id,xmlDom,event);}} //单击事件   
                else //FireFox   
                {ulli.onclick = function (event) {liClick(this,this.id,xmlDom,event);}} //单击   
                /*停止事件冒泡，跨浏览器解决方案 End*/   
            }   
            else //无子类   
            {   
                ulli.className = "item";   
                   
                /*停止事件冒泡，跨浏览器解决方案 Start*/   
                if (window.ActiveXObject) //IE   
                {ulli.onclick = function () {cancelBuble(event);}} //item停止事件冒泡   
                else //FireFox   
                {ulli.onclick = function (event) {cancelBuble(event);}} //item停止事件冒泡   
                /*停止事件冒泡，跨浏览器解决方案 End*/   
            }   
               
            ul.appendChild(ulli);   
        }   
           
    }   
       
    li.appendChild(ul);   
}   
  
function closeChild(li,childUL) //折叠函数   
{   
    li.className = "plus"; //展开图标   
       
    for (var j=0;j<childUL.length;j++) //循环删除ul,ul可能有子ul、li孙ul、li   
    {childUL[j].parentNode.removeChild(childUL[j]);}   
}   
  
function cancelBuble(domEvent) //停止事件冒泡函数,跨浏览器解决方案   
{   
    if (window.ActiveXObject) //IE   
    {domEvent.cancelBubble = true;}   
    else //FireFox   
    {domEvent.stopPropagation();}   
}   
</script>  
</body>  
</html>

分享到：