Crear tabs en joomla

Después del artículo sobre crear sliders en Joomla, vamos a aprender otro efecto muy utilizado en los sitios web. Los tabs o pestañas. Hay muchas formas de crear un sistema de tabs en Joomla. Podemos buscar algún plugin para Mootools, podemos realizarlo nosotros mismos, etc. Pero Joomla nos vuelve a ofrecer una manera sencilla para realizar nuestros tabs.

Si has leido el artículo sobre sliders en Joomla, el código que voy a mostrar a continuación te va a resultar muy familiar. Esto me parece otra de las ventajas de utilizar el API de Joomla. Cualquier compañero o programador que esté acostumbrado a trabajar con Joomla y vea tu código, lo entenderá enseguida.

<?php echo JHtml::_('tabs.start', 'TabsID',array('useCookie'=>0,'startOffset'=>0)); ?>
    <?php echo JHtml::_('tabs.panel', "Coches", 'CochesClass'); ?>
    <ul>
        <li>Coche 1</li>
        <li>Coche 2</li>
        <li>Coche 3</li>
        <li>Coche 4</li>
        <li>Coche 5</li>
    </ul>    
    <?php echo JHtml::_('tabs.panel', "Motos", 'MotosClass'); ?>
    <ul>
        <li>Moto 1</li>
        <li>Moto 2</li>
        <li>Moto 3</li>
        <li>Moto 4</li>
        <li>Moto 5</li>
    </ul>    
<?php echo JHtml::_('tabs.end'); ?>

Para crear nuestro sistema de tabs, hemos realizado cuatro llamadas al API de Joomla. En la primera de ellas, indicamos que vamos a empezar un conjunto de pestañas. Este método recibe tres parametros:

  1. Le indicamos a Joomla que clase y método queremos ejecutar.
  2. ID que tendrá el contenedor principal
  3. Un array con los parametros de configuración.

Parámetro de configuración de los Tabs en Joomla

Los tabs disponen de 4 posibles parámetros de configuración que voy a intentar explicar:

  • useCookie: Indicamos si queremos que el navegador recuerde cual es el último tab que hemos visualizado.
  • startOffset: El indice del Tab que queremos esté visible al cargar la página web. Este índice empieza en el 0.
  • onActive: Creo es un método que nos permite ejecutar funciones javascript; ya que esto si lo he conseguido. Pero no he logrado un buen funcionamiento de este parámetro. Si sabes como utilizarlo, ¡¡¡ Estaré encantado de conocerlo !!!
  • onBackground: Me pasa lo mismo que con el parámetro anterior.

Las dos siguientes llamadas al API, son las que crean las pestañas. Es decir tendremos que realizar tantas llamadas a este método como tabs queramos incluir en la web. Esta llamada requiere otros tres parámetros:

  1. Indicamos al API de Joomla que clase y método queremso ejecutar
  2. Texto que tendrá nuestro Tab.
  3. Clase que se añadira al título de nuestro Tab.

La última llamada, únicamente se encarga de indicar al API que hemso acabado de añadir Tabs y queremos cerrar el proceso.

Como hemos visto, resulta muy sencilla la creación de tabs en Joomla. Además poco a poco nos vamos familiarizando con la parte “HTML” del API de Joomla.

Esta entrada fue publicada en Plantillas. Guarda el enlace permanente.

5 respuestas a Crear tabs en joomla

  1. Carlos Humberto Triana dijo:

    Copie el codigo, lo guarde tal cual en un archivo que denomine tabs.php, hice el llamado por el localhost php y me retorna el mensaje:

    Fatal error: Class ‘JHtml’ not found in D:\xampp\htdocs\website\mio\tabs.php on line 1

    Me explican por que… por favor

    • todojoomla dijo:

      Para poder usar la clase JHtml que hemos visto en el post, es necesario cargar las librerias del Framework de Joomla. Si incluyes tu archivo dentro del index.php de la plantilla verás como te funciona y puedes crear tus tabs.
      Un saludo

  2. Carlos humberto Triana dijo:

    Gracias por tu respuesta….

  3. Hola, se esta trabajando en “unir” la creación de un modulo de porras y otro de album con el componente joomsport, pero tengo la siguiente inquietud:

    en vez de hacer un “reguero” de números del álbum, se requiere que haga tabulador por equipo, al copiar el código de este blog los tabuladores me aparecen uno debajo de otro, en vez de uno al lado de otro.

    Anexo código para que Por Favor me explique que estoy haciendo mal…

    0,’startOffset’=>0)); ?>

    Coche 1

    Moto 1

    <?php echo JHtml::_('tabs.end');

    jimport('joomla.application.application');
    jimport('joomla.application.component.controller');
    jimport('joomla.filesystem.file');

    echo 'Album Mundial Brasil 2014‘;
    echo ”;

    $reg=1;
    $ok=0;
    $falta=0;

    for($i=0;$i<=24;$i++) {
    echo "”;
    for ($j=0;$jid.’ and id_cromo = ‘.$reg;
    $row = mysql_query($query);
    $cromo = mysql_fetch_array($row);
    if ($cromo[2] == $reg) {
    $disabled = ‘disabled readonly=readonly checked’;
    $color=”red”;
    $ok++;
    // echo ‘por igual ‘.$cromo[2].’ – ‘.$reg;
    }
    else {
    $disabled= ‘enabled <b';
    $color="white";
    $falta++;
    // echo 'por diferente '.$cromo[2].' – '.$reg;
    }
    // <a href=../index.php/component/joomsport/player/1/.$reg.
    echo “<a href=../index.php/component/joomsport/player/1/$reg$reg”;
    $reg++;
    // echo “$reg$tbl[0]<a href=../index.php/component/joomsport/team/1/".$tbl[1]."$tbl[1]$tbl[2]”;
    }
    }
    $total = $ok + $falta;
    echo “faltantes $falta Ok $ok total $total”;
    ?>

    <input type="submit" value="” />
    <input type="submit" value="” />

  4. Carolina dijo:

    Pero como hago nuevos formularios dentro de cada tab y guardo todo al momento de llenar la información.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s