jquery - 动态定义选项

Question

所以只是为了描述我正在尝试做的事情：我正在尝试创建一种简单的方法来创建模式消息。尝试减少代码重复（我不想为所有内容创建对话框）。因此，希望我能够定义模态的标题、内容和按钮，然后调用函数（doModal()）。

由于某种原因，下面的代码没有正确传递按钮（没有显示按钮）。如果我简单地用这个替换modal.buttons：

{
                thisone: function(){
                    alert('you clicked this one');
                }
            }

那么它就会起作用。但是我无法找到一种简单的方法来定义按钮，这违背了我想要做的事情。

这是当前的代码：

var modal = $('<div id="modal"><p></p></div>');
function doModal()
{
    var modal = $('<div id="modal"><p></p></div>');
    modal.text(modal.content);
    modal.attr('title', modal.title);
    modal.dialog('destroy');
    modal.dialog({
        modal:true,
        resizable:false,
        draggable:false,
        buttons: modal.buttons
    });
}

$(document).ready(function(){
    modal.title = 'Are you sure?';
    modal.content = 'Are you sure? Deleting a product cannot be undone.';
    modal.buttons = {
            thisone: function(){
                alert('you clicked this one');
            }
        };
    doModal();
});

Answer 1

您在全局和 doModal() 内部定义模态 2 次。

在 document.ready() 上调用的函数内部，您将按钮分配给全局范围内定义的模态。但在 doModal() 内部还存在本地定义的变量 modal，它不会分配按钮。

我将在 read() 函数中定义模态并将其作为参数传递给 doModal() ：

function doModal(modal)
{ 
    modal.text(modal.content);
    modal.attr('title', modal.title);
    modal.dialog('destroy');
    modal.dialog({
        modal:true,
        resizable:false,
        draggable:false,
        buttons: modal.buttons
    });
}

$(document).ready(function(){
    var modal = $('<div id="modal"><p></p></div>');
    modal.title = 'Are you sure?';
    modal.content = 'Are you sure? Deleting a product cannot be undone.';
    modal.buttons = {
            thisone: function(){
                alert('you clicked this one');
            }
        };
    doModal(modal);
});

或者仅将动态选项传递给 doModal() ：

function doModal(options)
{ 
    var modal = $('<div id="modal"><p></p></div>');
    modal.text(options.content);
    modal.attr('title', options.title);
    modal.dialog('destroy');
    modal.dialog({
        modal:true,
        resizable:false,
        draggable:false,
        buttons: options.buttons
    });
}

$(document).ready(function(){
    doModal(
            {
              title   :'Are you sure?',
              content :'Are you sure? Deleting a product cannot be undone.',
              buttons : {
                          thisone: function()
                                   {
                                      alert('you clicked this one');
                                   }
                        }
             }
           );
});

Answer 2

我不知道这是否有帮助。我创建了一个显示模式对话框的“growl”jQuery 库。它没有按钮，但我认为你可以扩展它。这是图书馆的链接。

http://blog.bobcravens.com/2010/ 08/making-the-web-growl-using-jquery/

希望这能给您一些想法并且有帮助。

鲍勃