jQuery UI 对话框按钮文本作为变量
Posted
技术标签:
【中文标题】jQuery UI 对话框按钮文本作为变量【英文标题】：jQuery UI dialog button text as a variable 【发布时间】：2010-11-30 16:38:27 【问题描述】：谁能告诉我如何在 jQuery UI 对话框中为按钮文本使用变量？ 我想做一个动态按钮名称。
【问题讨论】：
好问题，我总是觉得缺少这个功能很愚蠢，特别是如果你建立一个多语言网站.. 【参考方案1】：var buttonName = "something";
$('#button-id').attr('value', buttonName);
【讨论】：
【参考方案2】：由于 jQuery 处理按钮名称的方式（可以带或不带引号），这将不起作用
这将起作用：
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 );
【讨论】：
【参考方案3】：这里的问题是对话框插件没有给它的按钮分配一个id，所以直接修改它们是相当困难的。
相反，像平常一样初始化对话框，通过它包含的文本找到按钮并添加一个 id。然后可以直接访问该按钮以更改文本、格式、启用/禁用它等。
$("#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')
【讨论】：
文本应该在子跨度（ui-button-text）上，如下所示： $('#dialog_box_send-button').find('.ui-button-text').html( '发送');【参考方案4】：这会起作用
$($("button", $("#dialogId").parent())[NUMBER_OF_YOUR_BUTTON]).text("My Text");
【讨论】：
【参考方案5】：别忘了
$($("button", $(".info_dialog").parent())[1]).html("<span class='ui-button-text'>Button text here.</span>");
【讨论】：
【参考方案6】：也许我没有抓住重点——但最简单的方法不是使用 setter 吗？
$("#dialog_box").dialog(
buttons:
[
text:"OK",
click: function()
//... configure the button's function
]
);
$("#dialog_box").dialog("option", "buttons", "Close": function() $(this).dialog("close"); );
【讨论】：
我试过了，由于某种原因，它显示文本为“0”而不是“Ok”。 这是最佳实践方法，但您的代码需要更正：buttons 是 button 对象的数组。你开头的[应该和之前的为按钮分配一个类。按钮文本将在您定义的类中与名为ui-button-text 的类的跨度中。
所以如果你给你的按钮类.contacts-dialog-search-button，那么访问文本的代码将是：
$('.ui-button-text','.contacts-dialog-search-button').text();
这是我用于当前项目按钮的代码，给你一个例子。
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"
]
【讨论】：
【参考方案8】：是的，内联行为完全可以：
-
使用两个 setter 方法 setYesButtonName() 和 setNoButtonName 创建 Dialog 类。
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;
;
创建 ConfirmDialog 类的对象。
this.CONFIRM_DIALOG = new ConfirmDialog();
在任何事件上调用方法，比如 onclick()
OK_DIALOG.setYesButtonName('Wana Marry').showMessage('Worst Idea!!');
任务完成！！
【讨论】：
【参考方案9】：您可以为对话框中的按钮分配一个 ID，然后使用标准 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
);
设置按钮文字：
var newLabel = "Updated Label";
$("#btnOk").html('<span class="ui-button-text">'+ newLabel +'</span>')
【讨论】：
+1，最后一行是：$("#btnOk").html('<span class="ui-button-text">'+'new label'+'</span>');
我更喜欢这样做，而不是像 W. van Kuipers 建议的那样拥有一个单独的函数。
我觉得这对于我正在处理的代码来说要干净得多。谢谢
这里可以使用vars来设置按钮中的文字。我这样做是为了使我的应用程序国际化。在我的 php 页面（或 jsp 或其他）上，您可以根据需要设置尽可能多的 js 变量。就我而言，是和否。这些变量由执行 i18n 的 echo 设置，并在确认框中正确显示 //EDIT => 这不是重点，我的错。
只有在将“文本”放在引号中后，这才对我有用。【参考方案10】：
-
jQuery UI 对话框中的button option 接受对象和数组。
按钮是button widget 的实例。使用 API 而不是自己操作按钮。
$(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");
);
);@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");<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>【讨论】：
+1 我想强调以下几点；我发现这是很重要的一点：buttons: [ text: $("#buttonText0").val() , text: $("#buttonText1").val() ] 而不是使用$(selector).val()，您可以在使用“文本”选项时放置一个字符串变量，如果您尝试以下操作，您将无法做到这一点：@987654328 @【参考方案11】：
这可以通过以下步骤完成：
-
在 javascript 中，您可以创建按钮数组。
将按钮属性设置为按钮数组。
以下示例解释了上述步骤。
-
btnArray 中定义了两个按钮，如下所示；
var btnArray = [ text: "Add Entry", click: function() this.retVal = true; addRowIntoTemplateManifest(); $(this).dialog('close'); , text: "Cancel", click: function() this.retVal = false; $(this).dialog('close'); ];
写了一个自定义函数displayConfirmDialog_Dynamic()，acpets，Dialog header，Dialog Text，button Array。该函数的调用如下：
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 );
displayConfirmDialog_Dynamic函数如下：
//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");
确认对话框模板定义为 DIV 标记，如下所示。请注意，title 和 <p> 标记的内容由 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>
以上代码显示的对话框截图如下：
【讨论】：
【参考方案12】：为什么不是一个班轮...
$("span.ui-button-text:contains('OLD BUTTON NAME')").html('NEW BUTTON NAME');
【讨论】：
以上是关于jQuery UI 对话框按钮文本作为变量的主要内容，如果未能解决你的问题，请参考以下文章