Foros del Web » Creando para Internet » Diseño web »

Tabs en PHP

Estas en el tema de Tabs en PHP en el foro de Diseño web en Foros del Web. Como podria crear un menu de navegacion, del estilo tab o pestaña? Investigando vi que se puede hacer con javascript, pero no deseo esconder DIVS. ...
  #1 (permalink)  
Antiguo 04/10/2010, 12:43
 
Fecha de Ingreso: octubre-2010
Mensajes: 4
Antigüedad: 7 años, 2 meses
Puntos: 0
Tabs en PHP

Como podria crear un menu de navegacion, del estilo tab o pestaña? Investigando vi que se puede hacer con javascript, pero no deseo esconder DIVS.

Encontre un ejemplo como este, en el que cada tab representa una pagina distinta, pero no pude usar el ejemplo, ya cuando bajo el 'Static_Tabstrip.php' está vacio.

http://www.phpguru.org/downloads/static_tabstrip/example.php
  #2 (permalink)  
Antiguo 04/10/2010, 12:49
Avatar de egepe  
Fecha de Ingreso: diciembre-2009
Mensajes: 310
Antigüedad: 8 años
Puntos: 7
Respuesta: Tabs en PHP

Por qué no quieres "escorder DIVS" com tu dices ?

Que no puedes bajarlo? que raro abre tu navegador busca ver codigo fuente, si usas IE vas a tener el problema de no poder ver los link por lo que abrelo con firefox en la parte superior sale la hoja de estilo y te la abre.

O sino trata de copiarlo como salvar como (yo nunca lo hago así pero trata no sé)

Como te lo explique primero si lo vas a ver, de hecho lo acabo de abrir así y lo iba a colocar aquí pero me dio flojera....

Saludos
  #3 (permalink)  
Antiguo 04/10/2010, 12:57
Avatar de LuZBinG  
Fecha de Ingreso: enero-2008
Mensajes: 407
Antigüedad: 9 años, 10 meses
Puntos: 5
Respuesta: Tabs en PHP

se basa en la hoja de estilo por si no puedes bajarla
Cita:
/**
* o------------------------------------------------------------------------------o
* | This package is licensed under the Phpguru license. A quick summary is |
* | that for commercial use, there is a small one-time licensing fee to pay. For |
* | registered charities and educational institutes there is a reduced license |
* | fee available. You can read more at: |
* | |
* | http://www.phpguru.org/static/license.html |
* o------------------------------------------------------------------------------o
*
*/

/**
* Generic tabstrip styles
*/
div.tabstrip {
position: relative;
border-bottom: 1px solid black;
}

div.tabstrip div.tabstrip_tab {
position: relative;
top: -2px;
top: expression(2);
display: inline;
width: 110px;
height: 25px;
border: 1px solid #ccc;
border-bottom: 0;
margin: 0 3px 0 0;
padding: 5px;
padding: expression(0);
padding-top: expression(4);
text-align: center;
font-size: 9pt;
background-color: #eee;
font-family: Tahoma;
color: #bbb;
}

div.tabstrip div.tabstrip_tab.active {
position: relative;
top: -1px;
top: expression(3);
border: 1px solid #777;
border-bottom: 1px solid white;
background-color: white;
height: 28px;
}

div.tabstrip div.tabstrip_tab a {
text-decoration: none;
color: #777;
font-weight: bold;
}

div.tabstrip div.tabstrip_tab.active a {
font-weight: normal;
color: #555;
z-index: 3;
position: relative;
}

div.tab_body {
border: 1px solid #777;
position: relative;
padding: 15px;
top: -1px;
z-index: -1;
}
__________________
LuZbIng
  #4 (permalink)  
Antiguo 04/10/2010, 13:44
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Tabs en PHP

Lo único que está haciendo es llamar con una variable el contenido que desea mostrar. Es decir envia una petición y con PHP lee que contiene la variable y muestra conforme a lo que dice la variable. Es algo sencillo, algo así
Código PHP:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Tab list</title>
  6. <style>
  7. *{ margin:0; padding:0; }
  8. #content{
  9.     width: 350px;
  10.     margin: 0 auto;
  11.     border: 1px solid #000;
  12. }
  13. #menu{
  14.     list-style-type: none;
  15.     margin: 0;
  16.     width: 100%;
  17. }
  18. #menu li{
  19.     display: inline-block;
  20.     background-color: #ccc;
  21.     padding: 10px;
  22.     border-bottom: 2px solid #000;
  23.     border-right: 1px solid #000;
  24. }
  25. #menu li a{ color: #777; }
  26.  
  27. #menu .selected{
  28.     background-color: #fff;
  29.     border-bottom: none;
  30. }
  31. #menu .selected a{ color: #000; }
  32. #menu .rest{
  33.     width: 162px;
  34.     border-right: none;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39.  
  40. <div id="content">
  41. <?php if(empty($_GET['tab'])){ ?>
  42.     <ul id="menu">
  43.         <li class="selected"><a href="<?php echo $_SERVER['PHP_SELF']; ?>">First</a></li><li><a href="<?php echo $_SERVER['PHP_SELF']; ?>?tab=2">Second</a></li><li><a href="<?php echo $_SERVER['PHP_SELF']; ?>?tab=2">Third</a></li><li class="rest">&nbsp;</li>
  44.     </ul>
  45.     <div id="message">
  46.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque gravida
  47.         luctus tempor. Quisque risus nisl, eleifend at pellentesque sed, aliquet non
  48.         odio. Morbi diam felis, elementum dictum facilisis id, sollicitudin vel nisi.
  49.         Nunc vitae magna lorem, eu pharetra est. In hac habitasse platea dictumst.
  50.         Aliquam dignissim nibh nec elit tempor pulvinar. In hac habitasse platea
  51.         dictumst. Maecenas sit amet arcu non tortor fringilla interdum vitae eu arcu.
  52.         Pellentesque porta porttitor augue, blandit lobortis augue sagittis imperdiet.
  53.         Nunc eget arcu ac enim consectetur porta vitae ac tortor.
  54.     </div>
  55. <?php }elseif($_GET['tab'] == 2){ ?>
  56.     <ul id="menu">
  57.         <li><a href="<?php echo $_SERVER['PHP_SELF']; ?>">First</a></li><li class="selected"><a href="<?php echo $_SERVER['PHP_SELF']; ?>?tab=2">Second</a></li><li><a href="<?php echo $_SERVER['PHP_SELF']; ?>?tab=3">Third</a></li><li class="rest">&nbsp;</li>
  58.     </ul>
  59.     <div id="message">
  60.         Maecenas auctor enim sed quam pharetra sed cursus odio vehicula. Fusce eleifend
  61.         volutpat fringilla. Sed sit amet felis sem, nec lacinia sapien. In orci velit,
  62.         tincidunt et aliquet sed, accumsan non lacus. In eget erat lectus, sed adipiscing
  63.         felis. Vivamus gravida, dolor quis facilisis volutpat, nunc tortor ornare nunc,
  64.         eget fermentum felis risus vitae urna. Duis varius convallis ipsum. Vivamus vitae
  65.         urna turpis, eu scelerisque neque. Nam imperdiet mattis velit sit amet
  66.         scelerisque. Nullam sagittis malesuada dolor nec condimentum. Sed mattis, nibh
  67.         ut fermentum aliquam, sapien nibh interdum lacus, eu ultrices risus leo a elit.
  68.         Cras non nunc velit.
  69.  
  70.     </div>
  71. <?php }elseif($_GET['tab'] == 3){ ?>
  72.     <ul id="menu">
  73.         <li><a href="<?php echo $_SERVER['PHP_SELF']; ?>">First</a></li><li><a href="<?php echo $_SERVER['PHP_SELF']; ?>?tab=2">Second</a></li><li class="selected"><a href="<?php echo $_SERVER['PHP_SELF']; ?>?tab=3">Third</a></li><li class="rest">&nbsp;</li>
  74.     </ul>
  75.     <div id="message">
  76.         Integer sed lacus vel sem rhoncus pretium. In porttitor arcu quis nisi feugiat ut
  77.         dapibus elit venenatis. Suspendisse elementum arcu nec neque bibendum viverra.
  78.         Pellentesque feugiat, lorem sed rhoncus porttitor, enim arcu placerat justo, ut
  79.         fringilla enim tellus sodales nisl. Proin metus ipsum, facilisis at adipiscing
  80.         non, adipiscing non dui. Maecenas accumsan varius tincidunt. Donec sollicitudin
  81.         aliquam vehicula. Integer eros enim, faucibus in pharetra non, pulvinar eget
  82.         sapien. Cras varius, est sed convallis interdum, lacus ante pellentesque sapien,
  83.         sit amet vehicula metus nisl dictum mi. Ut tristique est vel ipsum venenatis
  84.         bibendum eu vel arcu. Maecenas egestas ultrices leo, a ullamcorper turpis volutpat
  85.         vitae. Morbi ultrices enim porttitor massa laoreet sed luctus lacus congue.
  86.         Morbi nunc justo, commodo sit amet suscipit in, tincidunt ac eros. Vivamus
  87.         condimentum sodales massa, non rutrum neque gravida eu. Ut non ante sit amet
  88.         augue egestas bibendum fringilla ut nunc. Aenean porttitor porta interdum.
  89.         Vestibulum et velit urna, id scelerisque lacus. Nam scelerisque laoreet sem.
  90.  
  91.     </div>
  92. <?php } ?>
  93. </div>
  94.  
  95. </body>
  96. </html>
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #5 (permalink)  
Antiguo 04/10/2010, 13:52
Avatar de Ribon  
Fecha de Ingreso: septiembre-2010
Ubicación: El firmamento
Mensajes: 487
Antigüedad: 7 años, 3 meses
Puntos: 91
Respuesta: Tabs en PHP

Si no quieres esconder DIVS entonces haz que se carguen utilizando Ajax. hay muchos recursos en internet con los que puedes hacerlo.

p.e. para Jquery

http://flowplayer.org/tools/demos/tabs/ajax.html
  #6 (permalink)  
Antiguo 04/10/2010, 15:25
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 11 años, 6 meses
Puntos: 2122
Tema movido desde PHP a Web general
  #7 (permalink)  
Antiguo 04/10/2010, 15:30
 
Fecha de Ingreso: octubre-2010
Mensajes: 4
Antigüedad: 7 años, 2 meses
Puntos: 0
Respuesta: Tabs en PHP

Sobre esconder DIVS, quiero hacer en una web distintas secciones (paginas), las cuales se necesiten permisos para acceder a ellas, por eso quiero evitar cargar todo en una pagina y lugo esconderlo.
En resumen, quiero una barra de vinculos horizontal, que al entrar en ese vinculo, y me redireccione quede marcada con otro color. (como un tab XP)
Sobre bajar el archivo, no me interesa la hoja de estilo, me interesa un archivo .php para replicar en mi pc saber que hace.
Queria ver si habia alguna forma standar de hacerlo, para no reinvetar la rueda... pero tal parece ser que no hay, si que tendre que cranearme un rato... pero me hace sentido lo que dice Abimaelrc
  #8 (permalink)  
Antiguo 07/10/2010, 08:25
Avatar de Ribon  
Fecha de Ingreso: septiembre-2010
Ubicación: El firmamento
Mensajes: 487
Antigüedad: 7 años, 3 meses
Puntos: 91
Respuesta: Tabs en PHP

Ok, pero tonces con PHP traes todos los DIVs a los que tiene permiso a acceder la persona, y luego escondes y muestras los DIVs y vas a estar trabajando solo con los que tiene permiso de ver.

No se si lo expliqué bien :P

Etiquetas: php, tabs
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 07:27.