結合用於警報和確認（DRY）的jQuery UI對話框代碼？

我有下面的代碼來顯示只有'確定'按鈕的警報對話框和'取消'和'確定（提交）'按鈕的確認對話框。結合用於警報和確認（DRY）的jQuery UI對話框代碼？

正如你可以看到有很多重複的代碼，我想知道是否有這樣寫的方式，以儘可能少的代碼重複（不止一次寫入）？

我正在學習jQuery很快，但在如何更好地寫這篇文章時陷入困境？任何幫助或例子將非常感激？非常感謝您

外部JS：

function alert() { 
    var id = $('#dialog-alert'); 
    id.dialog({ 
     autoOpen: false, 
     dialogClass: 'ui-alert', 
     resizable: false, 
     modal: true, 
     width: 450, 
     buttons: [{ 
      'text': 'OK', 
      'class': 'btn btn-green', 
      'click': function() { $(this).dialog('close'); } 
     }] 
    }).dialog('open'); 
    $('.ui-dialog :button').blur(); 
}; 

function confirm() { 
    var id = $('#dialog-confirm'); 
    id.dialog({ 
     autoOpen: false, 
     dialogClass: 'ui-alert', 
     resizable: false, 
     modal: true, 
     width: 450, 
     buttons: [{ 
      'text': 'Cancel', 
      'class': 'btn btn-red', 
      'click': function() { $(this).dialog('close'); } 
     }, 
     { 
      'text': 'OK', 
      'class': 'btn btn-green', 
      'click': function() { $('#completeform').submit(); } 
     }] 
    }).dialog('open'); 
    $('.ui-dialog :button').blur(); 
};

來源

2013-03-13 AndyD

「有沒有更好的辦法」是不是一個好的計算器問題。我建議閱讀常見問題。 – 2013-03-13 16:40:31

你所追求的是「重構」。編寫一個可以完成上述操作的函數，但是這個函數需要不同的位參數。然後你的其他兩個函數就成爲這個函數的調用。 – Alnitak 2013-03-13 16:44:14

謝謝@Alnitak！你讓我找到正確的道路來尋找答案。 – AndyD 2013-03-14 10:46:15

我得到了我想要的哪裏是什麼，這要歸功於從@Alnitak一些幫助。我想要一個可以調用對話框的功能，以及它是警報還是確認，顯示一個或兩個按鈕。我的解決方案適用於任何正在尋找類似事物的人。參數和條件語句的組合。

function dialog(id, btns) { 
    var buttons = [{ 
     'text': 'OK', 
     'class': 'btn btn-green', 
     'click': function() { $(this).dialog('close'); } 
    }] 

    if (btns === confirm) { 
     buttons = [{ 
      'text': 'Cancel', 
      'class': 'btn btn-red', 
      'click': function() { $(this).dialog('close'); } 
     }, { 
      'text': 'OK', 
      'class': 'btn btn-green', 
      'click': function() { $('#completeform').submit(); } 
     }] 
    }; 
    $('#dialog-' + id).dialog({ 
     autoOpen: false, 
     dialogClass: 'ui-alert', 
     resizable: false, 
     modal: true, 
     width: 450, 
     buttons: buttons 
    }).dialog('open'); 
    $('.ui-dialog :button').blur(); 
};

在HTML頁面：

$(function() { dialog('alert', alert); }); 
// or 
$(function() { dialog('confirm', confirm); });

來源

2013-03-14 10:52:52 AndyD

結合用於警報和確認（DRY）的jQuery UI對話框代碼？

回答

相關問題