Pestañas,Paneles deslizables. tipo Gmail

[richard20]

Estimados

Estoy haciendo un sitio web y me he encontrado con que tengo mucha informacion que mostrar, por lo cual quisiera conocer la forma de implementar solapas o pestañas y paneles deslizables, como los que se utilizan en Gmail.

Tambien me interesaria saber la compatibilidad con los exploradores que tuviera la solucion planteada.

Desde ya muchas gracias.

[JavierB]

Hola richard20

Te dejo un enlace, a ver si te sirve:

http://kusor.net/traducciones/brainjar.es/tabs1.es.html

Saludos,

[sirocus]

Yo escribi este código bien sencillo que puedes ver en marcha en la siguiente url : http://www.kid-idiot.com/tutoriales/tabs

y el código :

Código:

<SCRIPT LANGUAGE="JavaScript">
<!--
function Opcion01() {
capa01.style.visibility = "visible";
pest01.style.background = "url(pst01.jpg)";
pest02.style.background = "url(pst02.jpg)";
}
function Opcion02() {
capa01.style.visibility = "hidden";
pest01.style.background = "url(pst02.jpg)";
pest02.style.background = "url(pst01.jpg)";
}
//-->
</SCRIPT>

<style type="text/css">
<!--
body {
	background-color: #CCCCCC;
}

A.linkpanel {color:#666666; font-size:11px; text-decoration: none; font-family:Arial,Verdana,sans-serif;}
A.linkpanel:visited {color:#666666; font-size:11px; text-decoration: none; font-family:Arial,Verdana,sans-serif;}
A.linkpanel:active {color:#666666; font-size:11px; text-decoration: none; font-family:Arial,Verdana,sans-serif;}
A.linkpanel:hover {color:#FF6600;  font-size:11px; text-decoration: none; font-family:Arial,Verdana,sans-serif;}

.inputbox {Border-color:#CC0001;border-width:1px;width: 90%; height: 20px;font-family: Verdana, Arial, Helvetica, sans-serif;font-size:9px;color:#CC0001;font-size: 9px;background-color:#FFFFFF;}
.letraroja {font-family: Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#CC0001;}
-->
</style>
<title>Navegaci&oacute;n por pesta&ntilde;as</title><form name="form1" method="post" action="">
  <table width="517" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="312" align="left" valign="top"><table width="312" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="125" align="left" valign="bottom"><table width="125" height="20" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="60" align="center" valign="middle" background="pst01.jpg" id="pest01"><a href="#" onClick="Opcion01();" class="linkpanel">Opt01</a></td>
              <td width="5" align="center" valign="bottom">
			  <table width="5"  border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td height="1" bgcolor="#CC0001"></td>
                </tr>
              </table></td>
              <td width="60" align="center" valign="middle" background="pst02.jpg" id="pest02"><a href="#" onClick="Opcion02();" class="linkpanel">Opt02</a></td>
            </tr>
          </table></td>
          <td align="left" valign="bottom"><table width="187" height="1"  border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td height="1" bgcolor="#CC0001"></td>
            </tr>
          </table></td>
        </tr>
      </table>
        <table width="312" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#CC0001"></td>
          <td>&nbsp;</td>
          <td height="5" align="left" valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td bgcolor="#CC0001"></td>
        </tr>
        <tr>
          <td width="1" bgcolor="#CC0001"></td>
          <td width="5">&nbsp;</td>
          <td width="300" height="65" align="left" valign="top">
<div id="capa02" align="left" style="position:absolute; visibility: visible;">
          <table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
            <tr>
              <td>&nbsp;<span class="inputbox">Opci&oacute;n02</span></td>
            </tr>
            <tr>
              <td height="5"></td>
            </tr>
            <tr>
              <td align="left" valign="top">&nbsp;<input name="txt2" type="text" class="inputbox" id="txt2"></td>
            </tr>
            <tr>
              <td height="5"></td>
            </tr>
          </table>
</div>
        <div id="capa01" align="left" style="position:absolute; visibility: visible;">
          <table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
            <tr>
              <td>&nbsp;<span class="inputbox">Opci&oacute;n01</span></td>
            </tr>
            <tr>
              <td height="5"></td>
            </tr>
            <tr>
              <td>&nbsp;<input name="txt1" type="text" class="inputbox" id="txt1"></td>
            </tr>
            <tr>
              <td height="5"></td>
            </tr>
          </table>
      </div>		  </td>
          <td width="5">&nbsp;</td>
          <td width="1" bgcolor="#CC0001"></td>
        </tr>
        <tr>
          <td bgcolor="#CC0001"></td>
          <td>&nbsp;</td>
          <td align="right" valign="top"><input type="submit" name="Submit" value="Enviar"></td>
          <td>&nbsp;</td>
          <td bgcolor="#CC0001"></td>
        </tr>
        <tr>
          <td height="5" bgcolor="#CC0001"></td>
          <td height="5"></td>
          <td height="5" align="left" valign="top"></td>
          <td height="5"></td>
          <td height="5" bgcolor="#CC0001"></td>
        </tr>
        <tr>
          <td colspan="5" bgcolor="#CC0001" height="1"></td>
          </tr>
      </table></td>
      <td width="5" align="left" valign="top">&nbsp;</td>
      <td align="left" valign="top">
<table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="letraroja"><?
if (isset($_POST['Submit'])){
	echo "Valor Opción 01 -> ".$_POST['txt1']."<br>";
	echo "<br>Valor Opción 02 -> ".$_POST['txt2'];
}
?></td>
  </tr>
</table>
	  </td>
    </tr>
  </table>
</form>

Espero que te haya servido de ayuda.