Foros del Web » Programando para Internet » PHP » Frameworks y PHP orientado a objetos »

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

Estas en el tema de Un pequeño aporte para crear un menú de solapas/pestañas en el foro de Frameworks y PHP orientado a objetos en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 29/07/2008, 03:18
 
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
  #2 (permalink)  
Antiguo 29/07/2008, 05:18
Avatar de vb2005  
Fecha de Ingreso: noviembre-2005
Ubicación: Paderborn - Alemania
Mensajes: 556
Antigüedad: 16 años, 7 meses
Puntos: 24
Respuesta: Un pequeño aporte para crear un menú de solapas/pestañas

parece bastante bueno, en que quieres mejorarlo?
__________________
www.marcher.com.uy - Web personal
Nerd's Corner - Desarrollo de software a medida
  #3 (permalink)  
Antiguo 29/07/2008, 07:24
 
Fecha de Ingreso: agosto-2007
Mensajes: 345
Antigüedad: 14 años, 10 meses
Puntos: 21
De acuerdo Respuesta: Un pequeño aporte para crear un menú de solapas/pestañas

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.
  #4 (permalink)  
Antiguo 29/07/2008, 09:02
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 16 años, 1 mes
Puntos: 2135
Respuesta: Un pequeño aporte para crear un menú de solapas/pestañas

Tema trasladado a PHP Orientado a Objetos.
  #5 (permalink)  
Antiguo 16/07/2011, 19:15
Avatar de 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

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

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

Gracias!
__________________
Salu2!
  #6 (permalink)  
Antiguo 16/07/2011, 20:06
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 13 años, 10 meses
Puntos: 2236
Respuesta: Un pequeño aporte para crear un menú de solapas/pestañas

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.
__________________
- León, Guanajuato
- GV-Foto
  #7 (permalink)  
Antiguo 16/07/2011, 20:32
Avatar de 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!
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

SíEste tema le ha gustado a 3 personas




La zona horaria es GMT -6. Ahora son las 20:27.