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" } ]
内联行为是完全可能的：
- 用两个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; }; }
-
创buildConfirmDialog类的对象。
this.CONFIRM_DIALOG = new ConfirmDialog(); -
任何事件的调用方法，让我们说onclick（）
OK_DIALOG.setYesButtonName('Wana Marry').showMessage('Worst Idea!!');
任务完成！！
- jQuery UI对话框中的button选项接受对象和数组。
- 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>
