Tabs en PHP

Ildekay · #1 (**permalink**) 04/10/2010, 11:43

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

egepe · #2 (**permalink**) 04/10/2010, 11:49

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

LuZBinG · #3 (**permalink**) 04/10/2010, 11:57

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

abimaelrc · #4 (**permalink**) 04/10/2010, 12:44

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Tab list</title> 
<style>
*{ margin:0; padding:0; }
#content{
    width: 350px;
    margin: 0 auto;
    border: 1px solid #000;
}
#menu{
    list-style-type: none;
    margin: 0;
    width: 100%;
}
#menu li{
    display: inline-block;
    background-color: #ccc;
    padding: 10px;
    border-bottom: 2px solid #000;
    border-right: 1px solid #000;
}
#menu li a{ color: #777; }
 
#menu .selected{
    background-color: #fff;
    border-bottom: none;
}
#menu .selected a{ color: #000; }
#menu .rest{
    width: 162px;
    border-right: none;
}
</style>
</head>
<body>
 
<div id="content">
<?php if(empty($_GET['tab'])){ ?>
    <ul id="menu">
        <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>
    </ul>
    <div id="message">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque gravida 
        luctus tempor. Quisque risus nisl, eleifend at pellentesque sed, aliquet non 
        odio. Morbi diam felis, elementum dictum facilisis id, sollicitudin vel nisi. 
        Nunc vitae magna lorem, eu pharetra est. In hac habitasse platea dictumst. 
        Aliquam dignissim nibh nec elit tempor pulvinar. In hac habitasse platea 
        dictumst. Maecenas sit amet arcu non tortor fringilla interdum vitae eu arcu. 
        Pellentesque porta porttitor augue, blandit lobortis augue sagittis imperdiet. 
        Nunc eget arcu ac enim consectetur porta vitae ac tortor.
    </div>
<?php }elseif($_GET['tab'] == 2){ ?>
    <ul id="menu">
        <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>
    </ul>
    <div id="message">
        Maecenas auctor enim sed quam pharetra sed cursus odio vehicula. Fusce eleifend 
        volutpat fringilla. Sed sit amet felis sem, nec lacinia sapien. In orci velit, 
        tincidunt et aliquet sed, accumsan non lacus. In eget erat lectus, sed adipiscing 
        felis. Vivamus gravida, dolor quis facilisis volutpat, nunc tortor ornare nunc, 
        eget fermentum felis risus vitae urna. Duis varius convallis ipsum. Vivamus vitae 
        urna turpis, eu scelerisque neque. Nam imperdiet mattis velit sit amet 
        scelerisque. Nullam sagittis malesuada dolor nec condimentum. Sed mattis, nibh 
        ut fermentum aliquam, sapien nibh interdum lacus, eu ultrices risus leo a elit. 
        Cras non nunc velit.
 
    </div>
<?php }elseif($_GET['tab'] == 3){ ?>
    <ul id="menu">
        <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>
    </ul>
    <div id="message">
        Integer sed lacus vel sem rhoncus pretium. In porttitor arcu quis nisi feugiat ut 
        dapibus elit venenatis. Suspendisse elementum arcu nec neque bibendum viverra. 
        Pellentesque feugiat, lorem sed rhoncus porttitor, enim arcu placerat justo, ut 
        fringilla enim tellus sodales nisl. Proin metus ipsum, facilisis at adipiscing 
        non, adipiscing non dui. Maecenas accumsan varius tincidunt. Donec sollicitudin 
        aliquam vehicula. Integer eros enim, faucibus in pharetra non, pulvinar eget 
        sapien. Cras varius, est sed convallis interdum, lacus ante pellentesque sapien, 
        sit amet vehicula metus nisl dictum mi. Ut tristique est vel ipsum venenatis 
        bibendum eu vel arcu. Maecenas egestas ultrices leo, a ullamcorper turpis volutpat 
        vitae. Morbi ultrices enim porttitor massa laoreet sed luctus lacus congue. 
        Morbi nunc justo, commodo sit amet suscipit in, tincidunt ac eros. Vivamus 
        condimentum sodales massa, non rutrum neque gravida eu. Ut non ante sit amet 
        augue egestas bibendum fringilla ut nunc. Aenean porttitor porta interdum. 
        Vestibulum et velit urna, id scelerisque lacus. Nam scelerisque laoreet sem.
 
    </div>
<?php } ?>
</div>
 
</body>
</html>

Ribon · #5 (**permalink**) 04/10/2010, 12:52

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

GatorV · #6 (**permalink**) 04/10/2010, 14:25

Tema movido desde PHP a Web general

Ildekay · #7 (**permalink**) 04/10/2010, 14:30

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

Ribon · #8 (**permalink**) 07/10/2010, 07:25

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