2010-02-10 29 views
11

Tengo un menú simple en una página web, basado en jQuery Accordion. He simplificado un poco el código, y se ve así;jQuery Accordion - Necesita índice del contenido seleccionado actualmente parte

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

Esto establece la segunda "parte" del acordeón abierta cuando se abre la página. (activo: 1) y si se hace clic en alguno de los encabezados aparece una alerta simple "bob". Hasta aquí todo bien.

Ahora me gustaría reemplazar "bob" con el índice del encabezado. Entonces, la versión de "lectura" de "activo". es decir, cuando se hace clic en el primer encabezado del acordeón, obtengo 0, y si se hace clic en el segundo encabezado obtengo un 1.

(Aparte, por supuesto, no quiero hacer una alerta, quiero hacer una Ajax llama al servidor con el valor, para que el servidor sepa qué menú está abierto en el cliente. Esa parte puedo hacer, pero estoy luchando por obtener el valor correcto para enviar. Si el índice no está disponible, entonces siéntase libre de hacerlo. ofrecer sugerencias alternativas).

Gracias!

Respuesta

18

Ley Google de Bruce: no importa cuánto tiempo tarde en luchar, 1 minuto después de publicar tu pregunta Google finalmente ofrecerá la respuesta.

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

Bueno, quizás esto ayude a alguien más en el futuro.

22

De la documentación interfaz de usuario jQuery como disponibles en el JQuery UI web site:

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

o en su caso

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

Hola Lazarus - sí, eso es lo que yo también pensaba, pero siempre devuelve 1. – Bruce

+0

@Lazarus: Gracias. Esto es lo que estaba buscando, "var active = jQuery (" # menu_div "). Accordion ('option', 'active');" funcionó para mí con jQuery - v3.2.1 y jQuery UI - v1.12.1. – Indrabhushan

7

Usted puede obtener el índice activo mediante el uso de

ui.options.active 
+0

Esta es una gema ... –

+1

ui.opciones actualmente en desuso (jQuery UI 1.10) –

0
activate: function(event, ui) 

por favor haga uso de acti método vate en lugar de cambio. Funciona bien para mí.

0

prueba esto: necesito el nombre del acordeón esto es lo que hice. debería funcionar para el html anterior. Espero eso ayude. Una mejor solución es dar una identificación al encabezado del acordeón y buscarlo directamente.

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