Управление вкладками Управление внутренним диалоговым окном

Question

Я пытаюсь вставить виджет jQuery UI в виджет диалогового окна, но он не работает для меня. У меня есть куча данных, которые извлекаются из базы данных и отображаются на экране. Когда пользователь нажимает кнопку (+), открывается диалоговое окно с содержимым его содержимого. По какой-то причине это не работает. Вот мой код:

HTML-структура выглядит следующим образом:

<div id="tabs-{index}"> 
<ul> 
<li><a href="#some-id-{index}">title1</a></li> 
<li><a href="#another-id-{index}">title2</a></li> 
</ul> 

<div id="some-id-{index}>content</div> 
<div id="another-id-{index}">content</div> 
</div> 

А вот мой JQuery код:

$('#disease-read-more-dialog').dialog({ 
     dialogClass: 'disease-read-more', 
     autoOpen: false, 
     modal: false, 
     draggable: false, 
     width: '500px', 
     open: function() { 
      $('#ui-dialog-title-disease-read-more-dialog').html($('#disease-read-more-dialog').attr('title')); 
      var content = $('#disease-read-more-dialog').find('.hidden-disease-info').first(); 
      if (content.length > 0) { 
       var index = content.data('index'); 
       var selector = '#read-more-tabs-' + index; 
       $(selector).tabs(); 
      } 
     } 
    }); 

Обратите внимание, что индекс используется просто потому, что я имею выход все данные на экране загрузки страницы, а не на запрос AJAX (поскольку объем данных относительно невелик), а затем, когда пользователь нажимает на (+), я загружаю содержимое HTML в диалог. Следовательно, индекс используется для предотвращения испорчения идентификатора тега.

UPDATE:

Это не работает, как при вызове $(selector).tabs() не делать то, что он должен делать. Так что на самом деле получается рендеринг - это не упорядоченный список, а не элемент управления вкладками.

Любые мысли, почему это не работает?

Answer 1

Комплексное решение для отображения вкладок виджет внутри диалогового виджета с помощью JQuery UI, как показано ниже:

HTML:

<div id="dialgue" title="Tabs with Dialogue"> 
    <div id="tabs"> 
     <ul> 
     <li> 
     <a href="#tabs-1"> 
      Tab-1 
     </a> 
     </li> 
     <li> 
     <a href="#tabs-2"> 
      Tab-2 
     </a> 
     </li> 
     <li> 
     <a href="#tabs-3"> 
      Tab-3 
     </a> 
     </li> 
    </ul> 
    <div id="tabs-1"> 
     <p> 
     Contents of Tab-1 has been displayed here...! 
     </p> 
    </div> 
    <div id="tabs-2"> 
     <p> 
     Contents of Tab-2 has been displayed here...! 
     </p> 
    </div> 
    <div id="tabs-3"> 
     <p> 
     Contents of Tab-3 has been displayed here...! 
     </p> 
    </div> 
    </div> 
    </div> 
<input type="button" id="btndialogue" value="Show Dialogue with Tabs" /> 

CSS:

.ui-widget{ 
    font-size:14px !important; 
} 
.ui-dialog-title{ 
    font-weight:bold; 
} 
.ui-tabs .ui-tabs-nav{ 
    font-size:13px; 
} 
.ui-tabs-panel{ 
    font-size:12px; 
} 

JQuery:

$(function() { 
    $("#dialgue").dialog({ 
     autoOpen: false, 
     modal: false, 
     draggable: false, 
     title: 'Tabs with Dialogue', 
     show: 'slide', 
     hide: 'slide', 
     width: '500', 
     open: function(event, ui) { 
      $("#tabs").tabs(); 
     } 
    }); 
    $("#btndialogue").click(function() { 
     $("#dialgue").dialog('open'); 
    }); 
}); 

Примечание. Перед выполнением теста/запуска над сценарием необходимо включить последние файлы jquery.js, jquery-ui.js и jquery-ui.css.

Я создал ящик с раствором на http://codebins.com/codes/home/4ldqpbx