jQuery Tabs - Cargar contenido solo cuando se hace clic en

Question

Soy relativamente nuevo en jQuery y desarrollo web.

Estoy usando las pestañas jQuery UI para crear pestañas.

Pero quiero que el contenido se cargue solo cuando selecciono una pestaña en particular.

Answer 1

OK, supongo que cuando el usuario hace clic en una pestaña, tiene la intención de buscar el contenido de forma dinámica, a través de AJAX. Esto realmente involucra dos cosas, estableciendo un onclick incluso para su pestaña y obteniendo los datos a través de ajax.

Configuración de un evento onclick

Dé su pestaña de una clase, por ejemplo my_tab. Supongamos que cuando el usuario hace clic en la pestaña, quiere que se active la función handle_tab_click(). He aquí un ejemplo de unirse al evento onclick a su my_tab pestaña:

$(".my_tab").bind("click", handle_tab_click); 

Su handle_tab_click() función se dará una argumento evento que será capaz de proporcionarle información sobre la elemento que activó el evento (en este caso, el elemento con el nombre de clase my_tab).

function (event) { 
    if ($(event.target).hasClass("my_tab")) { /* handle tab click */ } 
    if ($(event.target).hasClass("my_tab_2")) { /* a different tab click */ } 
    if ($(event.target).hasClass("my_tab_3")) { /* ... */ } 
} 

Véase la documentación del evento jQuery para más detalles here.

Obtención de los datos a través de Ajax

datos Captación le requerirán para invocar una secuencia de comandos a distancia, mientras que el suministro de información sobre la que se ha hecho clic pestaña (con el fin de buscar la información apropiada). En el siguiente fragmento, estamos invocando el control remoto guión myscript.php, suministrando el argumento GET HTTP tab_clicked = my_tab y llamar a la función tab_fetch_cb cuando el script devuelve. El parámetro final es el tipo de datos que se devuelven (depende de usted elegir).

$.get("myscript.php", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml") 

Todo depende de usted para diseñar myscript.php para manejar la tab_clicked parámetro, ir a buscar los datos apropiados y devolverlo (es decir, escribir de nuevo hacia el cliente).

He aquí un ejemplo para tab_fetch_cb:

function tab_fetch_cb(data, status) { 
    // populate your newly opened tab with information 
    // returned from myscript.php here 
} 

Usted puede leer más sobre el JQuery obtener función here y funciones ajax jQuery here

Lo siento no puedo estar más específico en mis ejemplos, pero gran parte del procesamiento depende realmente de su tarea. Como parece que ya se ha señalado, puede consultar algunos complementos JQuery para una solución enlatada a su problema. Dicho esto, nunca está de más aprender a hacer esto manualmente con JQuery.

Buena suerte.

Answer 2

UI/pestañas compatibles cargando contenido de pestañas bajo demanda a través de Ajax, verifique this ejemplo.

Answer 3

Cargando contenido a través de Ajax agrega la complejidad de tratar con marcadores de favoritos/botones de búsqueda hacia atrás. Dependiendo de su situación, debería considerar cargar contenido nuevo con una solicitud de página completa. Manejar el marcador/navegador hacia atrás implica agregar información de anclaje en la URL.

Además, consulte LavaLamp para la selección de ficha. Es bastante elegante.

Answer 4

De forma predeterminada, un widget de pestañas se intercambia entre las secciones con pestañas enClick, pero los eventos se pueden cambiar a onHover a través de una opción. El contenido de la pestaña se puede cargar a través de Ajax configurando un href en una pestaña.

fuente: http://docs.jquery.com/UI/Tabs

Answer 5

Si está utilizando rieles, puede probar esta joya bettertabs

Es compatible con pestañas ajax.