對話框控件內部的選項卡控件

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內容加載到對話框中。因此，該索引用於防止弄亂標籤ID。

UPDATE：

它不會在調用$(selector).tabs()沒有做什麼是應該做的工作。所以實際得到的是一個無序列表，而不是一個製表符控件。

任何想法爲什麼這不工作？

Answer 1

使用jQuery用戶界面如下對話窗口小部件的內部部件顯示選項卡上的完整的解決方案：

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文件。

我已經創建了一個bin的解決方案http://codebins.com/codes/home/4ldqpbx