如何編寫函數？

Question

我想將2個參數添加到對話框函數。第一個參數應該是框標題，第二個參數應該是框內容。我想調用這個函數，並設置框的標題和正文內容。

這裏是想我的功能包括：

var $dialog = $('<div></div>') 
.html('This dialog will show every time!') 
.dialog({ 
    height : 140, 
    modal : true, 
    autoOpen : false, 
    title : 'Basic Dialog' 
}); 

目前這打開的對話框中。

$dialog.dialog('open'); 

Answer 1

這是你的功能：

function createDialog(title, content) 
{ 
    return $('<div></div>') 
     .html(content || 'Defualt content.') 
     .dialog({ 
      height : 140, 
      modal : true, 
      autoOpen : false, 
      title : title || 'Defualt title' 
     }); 
} 

---

然後，您可以調用該函數是這樣的：

$dialog = createDialog('Basic Dialog', 'This dialog will show every time!'); 

，然後用$dialog.dialog('open')打開它，你有，或者你可以立即打開：

createDialog('Basic Dialog', 'This dialog will show every time!').dialog('open'); 

---

正如@LordZardeck指出的那樣，上述解決方案將導致太多的零散DOM節點。你最好重複使用同一個對話框（假設你一次只需要一個對話框是否安全？我當然希望如此！）。

如果你想保持你的DOM有點理智的，試試這個：

var createDialog = (function($) 
{ 
    var $dialog = $('<div></div>').dialog({ 
      height : 140, 
      modal : true, 
      autoOpen : false 
     }), 
     $content = $dialog.find('.dialog-content'); 

    return function (title, content) 
    { 
     $content.html(content || 'Default content.'); 

     return $dialog.dialog('option', { 
        title : title || 'Defualt title' 
       }); 
    } 
}) 
(jQuery); 

用法是一樣的與上面的一個。

Answer 2

我有一個自定義提醒，我認爲它的效果很好。這樣做的一個原因是它在關閉時從對象身上刪除了對話框，確保你不會用一堆不會再次使用的對話框填滿你的dom：

function showMessage(m, t) 
{ 
    t = (t)? t : 'Application Message'; 
    return $('<div>').css({'text-align': 'left', 'padding-top': '10px'}).html(m).dialog({ 
      modal: true, 
      width: '400px', 
      height: 140, 
      title: t, 
      autoOpen: false, 
      close: function(){$(this).dialog('destroy');}, 
      buttons: { Ok: function() { $(this).dialog("close"); } } 
    }); 
};