jquery ui - seleccionar - jQuery Tabs-Cargar contenido solo cuando se hace clic

jquery ui tabs responsive

Question

Soy relativamente nuevo en jQuery y desarrollo web.

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

Pero quiero que los contenidos se carguen solo cuando selecciono una pestaña en particular.

Answer 1

Cargar contenido a través de Ajax agrega la complejidad de lidiar con los marcadores de favoritos / botones de búsqueda del navegador. 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 pestañas. Es bastante elegante.

Answer 2

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

Configurar un evento onclick

Dale a tu pestaña una clase, por ejemplo my_tab . Digamos que cuando el usuario hace clic en la pestaña, quiere que se active la función handle_tab_click () . Aquí hay un ejemplo de vincular el evento onclick a su pestaña my_tab :

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

Su función handle_tab_click () recibirá un argumento de evento que podrá proporcionarle información sobre el 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")) { /* ... */ }
}

Consulte la documentación del evento JQuery para obtener más detalles aquí .

Obteniendo los datos a través de ajax

La obtención de datos requerirá que invoque una secuencia de comandos remota mientras proporciona información sobre la pestaña en la que se hizo clic (para obtener la información adecuada). En el siguiente fragmento, estamos invocando el script remoto myscript.php , suministrando el argumento HTTP GET tab_clicked = my_tab y llamando a la función tab_fetch_cb cuando el script retorna. 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")

Depende de usted diseñar myscript.php para manejar el parámetro tab_clicked , buscar los datos apropiados y devolverlos (es decir, escribirlos de nuevo en el cliente).

Aquí hay un ejemplo para tab_fetch_cb :

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

Puede leer más sobre la función de obtención de JQuery aquí , y las funciones de JQuery ajax aquí

Lamento no poder ser más específico en mis ejemplos, pero gran parte del procesamiento depende realmente de tu 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 3

Las IU / Pestañas admiten cargar contenido de pestañas a pedido a través de Ajax, consulte este ejemplo.

Answer 4

De forma predeterminada, un widget de pestañas intercambiará entre las secciones con pestañas de Click, 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 Rails, puede probar esta gema bettertabs

Es compatible con las pestañas ajax.