Ein jQuery-UI-Akkordeon in ein jQuery-UI-Dialogfeld einfügen

Question

Durch Erstellen der entsprechenden Markierung für Tabs konnte ich ein jQuery UI Tabs-Widget in einem jQuery UI-Dialogfeld platzieren. aber das gleiche mit einem Akkordeon zu tun, hat nicht funktioniert: Durch Klicken auf den Anker des Akkordeonbereichs wird der Dialog geschlossen. Gibt es einen einfachen Weg, dies zu erreichen?

Answer 1

Funktioniert gut für mich ... Ich postete a demo für Sie.

Vielleicht mussten Sie die Option "Öffnen" in der Dialogfunktion verwenden?

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

Hinweis: Registerkarten, es ist im Grunde das gleiche, den Funktionsaufruf in die offene Option hinzufügen.

Answer 2

Sie können ein div für den Dialog und ein div innerhalb des Akkordeons erstellen.

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(); 

}); 

die Geige Siehe hier: http://jsfiddle.net/saylesc/RDwUj/2/