Un pequeño aporte para crear un menú de solapas/pestañas

[nx00]

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.

[vb2005]

parece bastante bueno, en que quieres mejorarlo?

[nx00]

Mejorarlo me refiero a optimizar el código y añadirle nuevas funciones para hacerlo mas completo y personalizable.

Llevo algunos meses trabajando con php orientado a objetos y mi nivel no es muy alto, quizas ni siquiera obtenga todo el rendimiento que ofrece la programación orientada a objetos, por ello me gustaria recibir critias y formas de mejorarlo para aprender mas.

[GatorV]

Tema trasladado a PHP Orientado a Objetos.

[Italico76]

amigo: como hago para agrearle negrita al texto de la solapa activa ?

donde iria... font-weight: bold; ?

Gracias!

[Triby]

Lo unico que veo para mejorar seria por la parte de HTML y CSS estandar (usable?, accesible? y demas?), por ejemplo:

HTML:
1- Ver la posibilidad de usar una lista no ordenada en vez de tablas.

CSS:
1- Me parece que estas repitiendo varias veces id="class_menu_solapas_enlace", lo cual es incorrecto, las ID's deben ser unicas, donde, con class="clase_que_corresponda" asignas el estilo y con id="id_unica_del_enlace" tienes acceso por medio de javascript.
2- De ser posible, crear un archivo de estilos e incluirlo con la etiqueta correspondiente.

Y, siendo un tanto estrictos, por la parte de PHP:
1- No usar eregi, porque es una funcion obsoleta, tal vez habria que usar preg_match().
2- Por culpa de Monk, cambiar $this->iten por $this->item, usando la funcion de buscar -> reemplazar en un editor de textos no es tan dificil.

Italico76, primero habria que ver si se hacen los arreglos necesarios para usar id's y clases CSS, esto facilitaria ese tipo de modificaciones o, si es general, dentro de setCssMenu lo agregas debajo de font-size.

[Italico76]

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;  
    }      
}