63

jQuery UIダイアログでボタンテキストに変数を使用する方法を教えてもらえますか? 動的なボタン名を作りたいです。

4

12 に答える 12

99

jQueryがボタン名を処理する方法のため、これは機能しません（引用符付きでもなしでもかまいません）

これは機能します：

var button_name = 'Test';
var dialog_buttons = {}; 
dialog_buttons[button_name] = function(){ closeInstanceForm(Function); }
dialog_buttons['Cancel'] = function(){ $(this).dialog('close'); }   
$('#instanceDialog').dialog({ buttons: dialog_buttons });
于 2009-10-29T14:40:02.443 に答える
65

できることは、ダイアログのボタンに ID を割り当ててから、標準の jQuery を使用して操作することです。

$("#dialog_box").dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    buttons: [{
        text: "Ok",
        "id": "btnOk",
        click: function () {
            //okCallback();
        },

    }, {
        text: "Cancel",
        click: function () {
            //cancelCallback();
        },
    }],
    close: function () {
        //do something
    }
});

ボタンのテキストを設定:

 var newLabel = "Updated Label";
 $("#btnOk").html('<span class="ui-button-text">'+ newLabel +'</span>')
于 2011-12-15T16:03:03.120 に答える
7

ここでの問題は、ダイアログ プラグインがボタンに ID を割り当てないため、ボタンを直接変更するのが非常に難しいことです。

代わりに、通常どおりダイアログを初期化し、ボタンに含まれるテキストでボタンを見つけ、ID を追加します。ボタンに直接アクセスして、テキスト、書式設定、有効化/無効化などを変更できます。

$("#dialog_box").dialog({
buttons: {
    'ButtonA': function() {
        //... configure the button's function
    }
});
$('.ui-dialog-buttonpane button:contains(ButtonA)').attr("id","dialog_box_send-button");            
$('#dialog_box_send-button').html('Send')
于 2010-01-20T19:56:07.463 に答える
2

多分私は要点を逃していますが、セッターを使用するのが最も簡単な方法ではないでしょうか? 

     $("#dialog_box").dialog({
        buttons: {
         [
            text:"OK",
            click: function() {
                //... configure the button's function
            }
         ]
        });

        $("#dialog_box").dialog("option", "buttons", { "Close": function() { $(this).dialog("close"); } });
于 2010-12-26T00:52:22.933 に答える
1

そして忘れないでください

$($("button", $(".info_dialog").parent())[1]).html("<span class='ui-button-text'>Button text here.</span>");
于 2010-08-02T08:43:53.940 に答える
1

これはうまくいきます $($("button", $("#dialogId").parent())[NUMBER_OF_YOUR_BUTTON]).text("My Text");

于 2010-07-09T03:42:04.063 に答える
0

ボタンにクラスを割り当てます。ui-button-textボタンのテキストは、定義されたクラス内で呼び出されるクラスとのスパンになります。したがって、ボタンにクラス.contacts-dialog-search-buttonを指定すると、テキストにアクセスするためのコードは次のようになります。

$('.ui-button-text','.contacts-dialog-search-button').text();

例を示すために、現在のプロジェクトボタンに使用しているコードを次に示します。

buttons : [
            {
                text : 'Advanced Search',
                click : function(){
                    if($(this).dialog("option", "width")==290){
                        $('#contacts-dialog-search').show();
                        $(this).dialog("option", "width", 580);
                        $('.ui-button-text','.contacts-dialog-search-button').text('Close Search');
                    }
                    else{
                        $('#contacts-dialog-search').hide();
                        $(this).dialog("option", "width", 290);
                        $('.ui-button-text','.contacts-dialog-search-button').text('Advanced Search');
                    }
                },
                "class" : "contacts-dialog-search-button"
            }
            ]
于 2011-07-19T16:09:58.440 に答える
0 
var buttonName = "something";
$('#button-id').attr('value', buttonName);
于 2009-09-23T09:06:30.407 に答える
0

はい、インライン動作で完全に可能です:

  1. setYesButtonName() と setNoButtonName の 2 つのセッター メソッドを持つ Dialog クラスを作成します。
        function ConfirmDialog() {
            var yesButtonName = "Yes";
            var noButtonName = "No";
            this.showMessage = function(message, callback, argument) {
                var $dialog = $('<div></div>')
                    .html(message)
                    .dialog({
                        modal: true,
                        closeOnEscape: true,
                        buttons: [
                            {
                                text:yesButtonName,
                                click: function() {
                                    if (callback && typeof(callback) === "function") {
                                        if (argument == 'undefined') {
                                            callback();
                                        } else {
                                            callback(argument);
                                        }
                                    } else {
                                        $(this).dialog("close");
                                    }
                                }
                            },
                            {
                                text:noButtonName,
                                click: function() {
                                    $(this).dialog("close");
                                }

                            }
                        ]
                    });
                $dialog.dialog("open");
            };

            this.setYesButtonName = function(name) {
                yesButtonName = name;
                return this;
            };

            this.setNoButtonName = function(name) {
                noButtonName = name;
                return this;
            };
        }

  1. ConfirmDialog クラスのオブジェクトを作成します。

     this.CONFIRM_DIALOG = new ConfirmDialog();

  2. 任意のイベントでメソッドを呼び出します。たとえば、onclick() とします。

    OK_DIALOG.setYesButtonName('Wana Marry').showMessage('Worst Idea!!');

仕事完了!!

于 2011-09-22T10:25:02.383 に答える