Функция толкания впереди литерала объекта - PullRequest
Новая
       9

Функция толкания впереди литерала объекта

0 голосов
/ 11 июля 2011

У меня есть html для всплытия модального интерфейса jQuery: 

<a href="my/url" class="popup">Click me</a>

С этим кодом JavaScript: 

$('.popup').click(function() {
    var a = this;

    var dialog = $('<div>').load($(a).attr('href'), function() {
        var form = dialog.find('form');

        dialog.dialog({
            modal: true,
            title: $(a).attr('title'),
            buttons: {
                Add : function () {
                    $.post($(form).attr('action'), $(form).serialize());
                    dialog.dialog('close');
                },
                Cancel: function () {
                    dialog.dialog('close');
                }
            }
        });

        if ($(a).attr('data-third')) {
            // Add here a button
        }
    });
    return false;
});

По идее ресурс в модале содержит форму, при отправке модал форма отправляется. Теперь, когда существует <a href="my/url" class="popup" data-third="Add & new">Click me</a>, это означает, что третья кнопка находится в модальном порядке в следующем порядке: Cancel | Add | Add & new.

Я попробовал этот код: 

if($(a).attr('data-third')) {
    var buttons = dialog.dialog('option', 'buttons');
    buttons[$(a).attr('data-third')] = function(){
        // Callback here
    }
    dialog.dialog('option', 'buttons', buttons);
}

Я получил новую кнопку, но заказ Add & new | Cancel | Add. Как я могу убедиться, что заказ Cancel | Add | Add & new

Ответы [ 2 ]

0 голосов
/ 11 июля 2011

С этим кодом вы всегда должны получить Отмена |Добавить |Добавить новое?(слева направо. 

$('.popup').click(function() {
    var a = this;

    var dialog = $('<div>').load($(a).attr('href'), function() {
        var form = dialog.find('form');

        dialog.dialog({
            modal: true,
            title: $(a).attr('title'),
            buttons: {
                Cancel: function() {
                    dialog.dialog('close');
                },
                Add: function() {
                    $.post($(form).attr('action'), $(form).serialize());
                    dialog.dialog('close');
                }
            }
        });

        if ($(a).data('third')) {
            var buttons = dialog.dialog('option', 'buttons');
            console.log(buttons);
            buttons[$(a).data('third')] = function() {
                // Callback here
            }
            dialog.dialog('option', 'buttons', buttons);
        }
    });
    return false;
});

Здесь: Fiddle: http://jsfiddle.net/rqq2p/1/

Не забудьте использовать data (), а не attrib () для получения атрибута по ссылке!

РЕДАКТИРОВАТЬ - в основном «кнопки» - это объект, и каждое свойство является одной из кнопок. Я думаю, что порядок, в котором появляются кнопки, является порядком, в котором добавляются свойства. В моем примере «Отмена» - крайняя левая кнопка, потому чтоэто было первое добавленное свойство и add & new, это самое правильное, потому что оно было самым последним. Если вам нужно поиграть с порядком, вы можете создать новый объект и добавить свойства в нужном вам порядке: 

    if ($(a).data('third')) {
        var buttons = dialog.dialog('option', 'buttons');
        var newButtons = {};
        newButtons[$(a).data('third')] = function() {
            // Callback here
        }
        newButtons['Cancel'] = buttons['Cancel'];
        newButtons['Add'] = buttons['Add'];
        dialog.dialog('option', 'buttons', newButtons);//now add & new should be the leftmost
    }
0 голосов
/ 11 июля 2011

Не проверено, но я бы предположил, что ключ массива должен быть buttons.length вот так 

if($(a).attr('data-third')) {
    var buttons = dialog.dialog('option', 'buttons');
    buttons[buttons.length] = function(){
        // Callback here
    }
    dialog.dialog('option', 'buttons', buttons);
}
...