informaticaPC

Tutorial de JQuery

Tabs (pestañas)


Regístrate

Tus datos no serán compartidos, solo nosotros te enviaremos información y novedades

Tabs (pestañas)

Este componente de JQuery UI con el que podemos implementar una navegación mediante pestañas es uno de los más fáciles de insertar en nuestras páginas web.

Algunas de sus propiedades son:

  • active: activar un determinado panel.
  • disabled: desactivar pestañas.

Algunos de sus métodos más útiles:

  • enable() / disable(): activar/desactivar las pestañas.
  • destroy(): elimina el componente.

Estudia el siguiente código fuente de ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | Pestañas con JQuery UI</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
        #pestanas { width:500px; }
    </style>

    <!-- Observa que agregamos también la librería JQuery UI -->
    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.10.1.custom.min.js"></script>

    <!-- Agregamos también el archivo CSS del theme que usemos -->
    <link type="text/css" rel="stylesheet" href="../lib/css/smoothness/jquery-ui-1.10.1.custom.css" />

    <script type="text/javascript">

        $(document).ready(function()
        {
            // Mostrar las pestañas
            $("#pestanas").tabs();

            // Mostrar el segundo panel (las posiciones comienzan desde cero)
            $("#mostrar").click(function(){
                $("#pestanas").tabs( {active:1} );
            })

            // Desactivar la pestañas 1 y 3
            $("#desactivar").click(function(){
                $("#pestanas").tabs( {disabled:[0,2]} );
            })
        });

    </script>
  </head>

  <body>

      <div id="pestanas">

        <ul>
            <li><a href="#informacion">Información</a></li>
            <li><a href="#productos">Productos</a></li>
            <li><a href="#opiniones">Opiniones</a></li>
            <li><a href="#contacto">Contacto</a></li>
        </ul>

        <div id="informacion">Información sobre la compañía.</div>
        <div id="productos">Productos disponibles.</div>
        <div id="opiniones">Opiniones.</div>
        <div id="contacto">
            <img src="logo.jpg" alt="" /><p />
            Localización de la compañía.<p />
            Contacto de la compañía.<p />
        </div>

      </div>

      <input type="button" id="mostrar" value="Mostrar el segundo panel" />
      <input type="button" id="desactivar" value="Desactivar las pestaña 1 y 3" />

  </body>

</html>

Ejemplo

EXPLICACIÓN:

  • Dentro de un 'DIV' que actúa como contenedor creamos una lista con enlaces a partir de los cuales se crearán las pestañas, junto con otros 'DIV' con los paneles que asociaremos a ellas.
  • Para indicar qué panel o 'DIV' debe mostrarse cuando hagamos clic en una pestaña, escribimos como valor de su atributo href el 'id' de uno los anteriores 'DIV' precedido de almohadilla (#).
  • Al cargarse la página creamos el componente llamando al método tabs().
Más información

Vea también: [ Tabs ] - [ Tabs (ejemplo) ]

Primera página Página anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso