2013-08-17 5 views
2

여러 개의 탭이있는 jQuery UI 대화 상자가 있는데 때로는이 탭 중 하나를 별도의 대화 상자 (탭이있는 초기 대화 상자의 꼭대기)로 팝업해야하므로이 작업을 수행 할 수 있습니까 같은 대화 상자를 다시 사용하여?동일한 jQuery UI 대화 상자의 여러 인스턴스 호출하기

는 (비트 런타임 지정과 물론 JavaScript/DOM HTML 조작,하지만 동일한 <div></div> 템플릿을 처음 정의하고, 동일한 HTML FORM 요소 ID를 가진)

답변

0

이 최적의 솔루션 아니지만 수 있었다 무엇을해야하는지에 대한 접근법.

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/

제가 무엇을했는지를 설명하자

  1. 순수한 HTML로 대화 상자를 만들고 JQueryUI를 사용하여 dialog 동작을 할당합니다.
  2. 모든 버튼에는 나중에 어떤 탭을 열어야하는지 나중에 알려주는 속성이 있습니다.
  3. 사용자가 버튼을 클릭하면 이전 대화 상자를 복제하고 본문에 추가하고 "탭"속성을 가져옵니다. 그런 다음 dialog 동작에 autoOpen을 지정하지 않고 close 이벤트와 관련된 기능을 사용하여 DOM에서 제거합니다 (HTML 본문에서 여러 대화 상자가 표시되지 않도록).
  4. 오픈하기 전에 최근에 만든 대화 상자의 내용 (find 기능을 사용하고있는 것처럼 보임)의 모든 내용에 tabs 동작을 할당하고 tab 속성을 사용하여 올바른 탭을 활성 탭으로 설정했습니다.
  5. 이제 모든 대화 상자를 열어 대화 상자를 열 준비가되었습니다.

반복 : 이것은 최적의 솔루션은 아니지만 나중에 개발 반복의 프로토 타입으로 작동해야합니다.

해피 코딩!