blocks|key|1447094|text|这不会起作用，因为jQuery处理按钮名称的方式(可以带引号也可以不带引号)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1447095|这将会起作用：|1447096|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+});|code-block|syntax|javascript|1447097|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This won't work because of the way jQuery handles the button name (can be with or without quotes) 

This will work:

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

blocks|key|1232493|text|您可以做的是为对话框中的按钮分配一个ID，然后使用标准jQuery对其进行操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1232494|$("#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
++++}
});|code-block|syntax|javascript|1232495|设置按钮文本：|1232496|+var+newLabel+=+"Updated+Label";
+$("#btnOk").html('<span+class="ui-button-text">'%2B+newLabel+%2B'')|1232497|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

What you can do is assign the button in the dialog an ID and then manipulate it using standard jQuery.

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

Set button text:

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

blocks|key|1447164|text|这里的问题是，对话框插件没有给它的按钮分配id，所以很难直接修改它们。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1447165|相反，按正常方式初始化对话框，根据按钮包含的文本定位按钮并添加id。然后可以直接访问该按钮以更改文本、格式、启用/禁用该按钮等。|1447166|$("#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')+++++++|code-block|syntax|javascript|1447167|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

The problem here is that the dialog plugin does not assign an id to its buttons, so it's quite difficult to modify them directly. 

Instead, initialise the dialog as normal, locate the button by the text it contains and add an id. The button can then be accessed directly to change the text, formatting, enable/disable it, etc.

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

blocks|key|1447239|text|也许我没有抓住要点--但最简单的方法不是使用setter吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1447240|+++++$("#dialog_box").dialog({
++++++++buttons:+{
+++++++++[
++++++++++++text:"OK",
++++++++++++click:+function()+{
++++++++++++++++//...+configure+the+button's+function
++++++++++++}
+++++++++]
++++++++});

++++++++$("#dialog_box").dialog("option",+"buttons",+{+"Close":+function()+{+$(this).dialog("close");+}+});|code-block|syntax|javascript|1447241|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Maybe I'm missing the point - but wouldn't the easiest way be to use the setter? 

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

 $("#dialog_box").dialog("option", "buttons", { "Close": function() { $(this).dialog("close"); } });
</code></pre>

blocks|key|1232370|text|这将在$($("button",+$("#dialogId").parent())[NUMBER_OF_YOUR_BUTTON]).text("My+Text");中工作|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1232371|entityMap^0|3|27|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

This will work
<code>$($("button", $("#dialogId").parent())[NUMBER_OF_YOUR_BUTTON]).text("My Text");</code>

blocks|key|1232381|text|别忘了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1232382|$($("button",+$(".info_dialog").parent())[1]).html("<span+class='ui-button-text'>Button+text+here.");|code-block|syntax|javascript|1232383|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

And don't forget 

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

blocks|key|1447034|text|var+buttonName+=+"something";
$('#button-id').attr('value',+buttonName);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1447035|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var buttonName = "something";
$('#button-id').attr('value', buttonName);
</code></pre>

blocks|key|1447288|text|为按钮分配一个类。按钮文本将位于跨度中，在您定义的类中有一个名为ui-button-text的类。因此，如果您为按钮提供类.contacts-dialog-search-button，则访问文本的代码将为：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1447289|$('.ui-button-text','.contacts-dialog-search-button').text();|code-block|syntax|javascript|1447290|下面是我为我当前的项目按钮使用的代码，给你一个例子。|1447291|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"
++++++++++++}
++++++++++++]|1447292|entityMap^0|W|E|1P|U|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

assign a class to the button. The button text will be in a span with a class called <code>ui-button-text</code> inside your defined class.
So if you give your button the class <code>.contacts-dialog-search-button</code> then the code to access the text will be:

<pre><code>$('.ui-button-text','.contacts-dialog-search-button').text();
</code></pre>

here is the code I'm using for my current projects buttons, to give you an example.

<pre><code>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"
 }
 ]
</code></pre>

blocks|key|1447387|text|为什么不是一条直线..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1447388|$("span.ui-button-text:contains('OLD+BUTTON+NAME')").html('NEW+BUTTON+NAME');|code-block|syntax|javascript|1447389|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

why not a one liner...

<pre><code>$("span.ui-button-text:contains('OLD BUTTON NAME')").html('NEW BUTTON NAME');
</code></pre>

Can anyone tell me how can i use a variable for button text in jQuery UI dialog?
I want to make a dynamic button name.

jQuery UI dialog button text as a variable

jQuery

谁能告诉我如何在jQuery UI对话框中使用按钮文本的变量？我想创建一个动态的按钮名称。

问作为变量的jQuery UI对话框按钮文本
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问作为变量的jQuery UI对话框按钮文本EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问作为变量的jQuery UI对话框按钮文本
EN