2010-02-10 13 views
11

Ho un menu semplice in una pagina Web, basato sulla jQuery Accordion. Ho semplificato il codice in qualche modo, e sembra questo;jQuery Accordion - Necessità dell'indice della parte di contenuto attualmente selezionata

<div id="menu_div" class="nt-tab-outer nt-width-150px"> 

<h3 class="nt-tab-title"><a href="#">Menu A</a></h3> 
<div id="menu_1_div"> 
    <a href="itemA1">Item A1</a><br /> 
    <a href="itemA2">Item A2</a><br /> 
</div> 

<h3 class="nt-tab-title"><a href="#">Menu B</a></h3> 
<div id="menu_2_div"> 
    <a href="fTabsDyn">Item B1</a><br /> 
    <a href="fPlainDyn">Item B2</a><br /> 
</div> 

</div> 

<script type="text/javascript"> 
jQuery(function() { 
jQuery("#menu_div").accordion({ 
    active: 1, 
    change: function(event, ui) { 
     alert('bob'); 
    }}) 
}); 

</script> 

Questo imposta la "parte" 2 ° della fisarmonica aperto quando la pagina si apre. (attivo: 1) e se si fa clic su una delle intestazioni viene visualizzato un semplice avviso "bob". Fin qui tutto bene.

Ora mi piacerebbe sostituire "bob" con l'indice dell'intestazione. Quindi la versione "letta" di "attivo". cioè, quando viene cliccata la prima intestazione della fisarmonica ottengo 0, e se si fa clic sulla seconda intestazione ottengo un 1.

(A parte, ovviamente non voglio davvero fare una segnalazione, voglio fare un Chiamata Ajax al server con il valore, in modo che il server sappia quale menu è aperto sul client. Quella parte che posso fare, ma sto cercando di ottenere il giusto valore da inviare. Se l'indice non è disponibile, sentiti libero di offrire suggerimenti alternativi).

Grazie!

risposta

18

legge di Google di Bruce - non importa quanto tempo si lotta per, 1 minuto dopo pubblicare la tua domanda Google potrà finalmente offrire la risposta.

function(event, ui) { 
    var index = jQuery(this).find("h3").index(ui.newHeader[0]); 
    alert('bob ' + index); 
    }})}); 

Oh bene, forse questo aiuterà qualcun altro lungo la strada.

22

Dalla documentazione UI jQuery come disponibili al JQuery UI web site:

//getter 
var active = $('.selector').accordion('option', 'active'); 

o nel tuo caso

var active = jQuery("#menu_div").accordion('option', 'active'); 
+0

Hi Lazzaro - sì che è quello che ho pensato troppo, ma restituisce sempre 1. – Bruce

+0

@Lazarus: Grazie. Questo è quello che stavo cercando, "var = attiva jQuery (" # menu_div ") accordion ('option', 'attiva');". ha funzionato per me con jQuery - v3.2.1 e jQuery UI - v1.12.1. – Indrabhushan

7

È possibile ottenere l'indice attiva utilizzando

ui.options.active 
+0

Questo è un gioiello ... –

+1

ui.options attualmente deprecato (jQuery UI 1.10) –

0
activate: function(event, ui) 

si prega di fare uso di acti metodo di vate invece di cambiare. Funziona bene per me.

0

provare questo: necessario il nome della fisarmonica questo è quello che ho fatto. dovrebbe funzionare per quanto sopra html. spero che sia d'aiuto. una soluzione migliore è dare un ID all'intestazione della fisarmonica e scaricarlo direttamente.

$("#accordion1").accordion({ 
     heightStyle: "fill", 
     activate: function(event, ui) { 
      var name = ui.newHeader[0].childNodes[1].innerHTML; 
      console.log(name); 
     } 
    }); 
Problemi correlati