Foros del Web » Programando para Internet » Javascript »

Menu Arbol En Javascript Con Soporte Php

Estas en el tema de Menu Arbol En Javascript Con Soporte Php en el foro de Javascript en Foros del Web. Buenas Tardes,UNA AYUDA EN ALGO QUE NO ME SALE QUISIERA VER SI ME PUEDEN AYUDAR EN ALGO DE UN PROYECTO QUE ESTOY REALIZANDO TENGO UN ...
  #1 (permalink)  
Antiguo 19/03/2008, 15:27
Avatar de PICOROFG  
Fecha de Ingreso: febrero-2008
Ubicación: Quito, Ecuador, Ecuador
Mensajes: 120
Antigüedad: 16 años, 2 meses
Puntos: 0
Menu Arbol En Javascript Con Soporte Php

Buenas Tardes,UNA AYUDA EN ALGO QUE NO ME SALE QUISIERA VER SI ME PUEDEN AYUDAR EN ALGO DE UN PROYECTO QUE ESTOY REALIZANDO

TENGO UN MENU TIPO ARBOL CON UNA TABLA RECURSIVA QUE ME JALA LOS DATOS AL ARBOL
LA GRAFICA BIEN PERO NECESITO QUE AL SELECCIONAR UNO DE LOS CAMPOS DEL MENU
EJEMPLO:
- AZUAY
- CANTON
- PARROQUIA (SELECCIONO CON EL MOUSE)

ME CAPTURE ESA SELECCION EN UN CUADRO DE TEXTO DE ESTE MODO : AZUAY/CANTON/PARROQUIA
Código PHP:
class tree{
    
    var $elementArray = array();
    var $nameOfCookie = "menu_expandido"; 
    
    function tree()
    {
        
        
    }

    function writeCSS()
    {
        ?>
        <style type="text/css">
        
        #tree li{
            list-style-type:none;    
            font-family: arial;
            font-size:11px;
        }
        #dhtmlgoodies_topNodes{
            margin-left:0px;
            padding-left:0px;
        }
        #dhtmlgoodies_topNodes ul{
            margin-left:20px;
            padding-left:0px;
            display:none;
        }
        #tree .tree_link{
            line-height:13px;
            padding-left:2px;

        }
        #tree img{
            padding-top:2px;
        }
        #tree a{
            color: #000000;
            text-decoration:none;
        }
        .activeNodeLink{
            background-color: #316AC5;
            color: #FFFFFF;
            font-weight:bold;
        }
        </style>        
        <?php        
    
}
    
    function 
writeJavascript()
    {
        
?>
        <script type="text/javascript">
        
        var plusNode = 'estilos/mas.gif';
        var minusNode = 'estilos/menos.gif';
        
        var nameOfCookie = '<?php echo $this->nameOfCookie?>';
        <?php
        $cookieValue 
"";
        if(isset(
$_COOKIE[$this->nameOfCookie]))$cookieValue $_COOKIE[$this->nameOfCookie];        
        echo 
"var initExpandedNodes =\"".$cookieValue."\";\n";
        
?>        
        
        function Get_Cookie(name) { 
           var start = document.cookie.indexOf(name+"="); 
           var len = start+name.length+1; 
           if ((!start) && (name != document.cookie.substring(0,name.length))) return null; 
           if (start == -1) return null; 
           var end = document.cookie.indexOf(";",len); 
           if (end == -1) end = document.cookie.length; 
           return unescape(document.cookie.substring(len,end)); 
        } 
        
        function Set_Cookie(name,value,expires,path,domain,secure) { 
            expires = expires * 60*60*24*1000;
            var today = new Date();
            var expires_date = new Date( today.getTime() + (expires) );
            var cookieString = name + "=" +escape(value) + 
               ( (expires) ? ";expires=" + expires_date.toGMTString() : "") + 
               ( (path) ? ";path=" + path : "") + 
               ( (domain) ? ";domain=" + domain : "") + 
               ( (secure) ? ";secure" : ""); 
            document.cookie = cookieString; 
        } 
        
        
        function expandAll()
        {
            var treeObj = document.getElementById('tree');
            var images = treeObj.getElementsByTagName('IMG');
            for(var no=0;no<images.length;no++){
                if(images[no].className=='tree_plusminus' && images[no].src.indexOf(plusNode)>=0)expandNode(false,images[no]);
            }
        }
        function collapseAll()
        {
            var treeObj = document.getElementById('tree');
            var images = treeObj.getElementsByTagName('IMG');
            for(var no=0;no<images.length;no++){
                if(images[no].className=='tree_plusminus' && images[no].src.indexOf(minusNode)>=0)expandNode(false,images[no]);
            }
        }
        
        
        function expandNode(e,inputNode)
        {
            if(initExpandedNodes.length==0)initExpandedNodes=",";
            if(!inputNode)inputNode = this; 
            if(inputNode.tagName.toLowerCase()!='img')inputNode = inputNode.parentNode.getElementsByTagName('IMG')[0];    
            
            var inputId = inputNode.id.replace(/[^\d]/g,'');            
            
            var parentUl = inputNode.parentNode;
            var subUl = parentUl.getElementsByTagName('UL');

            if(subUl.length==0)return;
            if(subUl[0].style.display=='' || subUl[0].style.display=='none'){
                subUl[0].style.display = 'block';
                inputNode.src = minusNode;
                initExpandedNodes = initExpandedNodes.replace(',' + inputId+',',',');
                initExpandedNodes = initExpandedNodes + inputId + ',';
                
            }else{
                subUl[0].style.display = '';
                inputNode.src = plusNode;    
                initExpandedNodes = initExpandedNodes.replace(','+inputId+',',',');            
            }
            Set_Cookie(nameOfCookie,initExpandedNodes,60);
            
            
            
        }
            
        function initTree()
        {
            
            var parentNode = document.getElementById('tree');
            var lis = parentNode.getElementsByTagName('LI'); // Get reference to all the images in the tree
            for(var no=0;no<lis.length;no++){
                var subNodes = lis[no].getElementsByTagName('UL');
                if(subNodes.length>0){
                    lis[no].childNodes[0].style.visibility='visible';    
                }else{
                    lis[no].childNodes[0].style.visibility='hidden';
                }
            }    
            
            var images = parentNode.getElementsByTagName('IMG');
            for(var no=0;no<images.length;no++){
                if(images[no].className=='tree_plusminus')images[no].onclick = expandNode;                
            }    

            var aTags = parentNode.getElementsByTagName('A');
            var cursor = 'pointer';
            if(document.all)cursor = 'hand';
            for(var no=0;no<aTags.length;no++){
                aTags[no].onclick = expandNode;
                    
                aTags[no].style.cursor = cursor;
            
            }
            
            var initExpandedArray = initExpandedNodes.split(',');

            for(var no=0;no<initExpandedArray.length;no++){
                if(document.getElementById('plusMinus' + initExpandedArray[no])){
                    var obj = document.getElementById('plusMinus' + initExpandedArray[no]);    
                    expandNode(false,obj);
                }
            }                
        }
        
        window.onload = initTree;
        
        </script>    
        <?php
        
    
}
    
    function 
addToArray($id,$name,$parentID,$url="",$target="",$imageIcon="estilos/arrow.gif"){
        
        if(empty(
$parentID))$parentID=0;
            
        
$this->elementArray[$parentID][] = array($id,$name,$url,$target,$imageIcon);
    }
    
    function 
drawSubNode($parentID){
    
        if(isset(
$this->elementArray[$parentID])){

            echo 
"<ul>";
            for(
$no=0;$no<count($this->elementArray[$parentID]);$no++){
                
$urlAdd "";

                if(
$this->elementArray[$parentID][$no][2]){

                    
$urlAdd " ";
                    if(
$this->elementArray[$parentID][$no][3])$urlAdd.="";    
                }
                echo 
"<li class=\"tree_node\"><img class=\"tree_plusminus\" id=\"plusMinus".$this->elementArray[$parentID][$no][0]."\" src=\"estilos/mas.gif\"><img src=\"".$this->elementArray[$parentID][$no][4]."\"><a class=\"tree_link\"$urlAdd>".$this->elementArray[$parentID][$no][1]."</a>";
                
                
$this->drawSubNode($this->elementArray[$parentID][$no][0]);
                
                echo 
"</li>";
            }            
            echo 
"</ul>";            
        }        
    }
    
    function 
drawTree(){
        echo 
"<div id=\"tree\">";
        echo 
"<ul id=\"dhtmlgoodies_topNodes\">";
        for(
$no=0;$no<count($this->elementArray[0]);$no++){
            
$urlAdd "";
            if(
$this->elementArray[0][$no][2]){
                
$urlAdd " ";
                if(
$this->elementArray[0][$no][3])$urlAdd.="";    
            }
            echo 
"<li class=\"tree_node\" id=\"node_".$this->elementArray[0][$no][0]."\"><img id=\"plusMinus".$this->elementArray[0][$no][0]."\" class=\"tree_plusminus\" src=\"estilos/mas.gif\"><img src=\"".$this->elementArray[0][$no][4]."\"><a class=\"tree_link\"$urlAdd>".$this->elementArray[0][$no][1]."</a>";        
            
$this->drawSubNode($this->elementArray[0][$no][0]);
            echo 
"</li>";    
        }    
        echo 
"</ul>";    
        echo 
"</div>";    
        
    }
    
}

Última edición por PICOROFG; 19/03/2008 a las 16:24
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:57.