大饼先生

menu.php是测试联级菜单，data.php模拟后台，使用xml传递数据。menu.php:

复制内容到剪贴板

代码:

<script type="text/javascript" src=../js/prototype.js?></script>
<script>
    var xmlHttp;
    var actiontype;
   
    function createXMLHttp(){
        if(window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }else if(window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();
        }
    }

    function checktype(type){
        actiontype = type;
        var tmp = "status" + actiontype;        
        var tmp2 = document.getElementById(tmp);
        if(tmp2.innerHTML == "")
            doAction();
        else clearstatus();
    }

    function doAction(){
        
        createXMLHttp();
        xmlHttp.onreadystatechange = callback;
        xmlHttp.open("GET","data.php?type="+actiontype+"&timestamp="+new Date().getTime());
        xmlHttp.send();
    }

    function callback(){
        var tmp = "status" + actiontype;
        
        var tmp2 = document.getElementById(tmp);

        if(xmlHttp.readyState == 3){
            tmp2.innerHTML = "loadding...";
        }
        if(xmlHttp.readyState == 4){
            if(xmlHttp.status == 202){
                tmp2.innerHTML = "loadding...";
            }
            if(xmlHttp.status == 200){            
                    var res = xmlHttp.respon***ML;               
                    var result = res.getElementsByTagName("subdate");
                    //clearstatus();
                    for(var i=0;i<result.length;i++){
                        var data = result[i].childNodes[0].nodeValue;
                        var node = document.createElement("div")
                        node.appendChild(document.createTextNode(data));
                        tmp2.appendChild(node);
                    }
                }
            }
        }
   

    function clearstatus(){
        var tmp = "status" + actiontype;
        var node = $(tmp);
        while(node.hasChildNodes())    {
            node.removeChild(node.childNodes[0]);
        }
    }

    function test(){
        //$('tmp').style.background = "green"
        //alert($("tmp").innerHTML);
        /*if($F("tmp").length >6){
            $('tmp').style.background = "red";   
        }else if($F("test").length <= 6){
            $('tmp').style.background = "green";   
        }*/
    }
</script>

<div id="tmp" onmouseover="$('tmp').style.background = '#999999'" onmouseout="$('tmp').style.background = '#CCCCCC'" onclick="checktype(1)" style="width:100px; background:#CCCCCC;"> 读取数据1</div>
<div id="status1"></div>

<div id="tmp2" onmouseover="$('tmp2').style.background = '#999999'" onmouseout="$('tmp2').style.background = '#CCCCCC'" onclick="checktype(2)" style="width:100px; background:#CCCCCC;"> 读取数据2</div>
<div id="status2"></div>

data.php

复制内容到剪贴板

代码:

';

<?php

    header("Content-Type:text/xml");

    $type = $_GET['type'];

    $xmlRes = '<?xml version="1.0" encoding="utf-8"?>';

    if($type == 1){

        $xmlRes = $xmlRes."

        <datainfo>

        <subdate>数据1</subdate>

        <subdate>数据2</subdate>

        <subdate>数据3</subdate>

        </datainfo>

        ";

        echo $xmlRes;

    }

    else if($type==2){

        $xmlRes = $xmlRes."

        <datainfo>

        <subdate>数据4</subdate>

        <subdate>数据5</subdate>

        <subdate>数据6</subdate>

        </datainfo>

        ";

        echo $xmlRes;

    }

?>

[ 本帖最后由 大饼先生 于 2007-7-20 22:27 编辑 ]

大饼先生

差点忘记说明了，代码中的
$()相当于document.getElementById()
$F() 相当于document.getElementById().value()
，来自于prototype.js，这是一个很强大的JS库，可以从网上下载到。

大饼先生

传个另外的图~~多级菜单~~谁需要的话联系我啦，CAKEPHP+AJAX+MYSQL的，源码我就懒得贴了
现在可以用这个地址访问到http://case.blueidea.com/img/gettree.html

[ 本帖最后由 大饼先生 于 2007-8-14 12:22 编辑 ]