대화 상자 컨트롤 내에서 탭 컨트롤

Question

대화 상자 위젯에 탭 jQuery UI 위젯을 고정하려고하지만 작동하지 않습니다. 데이터를 데이터베이스에서 가져 와서 화면에 렌더링하고 있습니다. 사용자가 (+) 버튼을 클릭하면 내용이 탭으로 표시된 대화 상자가 열립니다. 어떤 이유로이 작동하지 않습니다.

<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 코드입니다 :

이

HTML 구조는 다음과 같다 :

이

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