Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/07/2008, 03:18
nx00
 
Fecha de Ingreso: agosto-2007
Mensajes: 345
Antigüedad: 14 años, 10 meses
Puntos: 21
Un pequeño aporte para crear un menú de solapas/pestañas

Hola.

Tengo una clase en php para generar un menú con estilo solapas/pestañas. Lo comparto con vostros para ver si podriamos mejorarlo.

Ejemplo de uso:
Código PHP:
<?php
//ejemplo de uso

/*Crear la clase y pasarle los siguientes parametros:

- 0,1,2 => alineacion centro,izquierda,derecha.
- Color solapa al pasar encima y esta activa.
- Color solapa por defecto.
- Ancho de cada solapa en %.
*/

$m = new menuSolapas(0,"#E39620","#DDDBDC",5);

/* Añadir una solapa al menu. Parametros:
* Nombre que se visualiza en la página.
* Url donde apunta el enlace.
* 0,1 => 1 para la solapa que saldra activa por defecto.
*/

$m->setSolapa("menu1","./index.php?i=1");
$m->setSolapa("menu2","./index.php?i=2",1);
$m->setSolapa("menu3","./index.php?i=3");

/* Configurar el css
* color del borde
* color del fondo
* color de la fuente
* tamaño de la fuente
* tipo de fuente
*/

$m->setCssMenu("#E39620","#DDDBDC","#5D5D5D",12,"georgia");

echo 
$m->getMenu();

?>
Imagen de un menú generado



Clase:
Código PHP:
<?php
/* Menu con solapas */
class menuSolapas
{
    
//propiedades
    
private $iten;
    private 
$colorActiva;
    private 
$colorNoActiva;
    private 
$alineacion;
    private 
$numeroItem 0;
    private 
$css;
    private 
$menu;
    private 
$defecto;
    
    
    public function 
__construct($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")
    {
    
        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:5px solid '
.$colorBorde.';                
                padding:5px;
                width:'
.$this->tamanoSolapa.'%;
                text-align:center;
                background-color:'
.$this->colorNoActiva.';
            }
            #espaciomenu
            {
                border-bottom:5px solid '
.$colorBorde.';
            }
            #todoelmenu
            {
                background-color:'
.$colorFondo.';
            }
            #espaciomenuizq { border-bottom:5px solid '
.$colorBorde.'; width:'.$lineaIzq.'% }
            #espaciomenudere { border-bottom:5px 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;
    }    
}

?>
espero vuestros comentarios.
Un saludo.

Última edición por nx00; 29/07/2008 a las 03:52