jQuery - pestaña de captura Seleccione el evento

Question

Soy un novato de jQuery y estoy tratando de descubrir cómo atrapar el evento seleccionado en la pestaña. Usando jQuery 1.2.3 y las pestañas jQuery UI correspondientes (no es mi elección y no tengo control sobre ella). Es una pestaña anidada con el nombre Div de primer nivel - pestañas. Esta es la forma en que inicializa las pestañas

$(function() { 
     $('#tabs ul').tabs(); 
}); 

$(document).ready(function(){ 
    $('#tabs ul').tabs('select', 0); 
}); 

que no soy capaz de encontrar la manera de trampa de cualquiera de los eventos o propiedades (ficha seleccionada, cuando se hace clic en la ficha, etc.). Agradecería cualquier ayuda en esto ...

Probé cosas como:

$('#tabs ul').bind('tabsselect', function(event, ui) { 
    selectedTab = ui.index; 
    alert('selectedTab : ' + selectedTab); 
}); 

       (OR) 

$('#tabs').bind('tabsselect', function(event, ui) { 

sin éxito.

A continuación se muestra el marcado

<div id="tabs"> 
<UL> 
    <LI><A href="#fragment-1"><SPAN>Tab1</SPAN></A></LI> 
    <LI><A href="#fragment-2"><SPAN>Tab2</SPAN></A></LI> 
    <LI><A href="#fragment-3"><SPAN>Tab3</SPAN></A></LI> 
    <LI><A href="#fragment-4"><SPAN>Tab4</SPAN></A></LI> 
</UL> 

<DIV id=fragment-1> 
<UL> 
    <LI><A href="#fragment-1a"><SPAN>Sub-Tab1</SPAN></A></LI> 
    <LI><A href="#fragment-1b"><SPAN>Sub-Tab2</SPAN></A></LI> 
    <LI><A href="#fragment-1c"><SPAN>Sub-Tab3</SPAN></A></LI> 
</UL> 
</DIV> 
. 
. 
. 

</DIV> 

Answer 1

El método correcto para la captura de eventos de selección de ficha es establecer una función que el valor de la opción select al inicializar las pestañas (también se puede configurar de forma dinámica después), al igual por lo que:

$('#tabs, #fragment-1').tabs({ 
    select: function(event, ui){ 
    // Do stuff here 
    } 
}); 

se puede ver el código real en acción aquí: http://jsfiddle.net/mZLDk/

---

Editar: Con el enlace que me diste, he creado un entorno de prueba para jQuery 1.2.3 con jQuery UI 1.5 (¿me parece?). Algunas cosas obviamente cambiaron desde entonces. No había un objeto separado ui que se separó del objeto original event. El código se ve más o menos así:

// Tab initialization 
$('#container ul').tabs({ 
    select: function(event) { 
     // You need Firebug or the developer tools on your browser open to see these 
     console.log(event); 
     // This will get you the index of the tab you selected 
     console.log(event.options.selected); 
     // And this will get you it's name 
     console.log(event.tab.text); 
    } 
}); 

Phew. Si hay algo que aprender aquí, es que el código de legado de soporte es difícil. Consulte el jsfiddle para obtener más información: http://jsfiddle.net/qCfnL/1/

Answer 2

Por lo que puedo decir, según la documentación aquí: http://jqueryui.com/demos/tabs/#event-select, parece que no está lo inicializando del todo bien. Las demos indican que necesita un elemento principal envuelto <div>, con un elemento <ul> o posiblemente <ol> que representa las pestañas, y luego un elemento para cada página de pestañas (presumiblemente un <div> o <p>, posiblemente un <section> si estamos utilizando HTML5). A continuación, llama a $(). Tabs() en el elemento principal <div>, no en el elemento <ul>.

Después de eso, puede enlazar al evento tabsselect sin problema. Echa un vistazo a este violín, por ejemplo, básica:

http://jsfiddle.net/KE96S/

Answer 3

parece de la edad de la versión de jQuery UI no son compatibles seleccione caso más.

Este código funcionará con las nuevas versiones:

$('.selector').tabs({ 
        activate: function(event ,ui){ 
         //console.log(event); 
         console.log(ui.newTab.index()); 
        } 
}); 

Answer 4

Este post muestra un archivo HTML de trabajo completo como un ejemplo de activación de código que se ejecute cuando se hace clic en una ficha. El método .on() es ahora la forma en que jQuery sugiere que maneje eventos.

jQuery development history

para que algo suceda cuando el usuario hace clic en una pestaña puede hacerse dando el elemento de lista de un id.

<li id="list"> 

Luego refiérase a la identificación.

$("#list").on("click", function() { 
alert("Tab Clicked!"); 
}); 

Asegúrese de estar utilizando una versión actual de jQuery api. Tomando como referencia la API jQuery de Google, puede obtener el enlace aquí:

https://developers.google.com/speed/libraries/devguide#jquery

Aquí está una copia de trabajo completa de una página con fichas que activa una alerta cuando se hace clic en la pestaña horizontal 1.

<!-- This HTML doc is modified from an example by: --> 
<!-- http://keith-wood.name/uiTabs.html#tabs-nested --> 

<head> 
<meta charset="utf-8"> 
<title>TabDemo</title> 

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/south-street/jquery-ui.css"> 

<style> 
pre { 
clear: none; 
} 
div.showCode { 
margin-left: 8em; 
} 
.tabs { 
margin-top: 0.5em; 
} 
.ui-tabs { 
padding: 0.2em; 
background: url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top #F5F3E5; 
border-width: 1px; 
} 
.ui-tabs .ui-tabs-nav { 
padding-left: 0.2em; 
background: url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_gloss-wave_100_ece8da_500x100.png) repeat-x scroll 50% 50% #ECE8DA; 
border: 1px solid #D4CCB0; 
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
border-radius: 6px; 
} 
.ui-tabs-nav .ui-state-active { 
border-color: #D4CCB0; 
} 
.ui-tabs .ui-tabs-panel { 
background: transparent; 
border-width: 0px; 
} 
.ui-tabs-panel p { 
margin-top: 0em; 
} 
#minImage { 
margin-left: 6.5em; 
} 
#minImage img { 
padding: 2px; 
border: 2px solid #448844; 
vertical-align: bottom; 
} 

#tabs-nested > .ui-tabs-panel { 
padding: 0em; 
} 
#tabs-nested-left { 
position: relative; 
padding-left: 6.5em; 
} 
#tabs-nested-left .ui-tabs-nav { 
position: absolute; 
left: 0.25em; 
top: 0.25em; 
bottom: 0.25em; 
width: 6em; 
padding: 0.2em 0 0.2em 0.2em; 
} 
#tabs-nested-left .ui-tabs-nav li { 
right: 1px; 
width: 100%; 
border-right: none; 
border-bottom-width: 1px !important; 
-moz-border-radius: 4px 0px 0px 4px; 
-webkit-border-radius: 4px 0px 0px 4px; 
border-radius: 4px 0px 0px 4px; 
overflow: hidden; 
} 
#tabs-nested-left .ui-tabs-nav li.ui-tabs-selected, 
#tabs-nested-left .ui-tabs-nav li.ui-state-active { 
border-right: 1px solid transparent; 
} 
#tabs-nested-left .ui-tabs-nav li a { 
float: right; 
width: 100%; 
text-align: right; 
} 
#tabs-nested-left > div { 
height: 10em; 
overflow: auto; 
} 
</pre> 

</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> 

<script> 
    $(function() { 
    $('article.tabs').tabs(); 
    }); 
</script> 

</head> 
<body> 
<header role="banner"> 
    <h1>jQuery UI Tabs Styling</h1> 
</header> 

<section> 

<article id="tabs-nested" class="tabs"> 
<script> 
    $(document).ready(function(){ 
    $("#ForClick").on("click", function() { 
     alert("Tab Clicked!"); 
    }); 
    }); 
</script> 
<ul> 
    <li id="ForClick"><a href="#tabs-nested-1">First</a></li> 
    <li><a href="#tabs-nested-2">Second</a></li> 
    <li><a href="#tabs-nested-3">Third</a></li> 
</ul> 
<div id="tabs-nested-1"> 
    <article id="tabs-nested-left" class="tabs"> 
     <ul> 
      <li><a href="#tabs-nested-left-1">First</a></li> 
      <li><a href="#tabs-nested-left-2">Second</a></li> 
      <li><a href="#tabs-nested-left-3">Third</a></li> 
     </ul> 
     <div id="tabs-nested-left-1"> 
      <p>Nested tabs, horizontal then vertical.</p> 


<form action="/sign" method="post"> 
    <div><textarea name="content" rows="5" cols="100"></textarea></div> 
    <div><input type="submit" value="Sign Guestbook"></div> 
</form> 
     </div> 
     <div id="tabs-nested-left-2"> 
      <p>Nested Left Two</p> 
     </div> 
     <div id="tabs-nested-left-3"> 
      <p>Nested Left Three</p> 
     </div> 
    </article> 
</div> 
<div id="tabs-nested-2"> 
    <p>Tab Two Main</p> 
</div> 
<div id="tabs-nested-3"> 
    <p>Tab Three Main</p> 
</div> 
</article> 

</section> 

</body> 
</html> 

Answer 5

En versiones posteriores de JQuery han cambiado la función de seleccionar para activar. http://api.jqueryui.com/tabs/#event-activate

Answer 6

Simplemente:

$("#tabs_div").tabs(); 
$("#tabs_div").on("click", "a.tab_a", function(){ 
    console.log("selected tab id: " + $(this).attr("href")); 
    console.log("selected tab name: " + $(this).find("span").text()); 
}); 

Pero hay que agregar el nombre de la clase a sus anclajes con nombre "tab_a":

<div id="tabs"> 
<UL> 
    <LI><A class="tab_a" href="#fragment-1"><SPAN>Tab1</SPAN></A></LI> 
    <LI><A class="tab_a" href="#fragment-2"><SPAN>Tab2</SPAN></A></LI> 
    <LI><A class="tab_a" href="#fragment-3"><SPAN>Tab3</SPAN></A></LI> 
    <LI><A class="tab_a" href="#fragment-4"><SPAN>Tab4</SPAN></A></LI> 
</UL> 

<DIV id=fragment-1> 
<UL> 
    <LI><A class="tab_a" href="#fragment-1a"><SPAN>Sub-Tab1</SPAN></A></LI> 
    <LI><A class="tab_a" href="#fragment-1b"><SPAN>Sub-Tab2</SPAN></A></LI> 
    <LI><A class="tab_a" href="#fragment-1c"><SPAN>Sub-Tab3</SPAN></A></LI> 
</UL> 
</DIV> 
. 
. 
</DIV> 

Answer 7

Sólo tiene que utilizar en el evento click de pestaña se muestra.

$(document).on('shown.bs.tab', 'a[href="#tab"]', function(){ 
});