調用同一個jQuery UI對話框的多個實例

Question

我有一個jQuery UI對話框有幾個選項卡，有時我需要彈出其中一個選項卡作爲單獨的對話框（在選項卡式初始對話框的頂部），所以，我可以實現這一點通過重新使用相同的對話框？

（當然與位運行時間自定義的，JavaScript/DOM HTML操作，但具有相同的<div></div>模板最初定義和相同的HTML FORM元件ID）的

Answer 1

這不是最佳的解決方案，但也可以是你應該做什麼的方法。

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" /> 

的Javascript：

$(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. 在打開之前，我將tabs行爲分配給我最近創建的對話框中的所有內容（看起來我正在使用find函數），並使用之前檢索的tab屬性將活動選項卡設置爲正確選項卡。
5. 現在我準備打開我的對話框，設置所有。

我再說一遍：這不是一個最佳解決方案，但應該作爲以後開發迭代的原型。

快樂編碼！