設置幾個jQuery的對話框

Question

在我的索引視圖我有一個創建和打開模板鏈接：

@Html.ActionLink("Create Template", "JsonCreate", "Template", new { id = "CreateTemplate" }) 
@Html.ActionLink("Open Template", "JsonOpen", "Template", new { id = "OpenTemplate" }) 

<script type="text/javascript"> 

    $(function() { 
     $('#dialog').dialog({ 
      autoOpen: false, 
      width: 300, 
      resizable: false, 
      title: 'Create Template', 
      hide: "fade",   
      show: "fade", 
      modal: true, 
      open: function(event, ui) {    
       $(this).load("@Url.Action("Create")"); 
      }, 
      buttons: { 
      "Save": function() {      
         var form = $('form', this); 
         $(form).submit(); 
        }, 
       "Close": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

     $('#OpenTemplate').click(function() 
     { 
      $('#dialog').dialog('open'); 
      return false; 
     }); 

     $('#CreateTemplate').click(function() 
     { 
      $('#dialog').dialog('open'); 
      return false; 
     }); 
    }); 

</script> 

對於打開模板鏈接我想一個相當不同的對話框：

• 其他按鈕
• 其他尺寸
• 等稱號
• 等...

我有什麼需要改變的是，我的開放模板鏈接可以使用相同的對話框div「#dialog」打開它自己的對話框？

Answer 1

我試過重複使用多個不同對話框的單個div，我強烈建議只創建一個新的div和一個新的ui.dialog實例。它在body標籤的底部添加了額外的html，但這是一個很小的代價，可以清楚地分離javascript代碼。如果你需要不同的HTML裏面的對話框div，那麼絕對沒有理由不要使用兩個完全獨立的div。這樣做會爲你節省大量時間和精神上的痛苦。

如果您選擇不聽這個建議，我會建議創建兩個配置對象並關閉對話框實例。像這樣：

$(function() { 
    var baseConfig = { 
     autoOpen: false, 
     resizable: false, 
     hide: "fade", 
     show: "fade", 
     modal: true, 
     close: function(event, ui) { 
      $(this).dialog('destroy'); 
     }, 
     buttons: { 
      "Save": function() { 
       var form = $('form', this); 
       $(form).submit(); 
      }, 
      "Close": function() { 
       $(this).dialog("close"); 
      } 
     } 
    } 
    var createConfig = { 
     width: 300, 
     title: 'Create Template', 
     open: function(event, ui) {    
      $(this).load("@Url.Action("Create")"); 
     } 
    } 
    var openConfig = { 
     width: 500, 
     title: 'Open Template', 
     open: function(event, ui) {    
      $(this).load("@Url.Action("Open")"); 
     } 
    } 

    $('#OpenTemplate').click(function() 
    { 
     var config = $.extend(baseConfig, openConfig); 
     $('#dialog').dialog(config); 
     return false; 
    }); 

    $('#CreateTemplate').click(function() 
    { 
     var config = $.extend(baseConfig, createConfig); 
     $('#dialog').dialog(createConfig); 
     return false; 
    }); 
}); 

這只是一個解決方案。在沒有破壞對話的情況下，可能有其他方法可以做到這一點，但是當我說這會更清潔時，請相信我。同樣，這個div重用解決方案假設div 中的HTML根本不會改變。