poner un Acordeón de IU de jQuery en un diálogo de IU de jQuery

Question

Al crear el marcado adecuado para Pestañas, he podido colocar un widget jQuery UI Tabs dentro de un cuadro de diálogo de jQuery UI; pero hacer lo mismo con un acordeón no ha funcionado: al hacer clic en el ancla de la sección de acordeón, se cierra el cuadro de diálogo. ¿Hay una manera directa de lograr esto?

Answer 1

Funciona bien para mí ... He publicado a demo para usted.

¿Quizás necesitó usar la opción "abrir" en la función de diálogo?

$(function() { 
    $("#dialog-modal").dialog({ 
     height: 400, 
     width: 400, 
     modal: true, 
     open: function(){ 
     $("#accordion").accordion({ autoHeight: true }); 
     } 
    }); 
    }); 

Nota: Para las pestañas, que es básicamente la misma cosa, añadir la llamada de función dentro de la opción abierta.

Answer 2

Puede crear un div para el cuadro de diálogo y un div dentro del del acordeón.

de fragmentos de HTML:

<button id='clicker>Click Me</button> 
<div id='dialog'> 
    <div id='accordion'> 
     <h3>Section 1</h3><div><p>Sec 1 Fun</p></div> 
     <h3>Section 2</h3><div><p>Sec 2 Fun</p></div> 
    </div> 
</div> 

JavaScript Fragmento:

$('#clicker').button().click(function(){ 
    var overlayDialogObj = { 
     autoOpen: true, 
     height: 400, 
     width: 310, 
     modal: false, 
     open: function(){ 
      $('#accordion').accordion(
       {heightStyle: "fill", collapsible: true}).show(); 
     }, 
     buttons: { 
     'Done': function() { 
      $(this).dialog('close'); 
     } 
     } 
    }; 

    $('#dialog').dialog(overlayDialogObj).show(); 

}); 

Ver el violín aquí: http://jsfiddle.net/saylesc/RDwUj/2/