Jugando con jQueryUI: Tabs y AJAX (Parte II)

<div id="tabs">
 <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
 </ul>
    <div id="tab1">HTML5facil BLog de la comunidad HTML5</div>
    <div id="tab2">Otro Hola Mundo pero en jQueryUI</div>
    <div id="tab3">Lorem ipsum</div>
    <div id="tab4">Contenido pestaña 4</div>
 </div>
 <script> $("#tabs").tabs (); </script>

Este es el resultado del post anterior (esto como una guía de los resultados).

Como trabajan los eventos asociados en las opciones de los tabs en jQueryUI

Anteriormente hablamos de las opciones que se utilizan para la gestión de tabs, tales como seleccionar, añadir y eliminar. Estas opciones reciben el parámetro del evento, seguido por el objeto tab que describe el tab o pestaña donde ocurrirá el evento. Este objeto tab se compone de las siguientes propiedades:

• index: El índice del tab o pestaña en la que ocurre el evento (el número cero “0” indica la primera pestaña)
• panel:Es el que corresponde al contenido del tab o pestaña.

Ya veremos donde se aplica estos conceptos.

Método Tabs (“acción”, parametro)

Esta nueva forma del método tab de  modifica el comportamiento de las pestañas después de su creación. Permite a través de JavaScript, acciones en las pestañas, como la selección, desactivación, agregar o quitar un tab. La acción se especifica como una cadena en el primer argumento (por ejemplo, “add” para añadir una nueva pestaña), mientras que el o los argumentos que siguen se refieren a los parámetros de esta acción. Estos eventos se procesan por las opciones ya comentadas, y se pueden ver en la siguiente tabla:

Creando Tabs o pestañas dinámicas

El ejercicio para entender como agregamos la funcionalidad de la sección anteriormente descritas es agregando un tab o pestaña de forma dinámica. Vamos a utilizar el método tabs(“add”, “#id”, title, index) de la siguiente manera:

</pre>
$("#tabs").tabs({
     fx : { opacity:toggle},</pre>
}).tabs("add", "#tab5", "Tab 5");
 $("<i>Añadiendo Tabs dinamicos</i>").appendTo("#tab5");

Cuando revisa el ejemplo encuentra dos operaciones que tal vez no entienda

tabs({fx : { opacity:toggle},})

Aquí utilizamos la opción fx de  dandole un efecto de aparecer de manera gradual al texto interno de los tabs o pestañas.

El otro elemento no conocido o tratado que hace parte más de  es la manera en que ingresamos datos dentro del tab recién creado.

 $("<i>Añadiendo Tabs dinamicos</i>").appendTo("#tab5");

El resultado es el siguiente:

 Ahora Si! modificando el contenido de nuestros tabs o pestañas con Ajax

Listo vamos modificar el contenido de un tab o pestaña desde el HTML devuelto por el servidor. Vamos a utilizar un servidor PHP en mi caso uno basado en pero puedes usar , ,o cualquier servidor.
Vamos a modificar el contenido de la primer tab o pestaña, el índice o index 0, usando el atributo “url” y las acciones de cargar o “load”:

</pre>
$("#tabs").tabs({
}).tabs("add", "#tab5", "Tab 5");
$("<i>Añadiendo Tabs dinamicos</i>").appendTo("#tab5");
 $("#tabs").tabs({
 }).tabs("url",0, "./lab.php").tabs("load", 0);
<pre>

y luego creando el archivo lab.php con la siguientes información:

</pre>
<?php
    $txt = "<p> Contenido desde el servidor </p>";
    $txt = utf8_encode($txt);
    echo $txt;
?>
<pre>

Adicionando un Tab y añadiendo información desde el servidor con el metodo add de Tabs

En este punto vamos adicionar un tab o pestaña de manera dinámica utilizando las opciones de “eventos asociados” en especial el “options.load” con el contenido del mismo a través de AJAX.

</pre>
$("#tabs").tabs({
            fx : { opacity : "toggle" },
            add: function(event, tab){
$(tab.panel).load("./lab.php");
 }
 }).tabs("add", "#tab6", "Tab 6");
<pre>

Que encontramos de raro en este ejemplo; estamos utilizando el método tabs(options):
en las lineas de código:

</pre>
 add: function(event, tab){
 $(tab.panel).load("./lab.php");
 }
<pre>

Usamos la propiedad “panel” de método tabs(options) para añadir información a la pestaña. Dando como resultado algo como esto:

 Para tener en cuenta

el código parcial que llevamos hasta este momento de los tabs con  es el siguiente para que no se sienta perdido:

</pre>
<div id="tabs">
 <ul>
     <li><a href="#tab1">Tab 1</a></li>
     <li><a href="#tab2">Tab 2</a></li>
     <li><a href="#tab3">Tab 3</a></li>
     <li><a href="#tab4">Tab 4</a></li>
 </ul>
 <div id="tab1">HTML5facil BLog de la comunidad HTML5</div>
 <div id="tab2">Otro Hola Mundo pero en jQueryUI</div>
 <div id="tab3">Lorem ipsum</div>
 <div id="tab4">Contenido pestaña 4</div>
 </div>
 <script> $("#tabs").tabs (); </script>

 <script>

 $("#tabs").tabs({
 }).tabs("add", "#tab5", "Tab 5");
       $("<i>Añadiendo Tabs dinamicos</i>").appendTo("#tab5");

 $("#tabs").tabs({
 }).tabs("url",0, "./lab.php").tabs("load", 0);

 $("#tabs").tabs({
            fx : { opacity : "toggle" },
            add: function(event, tab){
 $(tab.panel).load("./lab.php");
 }
 }).tabs("add", "#tab6", "Tab 6");
</script>

Por ultimo transmitiendo información a el servidor vía AJAX

Este ejemplo muestra cómo transmitir la información al servidor a través de Ajax par modificar el contenido de la pestaña correspondiente. Se envía el nombre y apellido de una persona y lo mostrará en la pestaña como contenido devuelto por el servidor. La información transmitida por (nombre y apellido) se inserta en la opción ajaxOptions en la propiedad de datos:

</pre>
$("#tabs").tabs({
           ajaxOptions : {data: {name: "Alejandro", nickname: "alejo8591"}}
 }).tabs("add", "#tab7", "Tab 7").tabs("url", 6, "./lab1.php").tabs("load", 6);
<pre>

Recuerda que si quieres saber más sobre  es necesario verificar la documentación de , lo único diferente aquí es el segundo dato de la opción tabs(“url”, 6, “./lab1.php”) que el 6 se refiere al número de tab que quiere afectar.

Modificamos el archivo escrito en PHP “lab.php” con la siguiente información para interactuar:

</pre>
<?php
    $name = $_REQUEST["name"];
    $nickname = $_REQUEST["nickname"];
    $name = utf8_decode($name);
    $nickname = utf8_decode($nickname);
    $txt = "<p>Contenido desde servidor</p>";
    $txt .= "Name : " . $name . "<br />";
    $txt .= "Nickname : " . $nickname . "<br />";
    $txt = utf8_encode($txt);
    echo $txt;
?>
<pre>

<pre><div id="tabs">
 <ul>
     <li><a href="#tab1">Tab 1</a></li>
     <li><a href="#tab2">Tab 2</a></li>
     <li><a href="#tab3">Tab 3</a></li>
     <li><a href="#tab4">Tab 4</a></li>
 </ul>
 <div id="tab1">HTML5facil BLog de la comunidad HTML5</div>
 <div id="tab2">Otro Hola Mundo pero en jQueryUI</div>
 <div id="tab3">Lorem ipsum</div>
 <div id="tab4">Contenido pestaña 4</div>
 </div>
 <script> $("#tabs").tabs (); </script>

 <script>

 $("#tabs").tabs({
 }).tabs("add", "#tab5", "Tab 5");
       $("<i>Añadiendo Tabs dinamicos</i>").appendTo("#tab5");

 $("#tabs").tabs({
 }).tabs("url",0, "./lab.php").tabs("load", 0);

 $("#tabs").tabs({
            fx : { opacity : "toggle" },
            add: function(event, tab){
 $(tab.panel).load("./lab.php");
 }
 }).tabs("add", "#tab6", "Tab 6");
$("#tabs").tabs({
           ajaxOptions : {data: {name: "Alejandro", nickname: "alejo8591"}}
 }).tabs("add", "#tab7", "Tab 7").tabs("url", 6, "./lab1.php").tabs("load", 6);
</script></pre>

Código del Post

El repositorio lo encuentras en en la cuenta oficial de html5facil con el nombre de html5facil los archivos que nos importan  son:

• tabsjqueryui.html
• lab.php
• lab1.php

También es importante que sepas si le haces fork o clone los archivos de la libreria  no están en el repositorio es necesario que los descargues.