jquery - test - sistema de votacion en php y mysql
jQuery-pestaña de captura selecciona evento (7)
Soy un novato de jQuery y estoy intentando descubrir cómo atrapar el evento seleccionado de 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. Así es como inicié las pestañas
$(function() {
$(''#tabs ul'').tabs();
});
$(document).ready(function(){
$(''#tabs ul'').tabs(''select'', 0);
});
No soy capaz de descifrar cómo atrapar cualquiera de los eventos o propiedades (pestaña seleccionada, cuando se hace clic en la pestaña, etc.). Agradecería cualquier ayuda en esto ...
Intenté cosas como:
$(''#tabs ul'').bind(''tabsselect'', function(event, ui) {
selectedTab = ui.index;
alert(''selectedTab : '' + selectedTab);
});
(OR)
$(''#tabs'').bind(''tabsselect'', function(event, ui) {
sin éxito
Debajo está 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>
El método correcto para capturar el evento de selección de pestañas es establecer una función como el valor para la opción de select al inicializar las pestañas (también puede establecerlas dinámicamente después), como sigue:
$(''#tabs, #fragment-1'').tabs({
select: function(event, ui){
// Do stuff here
}
});
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 (¿creo?). Algunas cosas obviamente cambiaron desde entonces. No había un objeto ui separado que estuviera separado del objeto de event original. El código se ve 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);
}
});
Uf. 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/
En versiones posteriores de JQuery han cambiado la función de seleccionar para activar. http://api.jqueryui.com/tabs/#event-activate
Esta publicación muestra un archivo HTML de trabajo completo como un ejemplo de código de activación para ejecutar cuando se hace clic en una pestaña. El método .on () es ahora la forma en que jQuery sugiere que maneje eventos.
jQuery historial de desarrollo
Para hacer que algo suceda cuando el usuario hace clic en una pestaña se puede hacer dando al elemento de la lista una identificación.
<li id="list">
Luego refiriéndose a la identificación.
$("#list").on("click", function() {
alert("Tab Clicked!");
});
Asegúrese de estar utilizando una versión actual de la API jQuery. Si hace referencia a la API jQuery de Google, puede obtener el enlace aquí:
https://developers.google.com/speed/libraries/devguide#jquery
Aquí hay una copia de trabajo completa de una página con pestañas 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>
Por lo que puedo decir, según la documentación aquí: http://jqueryui.com/demos/tabs/#event-select , parece como si no estuvieras inicializándote del todo bien. Las demostraciones indican que necesita un elemento <div> envuelto principal, con un elemento <ul> o posiblemente <ol> que represente las pestañas, y luego un elemento para cada página de pestañas (presumiblemente a <div> o <p> , posiblemente un <section> si estamos usando HTML5). Luego llama a $ (). Tabs () en el elemento <div> principal, no en el elemento <ul> .
Después de eso, puede enlazar al evento tabsselect sin problema. Mira este violín para ver un ejemplo básico y básico:
Simplemente use el evento de hacer clic para la pestaña que se muestra.
$(document).on(''shown.bs.tab'', ''a[href="#tab"]'', function (){
});
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 debe agregar el nombre de clase a sus anclajes llamado "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>
parece que la versión anterior de jquery ui ya no es compatible con el evento select.
Este código funcionará con nuevas versiones:
$(''.selector'').tabs({
activate: function(event ,ui){
//console.log(event);
console.log(ui.newTab.index());
}
});