jQuery - scheda di intercettazione seleziona evento

Question

Sono un jobiesco noob e sto cercando di capire come intercettare l'evento selezionato nella scheda. Utilizzo di jQuery 1.2.3 e corrispondenti schede dell'interfaccia utente jQuery (non è la mia scelta e non ho alcun controllo su di esso). È una scheda annidata con il nome div di primo livello - schede. Questo è come mi inizializzato le linguette

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

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

io non sono in grado di capire come intercettare uno degli eventi o proprietà (scheda selezionata, quando scheda cliccato, ecc). Apprezzerebbe qualsiasi aiuto su questo ...

ho provato cose come:

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

       (OR) 

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

senza successo.

riportano di seguito le markup

<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

Il metodo corretto per l'acquisizione di evento di selezione scheda è quella di impostare una funzione come valore per l'opzione select durante l'inizializzazione delle schede (è possibile anche impostare dinamicamente in seguito), come così:

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

si può vedere il codice vero e proprio in azione qui: http://jsfiddle.net/mZLDk/

---

Modifica: Con il collegamento che mi hai dato, ho creato un ambiente di test per jQuery 1.2.3 con jQuery UI 1.5 (penso?). Alcune cose ovviamente sono cambiate da allora. Non c'era un oggetto separato ui che era separato dall'oggetto originale event. Il codice è simile al seguente:

// 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. Se c'è qualcosa da imparare qui, è che il codice legacy di supporto è difficile. Vedere il jsfiddle per ulteriori informazioni: http://jsfiddle.net/qCfnL/1/

Answer 2

Da quello che posso dire, per la documentazione qui: http://jqueryui.com/demos/tabs/#event-select, sembra che non lo si inizializzi correttamente. Le demo dimostrano che hai bisogno di un elemento <div> impacchettato principale, con un elemento <ul> o forse che rappresenta le schede e quindi un elemento per ogni scheda (presumibile un <div> o <p>, possibilmente un <section> se utilizziamo HTML5). Quindi chiami $(). Tabs() sul numero principale, non sull'elemento <ul>.

Successivamente, è possibile eseguire il binding all'evento tabselect senza problemi. Dai un'occhiata a questo violino per base, esempio di base:

http://jsfiddle.net/KE96S/

Answer 3

sembra di versione del vecchio di jQuery UI non supportano più Seleziona evento.

Questo codice funzionerà con le nuove versioni:

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

Answer 4

Questo post mostra un file HTML completo di lavoro come esempio di innescare il codice da eseguire quando una scheda viene cliccato. Il metodo .on() è ora il modo in cui jQuery suggerisce di gestire gli eventi.

jQuery development history

di fare qualcosa accada quando l'utente fa clic su una linguetta può essere fatto dando l'elemento della lista un id.

<li id="list"> 

Quindi fare riferimento all'id.

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

Assicurarsi di utilizzare una versione corrente di jQuery api. Riferimento API jQuery da Google, è possibile ottenere il link qui:

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

Ecco una copia completa di una pagina a schede che attiva un avviso quando la tabulazione orizzontale 1 si fa clic di lavoro.

<!-- 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

Nelle versioni successive di JQuery hanno cambiato la funzione da selezionare per attivare. http://api.jqueryui.com/tabs/#event-activate

Answer 6

Semplicemente:

$("#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()); 
}); 

Ma bisogna aggiungere il nome di classe per i vostri ancoraggi con nome "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

sufficiente utilizzare il sull'evento clicca per scheda mostrata.

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