jQuery UI testo pulsante di dialogo come variabile

Question

Qualcuno può dirmi come posso utilizzare una variabile per il testo del pulsante nella finestra di dialogo dell'interfaccia utente jQuery? Voglio fare un nome di pulsante dinamico.

Answer 1

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

Answer 2

Questo non funziona a causa del modo jQuery gestisce il nome del pulsante (può essere con o senza virgolette)

Questo funzionerà:

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

Answer 3

Il problema qui è che il il plugin di dialogo non assegna un id ai suoi pulsanti, quindi è abbastanza difficile modificarli direttamente.

Invece, inizializzare il dialogo normalmente, individuare il pulsante in base al testo che contiene e aggiungere un ID. Il pulsante può quindi accedere direttamente per modificare il testo, la formattazione, abilitare/disabilitare la funzione, ecc

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

Answer 4

Ciò funzionerà $($("button", $("#dialogId").parent())[NUMBER_OF_YOUR_BUTTON]).text("My Text");

Answer 5

e non dimenticare

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

Answer 6

Forse Mi manca il punto - ma non sarebbe il modo più semplice di usare il setter?

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

     $("#dialog_box").dialog("option", "buttons", { "Close": function() { $(this).dialog("close"); } }); 

Answer 7

assegnare una classe al pulsante. Il testo del pulsante sarà in un intervallo con una classe denominata ui-button-text all'interno della classe definita. Quindi, se si dà il tasto della classe .contacts-dialog-search-button poi il codice per accedere al testo sarà:

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

Ecco il codice che sto usando per i miei tasti progetti in corso, per dare un esempio.

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" 
      } 
      ] 

Answer 8

Sì completamente possibile con un comportamento in linea:

1. Crea classe dialogo con due metodo setter, setYesButtonName() e 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. Crea oggetto della classe ConfirmDialog.

   this.CONFIRM_DIALOG = new ConfirmDialog(); 
   

2. metodo chiamata in ogni caso, diciamo onclick() Fatto

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

Job !!

Answer 9

Quello che puoi fare è assegnare il pulsante nella finestra di dialogo di un ID e quindi manipolarlo usando jQuery standard.

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

pulsante Set testo:

var newLabel = "Updated Label"; 
$("#btnOk").html('<span class="ui-button-text">'+ newLabel +'</span>') 

Answer 10

1. The button option nel dialogo jQuery UI accetta gli oggetti e gli array.
2. I pulsanti sono istanze di button widget. Usa l'API invece di manipolare i pulsanti tu stesso.

$(function() { 
 
    // using textbox value instead of variable 
 
    $("#dialog").dialog({ 
 
    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, $buttons.eq(0), $buttons.eq(1)); 
 
    $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"); 
 
    }); 
 
});

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

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="http://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>

Answer 11

questo può essere fatto in seguenti fasi:

1. In JavaScript è possibile creare array di pulsanti.
2. Imposta le proprietà dei pulsanti sulla matrice di pulsanti.

L'esempio seguente illustra i passaggi precedenti.

1. Due pulsanti sono definiti in btnArray come segue;

var btnArray = [ 
    { text: "Add Entry", 
     click: function(){ 
     this.retVal = true; 
     addRowIntoTemplateManifest(); 
     $(this).dialog('close'); 
     } 
    }, 
    { text: "Cancel", 
     click: function(){ 
     this.retVal = false; 
     $(this).dialog('close'); 
     } 
    } 
    ]; 

Una funzione personalizzata displayConfirmDialog_Dynamic() è scritto che accpets, intestazione Dialog, testo di dialogo, il pulsante Array. La chiamata a questa funzione è la seguente:

displayConfirmDialog_Dynamic("Add Template Manifest Entry?", "Do you want to add following Cuboid Entry to Template Manifest?\nCuboidNane: '" + json.cuboidName + "' CuboidId: " + json.cuboidId + "\non Server:" 
+ json.serverUrl , btnArray); 

La funzione displayConfirmDialog_Dynamic è la seguente:

//Confirmation dialog Dynamic Buttons 
function displayConfirmDialog_Dynamic(dlgTitle, message, btnArray) 
{ 
    var retVal; 
    $("div#dialog-confirm").find("p").html(message); 

    var confirmDlg = $("#dialog-confirm").dialog({ 
      resizable: false, 
      height: "auto", 
      width: 400, 
      modal: true, 
      title: dlgTitle, 
      buttons: btnArray, 
      show:{effect:'scale', duration: 700}, 
      hide:{effect:'explode', duration: 700} 
    }); 

    confirmDlg.dialog('option', 'buttons', btnArray); 
    confirmDlg.prev(".ui-dialog-titlebar").css({"background":"#ffc000", "color":"#ffffff", "font-size":"13px", "font-weight":"normal"}) ; 
    confirmDlg.dialog("open"); 
} 

La Conferma di dialogo Template è definito come tag DIV come segue. Si noti che il title e il contenuto del tag <p> vengono modificati dinamicamente dal codice JavaScript.

<div id="dialog-confirm" title="Empty the recycle bin?" style="display:none;"> 
    <p>These items will be permanently deleted and cannot be recovered. Are you sure?</p> 
</div> 

lo screenshot della finestra di dialogo visualizzata dal codice di cui sopra è la seguente: