如何编写函数？

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"); } } 
    }); 
};