mettere una fisarmonica dell'interfaccia utente jQuery in una finestra di dialogo dell'interfaccia utente jQuery

Question

Creando il markup appropriato per le schede, sono riuscito a posizionare un widget di schede dell'interfaccia utente jQuery all'interno di una finestra di dialogo dell'interfaccia utente jQuery; ma fare lo stesso con una fisarmonica non ha funzionato: cliccando sull'ancora della sezione fisarmonica si chiude la finestra di dialogo. C'è un modo semplice per realizzare questo?

Answer 1

Funziona bene per me ... Ho inviato a demo per voi.

Forse è necessario utilizzare l'opzione "Apri" nella funzione di dialogo?

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

Nota: per le schede, è fondamentalmente la stessa cosa, aggiungere la chiamata di funzione all'interno della opzione aperta.

Answer 2

È possibile creare un div per la finestra di dialogo e un div all'interno di quello per la fisarmonica.

HTML Snippet:

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

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

}); 

Vedere il violino qui: http://jsfiddle.net/saylesc/RDwUj/2/