jQuery UI bouton de boîte de dialogue de texte comme une variable

Cela ne fonctionne pas en raison de la façon jQuery gère le nom du bouton (peut être avec ou sans guillemets)

Cela fonctionne:

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 });

Le problème ici est que le dialogue plugin ne permet pas de lui attribuer un id à ses boutons, il est donc assez difficile de les modifier directement.

Au lieu de cela, utilisez la boîte de dialogue comme d'habitude, recherchez le bouton par le texte qu'il contient et y ajouter un id. Le bouton peut être accédé directement à modifier le texte, la mise en forme, l'activer/la désactiver, etc.

$("#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')       

1. La bouton d'option jQuery dans le dialogue de l'INTERFACE utilisateur accepte les objets et les tableaux.
2. Les boutons sont des instances de la bouton de widget. Utilisation de l'API au lieu de manipuler les boutons de vous-même.

JS:

$(function() {
  //using textbox value instead of variable
  $("#dialog").dialog({
    width: 400,
    buttons: [
      { text: $("#buttonText0").val(), click: function() { $(this).dialog("close"); } }, 
      { text: $("#buttonText1").val(), click: function() { $(this).dialog("close"); } }
    ]
  });
  $("#updateButtonText").on("click", function() {
    var $buttons = $("#dialog").dialog("widget").find(".ui-dialog-buttonpane button");
    console.log($buttons.get());

    $buttons.eq(0).button("option", "label", $("#buttonText0").val());
    $buttons.eq(1).button("option", "label", $("#buttonText1").val());

    //few more things that you can do with button widget
    $buttons.eq(0).button("option", "icons", { primary: "ui-icon-check" });
    $buttons.eq(1).button("disable");

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

CSS:

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

HTML:

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Sample Dialog">
  <p>Proceed?</p>
</div>

<p style="text-align: center;">
  <input type="text" id="buttonText0" value="OK">
  <input type="text" id="buttonText1" value="Cancel">
  <input type="button" id="updateButtonText" value="Update Button Text">
</p>

Et n'oubliez pas

$($("button", $(".info_dialog").parent())[1]).html("<span class='ui-button-text'>Button text here.</span>");

var buttonName = "something";
$('#button-id').attr('value', buttonName);

Oui tout à fait possible avec inline comportement:

1. Créer de la classe de boîte de Dialogue avec deux méthode de définition, setYesButtonName() et setNoButtonName.

        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. Créer un Objet de ConfirmDialog classe.

    this.CONFIRM_DIALOG = new ConfirmDialog();

2. Appel de méthode à n'importe quel événement, disons onclick()

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

Travail!!