이 최적의 솔루션 아니지만 수 있었다 무엇을해야하는지에 대한 접근법.
HTML :
<div id="dialog" title="Basic dialog">
<div class="dtabs">
<ul>
<li><a href="#tab1">First</a>
</li>
<li><a href="#tab2">Second</a>
</li>
<li><a href="#tab3">Third</a>
</li>
</ul>
<div id="tab1">
<p>First!</p>
</div>
<div id="tab2">
<p>Second!</p>
</div>
<div id="tab3">
<p>Third!</p>
</div>
</div>
</div>
<input value="Tab 1 on Dialog" type="button" alt="1" />
<input value="Tab 2 on Dialog" type="button" alt="2" />
<input value="Tab 3 on Dialog" type="button" alt="3" />
자바 스크립트 :
$(function() {
// Dialog without autoOpen just to hide it from viewport
$('#dialog').dialog({
autoOpen: false
});
$('input').click(function() {
// Clone the dialog and append it to body
// Get "tab" number to know which tab should I set as active later
var d = $('#dialog').clone().appendTo('body'),
tab = $(this).attr('alt')-1;
// Assign "dialog" behaviour and remove it when I close it
d.dialog({
autoOpen: false,
close: function (e, ui) {
$(this).dialog('destroy').remove();
}
});
// Tabs inside my dialog has "tabs" behaviour by JQueryUI
d.find('.dtabs').tabs({
active: tab
});
// Open up!
d.dialog('open');
});
});
http://jsfiddle.net/franverona/k7cuH/
제가 무엇을했는지를 설명하자
- 순수한 HTML로 대화 상자를 만들고 JQueryUI를 사용하여
dialog
동작을 할당합니다.
- 모든 버튼에는 나중에 어떤 탭을 열어야하는지 나중에 알려주는 속성이 있습니다.
- 사용자가 버튼을 클릭하면 이전 대화 상자를 복제하고 본문에 추가하고 "탭"속성을 가져옵니다. 그런 다음
dialog
동작에 autoOpen을 지정하지 않고 close
이벤트와 관련된 기능을 사용하여 DOM에서 제거합니다 (HTML 본문에서 여러 대화 상자가 표시되지 않도록).
- 오픈하기 전에 최근에 만든 대화 상자의 내용 (
find
기능을 사용하고있는 것처럼 보임)의 모든 내용에 tabs
동작을 할당하고 tab
속성을 사용하여 올바른 탭을 활성 탭으로 설정했습니다.
- 이제 모든 대화 상자를 열어 대화 상자를 열 준비가되었습니다.
반복 : 이것은 최적의 솔루션은 아니지만 나중에 개발 반복의 프로토 타입으로 작동해야합니다.
해피 코딩!