添加其他按钮
Add Additional Buttons
我有一个场景,在 jQuery 对话框中我有一组可用的标准按钮,但根据其他条件,我需要添加额外的按钮。
好消息是我不需要 Add/Remove 按钮,只需添加即可。这些按钮将有效触发 PostBack,强制刷新页面内容。
$(divSearch).dialog('option', 'buttons',
{ // @buttons
"Add": function (evt) {
$(btnAdd).click();
// Close
$(this).dialog("close");
},
"Cancel": function (evt) {
$(this).dialog("close");
}
}
);
$(divSearch).dialog('option', 'buttons',
{ // @buttons
"Search": function (evt) {
$(btnSubmit).click();
// Close
$(this).dialog("close");
},
"Cancel": function (evt) {
$(this).dialog("close");
}
}
);
问题
我如何拥有一个通用的 Dialog Init 并稍后返回并为场景添加一组独特的按钮?
解决方案
参考:
// Setup standard settings for Dialog
InitDialog(divSearch, 315
, { // @buttons
"Cancel": function (evt) {
$(this).dialog("close");
}
}
, function (evt) { // @open
$(this).parent().appendTo("form");
});
// In a Function...Far, Far, Away from the Document.Ready
var btns = $(divSearch).dialog('option', 'buttons');
$(divSearch).dialog('option', 'buttons'
, $.extend({}, {
"Search": function (evt) {
$(btnSubmit).click();
// Close
$(this).dialog("close");
}
}, btns)
);
我使用 $.extend
得到了我想要的结果。
说明
捕获现有按钮:
var btns = $(divSearch).dialog('option', 'buttons');
根据您的需要,我需要在标准集前面加一个按钮:
$(divSearch).dialog('option', 'buttons'
, $.extend({}, {
"Search": function (evt) {
$(btnSubmit).click();
// Close
$(this).dialog("close");
}
}, btns)
);
如果您不在乎顺序,那么只需这样做:
$(divSearch).dialog('option', 'buttons'
, $.extend(btns, {
"Search": function (evt) {
$(btnSubmit).click();
// Close
$(this).dialog("close");
}
})
);
如果您需要添加、减去或更改按钮对象,那么您可以通过 btns
变量来完成。
API 文档对此进行了讨论:http://api.jqueryui.com/dialog/#option-buttons
$( ".selector" ).dialog( "option", "buttons",
[
{
text: "Ok",
icon: "ui-icon-heart",
click: function() {
$( this ).dialog( "close" );
}
// Uncommenting the following line would hide the text,
// resulting in the label being used as a tooltip
//showText: false
}
]
);
您的示例缺少数组。应用于您的示例,这将是:
$(divSearch).dialog('option', 'buttons', [
{
text: "Add",
click: function () {
$(btnAdd).click();
$(this).dialog("close");
}
},
text: "Cancel",
click:function () {
$(this).dialog("close");
}
}
]);
$(divSearch).dialog('option', 'buttons', [
{
text: "Search",
click: function () {
$(btnSubmit).click();
$(this).dialog("close");
}
},
{
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}
]);
希望对您有所帮助。您还可以应用所有按钮和 .show()
或 .hide()
您需要的按钮。
$(function() {
$("#dialog").dialog({
autoOpen: false,
buttons: [{
text: "Add",
id: "ui-btn-add",
class: "add",
click: function() {
$(btnAdd).click();
$("#ui-btn-add, #ui-btn-search").hide();
$(this).dialog("close");
}
}, {
text: "Search",
id: "ui-btn-search",
class: "search",
click: function() {
$(btnSubmit).click();
$("#ui-btn-add, #ui-btn-search").hide();
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function() {
$("#ui-btn-add, #ui-btn-search").hide();
$(this).dialog("close");
}
}]
});
$("#ui-btn-add, #ui-btn-search").hide();
$("button[id*='opener']").click(function() {
console.log($(this));
if ($(this).hasClass("add")) {
$("#ui-btn-add").show();
} else {
$("#ui-btn-search").show();
}
$("#dialog").dialog("open");
});
});
我有一个场景,在 jQuery 对话框中我有一组可用的标准按钮,但根据其他条件,我需要添加额外的按钮。
好消息是我不需要 Add/Remove 按钮,只需添加即可。这些按钮将有效触发 PostBack,强制刷新页面内容。
$(divSearch).dialog('option', 'buttons',
{ // @buttons
"Add": function (evt) {
$(btnAdd).click();
// Close
$(this).dialog("close");
},
"Cancel": function (evt) {
$(this).dialog("close");
}
}
);
$(divSearch).dialog('option', 'buttons',
{ // @buttons
"Search": function (evt) {
$(btnSubmit).click();
// Close
$(this).dialog("close");
},
"Cancel": function (evt) {
$(this).dialog("close");
}
}
);
问题
我如何拥有一个通用的 Dialog Init 并稍后返回并为场景添加一组独特的按钮?
解决方案
参考:
// Setup standard settings for Dialog
InitDialog(divSearch, 315
, { // @buttons
"Cancel": function (evt) {
$(this).dialog("close");
}
}
, function (evt) { // @open
$(this).parent().appendTo("form");
});
// In a Function...Far, Far, Away from the Document.Ready
var btns = $(divSearch).dialog('option', 'buttons');
$(divSearch).dialog('option', 'buttons'
, $.extend({}, {
"Search": function (evt) {
$(btnSubmit).click();
// Close
$(this).dialog("close");
}
}, btns)
);
我使用 $.extend
得到了我想要的结果。
说明
捕获现有按钮:
var btns = $(divSearch).dialog('option', 'buttons');
根据您的需要,我需要在标准集前面加一个按钮:
$(divSearch).dialog('option', 'buttons'
, $.extend({}, {
"Search": function (evt) {
$(btnSubmit).click();
// Close
$(this).dialog("close");
}
}, btns)
);
如果您不在乎顺序,那么只需这样做:
$(divSearch).dialog('option', 'buttons'
, $.extend(btns, {
"Search": function (evt) {
$(btnSubmit).click();
// Close
$(this).dialog("close");
}
})
);
如果您需要添加、减去或更改按钮对象,那么您可以通过 btns
变量来完成。
API 文档对此进行了讨论:http://api.jqueryui.com/dialog/#option-buttons
$( ".selector" ).dialog( "option", "buttons",
[
{
text: "Ok",
icon: "ui-icon-heart",
click: function() {
$( this ).dialog( "close" );
}
// Uncommenting the following line would hide the text,
// resulting in the label being used as a tooltip
//showText: false
}
]
);
您的示例缺少数组。应用于您的示例,这将是:
$(divSearch).dialog('option', 'buttons', [
{
text: "Add",
click: function () {
$(btnAdd).click();
$(this).dialog("close");
}
},
text: "Cancel",
click:function () {
$(this).dialog("close");
}
}
]);
$(divSearch).dialog('option', 'buttons', [
{
text: "Search",
click: function () {
$(btnSubmit).click();
$(this).dialog("close");
}
},
{
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}
]);
希望对您有所帮助。您还可以应用所有按钮和 .show()
或 .hide()
您需要的按钮。
$(function() {
$("#dialog").dialog({
autoOpen: false,
buttons: [{
text: "Add",
id: "ui-btn-add",
class: "add",
click: function() {
$(btnAdd).click();
$("#ui-btn-add, #ui-btn-search").hide();
$(this).dialog("close");
}
}, {
text: "Search",
id: "ui-btn-search",
class: "search",
click: function() {
$(btnSubmit).click();
$("#ui-btn-add, #ui-btn-search").hide();
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function() {
$("#ui-btn-add, #ui-btn-search").hide();
$(this).dialog("close");
}
}]
});
$("#ui-btn-add, #ui-btn-search").hide();
$("button[id*='opener']").click(function() {
console.log($(this));
if ($(this).hasClass("add")) {
$("#ui-btn-add").show();
} else {
$("#ui-btn-search").show();
}
$("#dialog").dialog("open");
});
});