Ver Mensaje Individual
  #7 (permalink)  
Antiguo 16/07/2011, 20:32
Avatar de Italico76
Italico76
 
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 15 años, 2 meses
Puntos: 292
Respuesta: Un pequeño aporte para crear un menú de solapas/pestañas

Mas alla...de las criticas mas que constructivas de Triby voy a mejorar un 0.0001% el codigo de nx00 agregando la posibilidad de achicar el tamaño de la raya sobre donde se apoya el menu (actualmente de 5px)

Tambien creo que.. las opciones de CSS deberian poder setearse inidivudualmente cada una con su metodo.

Código PHP:
<?php 
/* Menu con solapas */ 
class Menu_solapas 

    
//propiedades 
    
private $iten
    private 
$colorActiva
    private 
$colorNoActiva
    private 
$alineacion
    private 
$numeroItem 0
    private 
$css
    private 
$menu
    private 
$defecto
     
     
    public function 
Menu_solapas ($alineacion=0,$colorActiva="#CCCCCC",$colorNoActiva="#999999",$tamanoSolapa=10
    { 
        
$this->colorActiva $colorActiva
        
$this->colorNoActiva $colorNoActiva
        
$this->alineacion $alineacion
        
$this->tamanoSolapa $tamanoSolapa
    } 
     
    public function 
setSolapa($nombre="class_menu",$href="#",$defecto=0
    { 
         
        
//añadir parametro get para saber que solapa esta activa 
        
if(eregi("\?",$href)) 
        { 
            
$href.="&class_menu=".$this->numeroItem
        } 
        else 
        { 
            
$href.="?class_menu=".$this->numeroItem
        } 
         
     
        if(
$defecto == 0
        { 
            
$this->iten[$this->numeroItem] = '<td id="enlace_'.$this->numeroItem.'" class="solapa" onMouseOver="pasaEncima(this.id);" onMouseOut="quitaEncima(this.id)"> 
                <a href="'
.$href.'" id="class_menu_solapas_enlace">'.$nombre.'</a></td><td id="espaciomenu">&nbsp;</td>'
        } 
        else 
        { 
            
$this->iten[$this->numeroItem] = '<td id="enlace_'.$this->numeroItem.'" class="solapa" onMouseOver="pasaEncima(this.id);" onMouseOut="quitaEncima(this.id)"> 
                <a href="'
.$href.'" id="class_menu_solapas_enlace">'.$nombre.'</a></td><td id="espaciomenu">&nbsp;</td>'
                 
                
$this->defecto $this->numeroItem
        } 
            
$this->numeroItem++; 
    } 
     
    public function 
setCssMenu($colorBorde="#CCCCCC",$colorFondo="#FFFFFF",$colorFuente="#CCCCCC",$tamanoFuente=12,$tipoFuente="verdana",$ancho_raya=2
    { 
     
        if(
$this->alineacion == 0
        { 
            
$totalLibre=intval(100-($this->numeroItem*$this->tamanoSolapa)); 
             
            if(
$totalLibre<0
            { 
                
$lineaIzq=5
                
$lineaDere=5
            } 
            else 
            { 
                
$totalLibre=intval($totalLibre/2); 
                
$lineaIzq=$totalLibre
                
$lineaDere=$totalLibre
            } 
        } 
        else 
        { 
            if(
$this->alineacion == 1//izquierda 
            

                
$lineaIzq=0
                
$lineaDere=100
            } 
            else 
            { 
                
//derecha 
                
$lineaIzq=100
                
$lineaDere=0
            } 
        } 
         
        
$this->css='<style type="text/css"> 
            #class_menu_solapas_enlace:hover,#class_menu_solapas_enlace:visited,#class_menu_solapas_enlace:link 
            {  
            text-decoration:none; 
            font-size:'
.$tamanoFuente.'px; 
            color:'
.$colorFuente.'; 
            font-family:'
.$tipoFuente.'; 
            } 
            td.solapa 
            { 
                border-left:0px solid '
.$colorBorde.'; 
                border-top:0px solid '
.$colorBorde.'; 
                border-right:0px solid '
.$colorBorde.'; 
                border-bottom:'
.$ancho_raya.'px solid '.$colorBorde.';                 
                padding:5px; 
                width:'
.$this->tamanoSolapa.'%; 
                text-align:center; 
                background-color:'
.$this->colorNoActiva.'; 
            } 
            #espaciomenu 
            { 
                border-bottom:'
.$ancho_raya.'px solid '.$colorBorde.'; 
            } 
            #todoelmenu 
            { 
                background-color:'
.$colorFondo.'; 
            } 
            #espaciomenuizq { border-bottom:'
.$ancho_raya.'px solid '.$colorBorde.'; width:'.$lineaIzq.'% } 
            #espaciomenudere { border-bottom:'
.$ancho_raya.'px solid '.$colorBorde.'; width:'.$lineaDere.'% } 
            '
.$this->cssDinamico().
            </style>'

             
                
//Crear menu 
                
$this->crearMenu(); 
    } 
     
    private function 
cssDinamico() 
    { 
        if(isset(
$_GET['class_menu'])) 
        { 
            
$css='#enlace_'.strip_tags(trim(urldecode($_GET['class_menu']))).'{background-color:'.$this->colorActiva.'}'
        } 
        else 
        { 
            
$css='#enlace_'.$this->defecto.'{background-color:'.$this->colorActiva.'}'
            
$_GET['class_menu'] = $this->defecto
        } 
            return 
$css
    } 
     
    private function 
crearMenu() 
    { 
        
$this->menu.=$this->addJavascript(); 
         
        
$this->menu.='<table border="0" cellpadding="0" cellspacing="0"> 
                     <tr id="todoelmenu"><td id="espaciomenuizq">&nbsp;</td>'

         
        for(
$i=0;$i<count($this->iten);$i++) 
        { 
            
$this->menu.=$this->iten[$i]; 
        } 
         
        
$this->menu.='<td id="espaciomenudere">&nbsp;</td> 
                    </tr> 
                    </table>'
;             
    } 
     
    private function 
addJavascript() 
    { 
        return 
'<script type="text/javascript" language="javascript"> 
                    function pasaEncima(id) 
                    { 
                        document.getElementById(id).style.backgroundColor="'
.$this->colorActiva.'"; 
                    } 
                     
                    function quitaEncima(id) 
                    { 
                        document.getElementById(id).style.backgroundColor="'
.$this->colorNoActiva.'"; 
                        document.getElementById("enlace_'
.strip_tags(trim(urldecode($_GET['class_menu']))).'").style.backgroundColor="'.$this->colorActiva.'";                                 
                    } 
                         
                </script>'

    } 
     
    public function 
getMenu() 
    { 
        return 
$this->css.$this->menu
    }     
}
__________________
Salu2!