jQuery Interfejs użytkownika tekst przycisku jako zmienna

Question

Czy ktoś może mi powiedzieć, w jaki sposób mogę użyć zmiennej dla tekstu przycisku w oknie dialogowym interfejsu użytkownika jQuery? Chcę utworzyć dynamiczną nazwę przycisku.

Answer 1

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

Answer 2

To nie będzie działać ze względu na sposób jQuery obsługuje nazwę przycisku (może być z lub bez cudzysłowów)

to będzie działać:

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

Problem polega na tym, że W oknie dialogowym wtyczka nie przypisuje id do swoich przycisków, więc trudno jest je bezpośrednio zmodyfikować.

Zamiast tego zainicjuj okno dialogowe w normalny sposób, znajdź przycisk obok tekstu i dodaj identyfikator. Przycisk może być dostępny bezpośrednio do zmiany tekstu, formatowanie, włączyć/wyłączyć, itp

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

To zadziała $($("button", $("#dialogId").parent())[NUMBER_OF_YOUR_BUTTON]).text("My Text");

Answer 5

I nie zapomnij

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

Answer 6

Może Tęsknię za sednem - ale czy najprostszym sposobem nie byłoby użycie ustawiacza?

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

przypisać klasę do przycisku. Tekst przycisku będzie w zakresie z klasą o nazwie ui-button-text wewnątrz zdefiniowanej klasy. Więc jeśli dajesz przycisk klasa .contacts-dialog-search-button następnie kod, aby uzyskać dostęp tekst będzie:

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

Oto kod używam dla moich bieżących projektów przycisków, aby dać przykład.

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

Tak całkowicie możliwe z zachowaniem inline:

1. Tworzenie Dialog klasę z dwoma setter metody, setYesButtonName() i 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. Tworzenie obiektu klasy ConfirmDialog.

   this.CONFIRM_DIALOG = new ConfirmDialog(); 
   

2. wywołanie metody na każdym razie, powiedzmy onclick()

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

robotę !!

Answer 9

Co można zrobić, to przypisać przycisk w oknie dialogowym identyfikator, a następnie manipulować nim przy użyciu standardowego 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 
    } 
}); 

Zestaw przycisk tekst:

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

Answer 10

1. The button option w oknie dialogowym jQuery UI akceptuje obiektów i tablic.
2. Przyciski są instancjami modelu button widget. Użyj interfejsu API zamiast samodzielnie manipulować przyciskami.

$(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

Można to zrobić w następujących etapach:

1. W JavaScript można utworzyć układu przycisków.
2. Ustaw właściwość buttons na Array of Buttons.

Poniższy przykład objaśnia powyższe kroki.

1. Dwa przyciski są zdefiniowane w btnArray w następujący sposób;

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

Niestandardowa funkcja displayConfirmDialog_Dynamic() jest napisane, że accpets, Dialog header, Dialog tekstowe, przycisk Array. Połączenie tej funkcji jest następujący:

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

Funkcja displayConfirmDialog_Dynamic się następująco:

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

Powt Okno szablon jest zdefiniowany jako znacznik DIV następująco. Zauważ, że title i zawartość tagu <p> są dynamicznie zmieniane przez kod 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> 

zrzut ekranu okna dialogowego wyświetlanego przez powyższym kodem od przedstawiono poniżej: