JQuery - определение параметров динамически - PullRequest
0 голосов
/ 06 декабря 2010

Итак, просто для описания того, что я пытаюсь сделать: я пытаюсь создать простой способ создания модальных сообщений. Попытка уменьшить повторение кода (я не хочу создавать диалоги для всего). Так что, надеюсь, я смогу просто определить заголовок, содержимое и кнопки для модального окна, а затем вызвать функцию (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();
});

Ответы [ 2 ]

0 голосов
/ 06 декабря 2010

Вы определяете модальное 2 раза, глобальное и внутри doModal ()

Внутри функции, которую вы вызываете для document.ready (), вы назначаете кнопки модальным, определенным в глобальной области видимости.Но внутри doModal () также существует локально определяемая переменная modal, которая вам не назначает кнопки.

Я бы определил модал внутри функции ready () и передал бы ее в качестве аргумента 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');
                                   }
                        }
             }
           );
});
0 голосов
/ 06 декабря 2010

Я не знаю, поможет ли это. Я создал библиотеку jQuery 'growl', в которой отображался модальный диалог. У него нет кнопки, но я думаю, что вы можете расширить его. Вот ссылка на библиотеку.

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

Надеюсь, это даст вам некоторые идеи и поможет.

Bob

...