javascript - meetup - nodeconfar

Pestañas de inicio de Twitter y eventos de JavaScript

Question

Estoy usando Twitter bootstrap para un proyecto, en particular sus funciones de pestañas ( http://twitter.github.com/bootstrap/javascript.html#tabs )

Ahora tengo esta tabla y cuando presiono la pestaña, cambia al contenido de cada pestaña individual. Sin embargo, este contenido está precargado en la página (el código html para el contenido de todas las pestañas ya está allí, solo cambia la visibilidad presionando las pestañas).

Sin embargo, solo quiero cargar contenido dinámicamente cuando se presiona una determinada pestaña, de modo que uno obtendrá los datos más recientes en lugar de los datos cuando se cargó la página completa.

Estoy planeando usar jQuery para esto. Sin embargo, ¿cómo puedo hacer para que cuando se presione una pestaña se llame a cierta función jquery?

Intenté mostrar una alerta cuando se hizo clic en una pestaña (si eso funciona, una función jQuery también), pero incluso eso no funciona:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js"></script>
<script type="text/javascript">
$(function() {
    $(''.tabs'').bind(''click'', function (e) {
        e.target(window.alert("hello"))
    });
});
</script>

Y mi html:

<ul class="tabs" data-tabs="tabs">
  <li class="active"><a href="#tab1">tab 1</a></li>
  <li><a href="#tab2">tab 2</li>
</ul>

<div id="my-tab-content" class="tab-content">
  <div class="tab-pane" id="tab1">
      <h1>Tab1</h1>
      <p>orange orange orange orange orange</p>
  </div>
  <div class="tab-pane" id="tab2">
     <h1>Tab2</h1>
     <p>blue blue blue blue blue</p>
  </div>
</div>

¿Alguna idea sobre cómo hacer que esto funcione?

ver esto para el funcionamiento de las pestañas de arranque de Twitter: ( http://twitter.github.com/bootstrap/javascript.html#tabs ) y el archivo js que utiliza: http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js

Answer 1

¿Qué hay de usar el clic? Me gusta esto:

$(''#.tabs'').click(function (e) {
  e.target(window.alert("hello"))
})

Answer 2

Con Twitter Bootstrap versión 2, la forma documentada de suscribirse a los eventos de cambio de pestaña es

$(''a[data-toggle="tab"]'').on(''shown'', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

La última documentación sobre los eventos de la pestaña Twitter Bootstrap se puede encontrar en http://getbootstrap.com/javascript/#tabs

Answer 3

El enlace parece ejecutarse antes de que DOM esté listo. Además, su selector parece estar roto y puede vincular el cambio solo en elementos seleccionados. Tienes que trabajar haciendo clic e implementando algo de lógica. Tratar

$(function() {
    $(''.tabs'').bind(''click'', function (e) {
        e.target(window.alert("hello"))
    });
});

ACTUALIZAR

Después de consultar con la documentación, parece que su código solo faltaba la parte lista para el DOM, el resto no era realmente un error, lo que significa que de acuerdo con los documentos debería funcionar lo siguiente:

$(function() {
    $(''.tabs'').bind(''change'', function (e) {
        // e.target is the new active tab according to docs
        // so save the reference in case it''s needed later on
        window.activeTab = e.target;
        // display the alert
        alert("hello");
        // Load data etc
    });
});

Lo que causó confusión es que el complemento anula el selector predeterminado, lo que hace que #.tabs válido y también agrega un evento de cambio al elemento de tabulación. Entérate por qué decidieron que esta sintaxis era una gran idea.

De todos modos, puedes probar la segunda muestra y comentar si la alerta se activa antes o después de que cambie la pestaña.

EDITAR: excepción de jquery fija causada por #.tabs selector #.tabs

Answer 4

Puede usar el siguiente fragmento de código en bootstrap 3

$(document).on( ''shown.bs.tab'', ''a[data-toggle="tab"]'', function (e) {
   var activatedTab = e.target; // activated tab
})

Answer 5

Si está utilizando 2.3.2 y no funciona, intente usar:

$(document).on("shown", ''a[data-toggle="tab"]'', function (e) {
     console.log(''showing tab '' + e.target); // Active Tab
     console.log(''showing tab '' + e.relatedTarget); // Previous Tab
});

2.3.2 uso de pestañas: http://getbootstrap.com/2.3.2/javascript.html#tabs

Si está jugando con la versión 3 (actualmente RC2), la documentación muestra

$(''a[data-toggle="tab"]'').on(''shown.bs.tab'', function (e) {
     console.log(''showing tab '' + e.target); // Active Tab
     console.log(''showing tab '' + e.relatedTarget); // Previous Tab
 })

Uso de las pestañas RC2: http://getbootstrap.com/javascript/#tabs-usage

Answer 6

Tiene un error en su sintaxis relacionada con el selector:

$(''#.tabs'') // should be ...
$(''.tabs'');

La lista desordenada tiene la clase llamada ''pestañas'' en su HTML, mientras que originalmente intentaba seleccionar un elemento con el id ''.tabs''.

Y también tendrás que tener en cuenta la sugerencia de manticore. Solo puedes usar ''cambiar'' en los elementos del formulario.

$(document).ready(function() {
    $(''.tabs'').click(function(e) {
        e.preventDefault();
        alert(''tab clicked!'');
    });
});

Answer 7

http://twitter.github.com/bootstrap/javascript.html#tabs dice: use event show .