jquery - jQuery UI 对话框按钮文本作为变量

Question

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

score 99 · Accepted Answer

这不起作用，因为 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 });

score 65 · Accepted Answer

您可以做的是为对话框中的按钮分配一个 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>')

score 7 · Accepted Answer

这里的问题是对话框插件没有为它的按钮分配一个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')

score 4 · Accepted Answer

jQuery UI 对话框中的按钮选项接受对象和数组。
按钮是按钮小部件的实例。使用 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>

score 2 · Accepted Answer

也许我没有抓住重点——但最简单的方法不是使用 setter 吗？

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

        $("#dialog_box").dialog("option", "buttons", { "Close": function() { $(this).dialog("close"); } });

score 1 · Accepted Answer

不要忘记

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

score 1 · Accepted Answer

1

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

于 2010-07-09T03:42:04.063 回答

score 1 · Accepted Answer

这可以通过以下步骤完成：

在 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()，该函数用于接收、对话框标题、对话框文本、按钮数组。该函数的调用如下：

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

Confirm Dialog Template 定义为 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>

上述代码显示的对话框截图如下：

score 0 · Accepted Answer

0

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

于 2009-09-23T09:06:30.407 回答

score 0 · Accepted Answer

是的，内联行为完全有可能：

使用两个 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!!');

任务完成！！

score 0 · Accepted Answer

为按钮分配一个类。按钮文本将在一个跨度中，其中一个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"
            }
            ]

score 0 · Accepted Answer

为什么不是一个班轮...

$("span.ui-button-text:contains('OLD BUTTON NAME')").html('NEW BUTTON NAME');

jquery - jQuery UI 对话框按钮文本作为变量

12 回答 12

Related

Reference