jQuery UI对话框中的button文字作为variables

任何人都可以告诉我如何使用jQuery UI对话框中的button文本的variables? 我想制作一个dynamic的button名称。

这将无法正常工作,因为jQuery处理button名称的方式(可以带或不带引号)

这将工作:

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

你可以做的是分配对话框中的buttonID,然后使用标准的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 } }); 

设置button文字:

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

这里的问题是对话框插件没有给它的button分配一个id,所以直接修改它们是非常困难的。

相反,按正常方式初始化对话框,按照其包含的文本定位button并添加一个ID。 然后可以直接访问该button来更改文本,格式化,启用/禁用等等。

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

也许我错过了一点 – 但不是最简单的方法是使用setter?

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

这将工作$($("button", $("#dialogId").parent())[NUMBER_OF_YOUR_BUTTON]).text("My Text");

别忘了

 $($("button", $(".info_dialog").parent())[1]).html("<span class='ui-button-text'>Button text here.</span>"); 
 var buttonName = "something"; $('#button-id').attr('value', buttonName); 

分配一个类到button。 button文本将在您定义的类中包含一个名为ui-button-text的类。 所以如果你给你的button的类.contacts-dialog-search-button那么访问文本的代码将是:

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

这里是我用于当前项目button的代码,给你一个例子。

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

内联行为是完全可能的:

  1. 用两个setter方法创buildDialog类,setYesButtonName()和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. 创buildConfirmDialog类的对象。

      this.CONFIRM_DIALOG = new ConfirmDialog(); 
  2. 任何事件的调用方法,让我们说onclick()

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

任务完成!!

  1. jQuery UI对话框中的button选项接受对象和数组。
  2. button是button小部件的实例。 使用API​​而不是自己操作button。
 $(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("ui/1.11.4/themes/smoothness/jquery-ui.min.css"); 
 <script src="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>