0

jQuery UIモーダルをポップアップするHTMLがあります：

<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>、3 番目のボタンが次の順序でモーダルに配置されることを意味します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?

4

2 に答える 2

0

テストされていませんが、配列キーは次のようになるとbuttons.length思います

if($(a).attr('data-third')) {
    var buttons = dialog.dialog('option', 'buttons');
    buttons[buttons.length] = function(){
        // Callback here
    }
    dialog.dialog('option', 'buttons', buttons);
}
于 2011-07-11T07:50:21.150 に答える
0

このコードでは、常に Cancel | を取得する必要があります。追加 | 新しく追加する？（左から右へ。

$('.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;
});

ここでフィドル: http://jsfiddle.net/rqq2p/1/

リンクから属性を取得するには、attrib() ではなく data() を使用することを忘れないでください。

編集 - 基本的に「ボタン」はオブジェクトであり、各プロパティはボタンの 1 つです。ボタンが表示される順番は、プロパティが追加された順番だと思います。私の例では、キャンセルは最初に追加されたプロパティであるため左端のボタンであり、追加 & 新規は最新のものであるため右端のボタンです。順序をいじる必要がある場合は、新しいオブジェクトを作成して、必要な順序でプロパティを追加できます。

    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
    }
于 2011-07-11T07:52:16.267 に答える