tabs

=jQuery tabs=


 * @http://jqueryui.com/demos/tabs/
 * los tabs se usan para separar contenido para mejor visualización en una página (como en el acordeón)
 * para los colores se usan los temas de jQuery-UI
 * el cambio entre tabs puede escogerse por
 * click
 * onmouse over
 * el contenido de un tab puede cargarse por Ajax

Scripts y CSS requeridos

 * usar CDN

=ejemplo básico=

code format="html4strict" $(document).ready(function {        if (jQuery.ui) {            $("#tabs").tabs;        }        else            alert('jQuery UI NOT loaded');    });

 TAB 1 TAB 2 TAB 3  Contenido tab 1 Contenido tab 2 Contenido tab 3

code
 * El script se ocupa de colocar en Tabulación lo que encuentra en los LI del div indicado
 * Debe haber un DIV con un id que se referencia en el script. Dentro de ese DIV la estructura es la mostrada.
 * Añadimos la comprobación de que el script UI está cargado, aunque no es obligatorio.



=Ejemplo Ajax=

code format="html4strict" $(document).ready(function {        if (jQuery.ui) {            //ajax            $("#tabsajax").tabs({ ajaxOptions: { error: function (xhr, status, index, anchor) { $(anchor.hash).html("error cargando ajax"); }               }            });        }        else            alert('jQuery UI NOT loaded');    });

Ajax Tabs  Preloaded</a></li> Tab 1 ajax</a></li> Tab 2 ajax</a></li> </ul> pre loaded code
 * no es necesario tener web services, en el tab ajax que no se indique en un div, se intentará cargar dinámicamente de la url que se indique
 * a tener en cuenta que el texto cargado, si es una página HTML incluye tags que no desearíamos:, etc.

=Ejemplo de rellenar por código dependiendo del tab seleccionado=

code format="html4strict" $(document).ready(function {        $("#tabs").tabs({ select: function (event, ui) { switch (ui.index) { case 1: alert(ui.panel.id); jQuery("#" + ui.panel.id).empty.html("este es el panel numero " + (ui.index + 1).toString); break; default: break; }           }        });    });

Ajax tabs with function  TAB 0</a></li> TAB 1</a></li> TAB 2</a></li> </ul> Contenido tab 0

Contenido tab 2

code
 * en este ejemplo, al pulsar un tab se ejecuta la función indicada
 * ui.index indica el tab seleccionado (0,1,2), en este caso por ejemplo 1
 * ui.panel.id es el nombre del div relacionado, en este caso por ejemplo tabs-1
 * Aquí lo que se hace es
 * se selecciona el div
 * se limpia
 * se pone el html indicado

Bugs
> http://stackoverflow.com/questions/4417694/jquery-tabs-nesting-other-jquery-elements-or-javascript-within-only-works-on-fir
 * Si se pone jCarousel en un tabs de jQuery que no sea el primer tab, no funciona bien. hay que modificar el CSS tal como se indica en