положить аккордеон пользовательского интерфейса jQuery в диалог пользовательского интерфейса jQuery

Question

Создав соответствующую разметку для вкладок, я смог разместить виджет вкладок jQuery UI внутри диалогового окна jQuery UI; но сделать то же самое с Аккордеоном не получилось: щелкнув на якорь секции аккордеона, Диалог закрывается. Есть ли простой способ сделать это?

Answer 1

Работает нормально для меня ... Я разместил демо для вас.

Может быть, вам нужно было использовать опцию "открыть" в функции диалога?

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

Примечание. Для вкладок это одно и то же: добавьте вызов функции внутри опции открытия.

Answer 2

Вы можете создать div для диалога и div внутри него для аккордеона.

Фрагмент 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:

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

});

Смотрите скрипку здесь: http://jsfiddle.net/saylesc/RDwUj/2/