Văn bản nút giao diện người dùng jQuery dưới dạng biến

Question

Bất cứ ai có thể cho tôi biết làm thế nào tôi có thể sử dụng biến cho văn bản nút trong hộp thoại Giao diện người dùng jQuery? Tôi muốn tạo tên nút động.

Answer 1

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

Answer 2

này sẽ không làm việc vì cách jQuery xử lý các tên nút (có thể có hoặc không có dấu ngoặc kép)

này sẽ làm việc:

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

Vấn đề ở đây là các Plugin hộp thoại không gán một id cho các nút của nó, do đó, thật khó để sửa đổi chúng trực tiếp.

Thay vào đó, khởi chạy hộp thoại như bình thường, tìm nút bằng văn bản chứa và thêm id. Nút sau đó có thể được truy cập trực tiếp đến thay đổi nội dung, định dạng, cho phép/vô hiệu hóa nó, vv

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

này sẽ làm việc $($("button", $("#dialogId").parent())[NUMBER_OF_YOUR_BUTTON]).text("My Text");

Answer 5

Và đừng quên

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

Answer 6

lẽ Tôi đang thiếu điểm - nhưng không phải cách dễ nhất là sử dụng 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

gán một lớp cho nút. Văn bản nút sẽ nằm trong một khoảng với một lớp được gọi là ui-button-text bên trong lớp được xác định của bạn. Vì vậy, nếu bạn cung cấp cho nút của bạn lớp .contacts-dialog-search-button sau đó mã để truy cập vào văn bản sẽ là:

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

đây là mã Tôi đang sử dụng cho các nút bấm các dự án hiện tại của tôi, để cung cấp cho bạn một ví dụ.

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

Có hoàn toàn có thể với hành vi inline:

1. Tạo lớp Dialog với hai phương pháp setter, setYesButtonName() và 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. Tạo đối tượng của lớp ConfirmDialog.

   this.CONFIRM_DIALOG = new ConfirmDialog(); 
   

2. Gọi phương pháp trên mọi trường hợp, chúng ta hãy nói onclick() Xong

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

Job !!

Answer 9

Những gì bạn có thể làm là gán nút trong hộp thoại ID và sau đó điều khiển nó bằng cách sử dụng jQuery chuẩn.

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

Set nút văn bản:

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

Answer 10

1. The button option trong hộp thoại jQuery UI chấp nhận đối tượng và mảng.
2. Các nút là trường hợp của button widget. Sử dụng API thay vì tự thao tác các nút.

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

này có thể được thực hiện trong các bước sau:

1. Trong JavaScript bạn có thể tạo mảng của Buttons.
2. Đặt thuộc tính nút thành Mảng nút.

Ví dụ sau giải thích các bước trên.

1. Hai nút được định nghĩa trong btnArray như sau;

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

Một chức năng tùy chỉnh displayConfirmDialog_Dynamic() được viết rằng accpets, tiêu đề Dialog, Text Dialog, nút Array. Các cuộc gọi đến chức năng này như sau:

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

Chức năng displayConfirmDialog_Dynamic là như sau:

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

các Confirm Dialog Template được định nghĩa là thẻ DIV như sau. Lưu ý rằng title và nội dung của thẻ <p> được thay đổi động bằng mã 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> 

Các Ảnh chụp màn hình của hộp thoại hiển thị bằng mã trên được hiển thị dưới đây: