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

我该如何编写函数？

2 个答案: