如何改善取消按钮的行为并使关闭与取消相同?
How to improve cancel button behavior and make the close to work the same as cancel?
我正在设置一个小 window 用于设置和更新 Web 应用程序中不同模块的参数,为此,我使用了一个 jQueryUI 对话框,该对话框当时从每个模块加载设置。我的问题是,如果您点击取消按钮,它会将所有配置重置为初始状态,即使我之前进行了更改并在再次打开对话框并取消之前保存了它们。
此外,我希望关闭 'X' 按钮具有与取消按钮相同的行为。
var appDiv = $(Container).find(".divAppAdmin")[0];
var backupDiv = appDiv.innerHTML;
var closedFunction = function() {
$(appDiv).dialog( "destroy" );
};
var closeFunction = function() {
$(appDiv).dialog( "close" );
$(Container).append(appDiv);
};
var cancelFunction = function() {
$(appDiv).dialog( "close" );
appDiv.innerHTML = backupDiv;
$(Container).append(appDiv);
}
$(appDiv).dialog({
"modal": true,
"title": "Edit",
"close": closedFunction,
"buttons": {
"Save": closeFunction,
"Cancel": cancelFunction
},
"minWidth": 600
});
一步一步:
1.打开对话框,引入一些变化,
2.保存修改,
3.再次打开对话框,不做任何修改,
4. 点击取消按钮。
此时,我丢失了之前所做的更改并在第 2 步中保存,模块返回到第 1 步之前的状态。
我知道使用
appDiv.innerHTML = backupDiv;
在这种特定情况下导致更改丢失,但如果我真的想撤消任何修改,它工作正常。
编辑:
我一直在挖掘,到目前为止,我找到了将取消行为复制到关闭 'X' 按钮 (How to find out if jquery dialog was closed on escape and execute some code) 的解决方案:
var closedFunction = function (event, ui) {
if (event.originalEvent) {
cancelFunction();
}
$(appDiv).dialog("destroy");
};
通过在 closedFunction() 中添加此 if 子句,我可以在单击 'X' 按钮或按 ESCAPE 键关闭对话框时进行捕获,然后我可以在if 和 now 与点击取消按钮相同。
考虑这个 semi-basic 示例。
$(function() {
var appDiv = $("#appDialog");
function editSetting(s) {
$(".setting-id", appDiv).val(s.id);
$(".setting-name", appDiv).html(s.label);
$(".setting-value", appDiv).val(s.value);
appDiv.dialog("open");
}
function saveSetting() {
var sid = $(".setting-id", appDiv).val();
var v = $(".setting-value", appDiv).val();
$("#" + sid).data("value", v);
}
function resetDialog() {
$(".setting-id", appDiv).val("");
$(".setting-name", appDiv).html("");
$(".setting-value", appDiv).val("");
}
appDiv.dialog({
autoOpen: false,
modal: true,
minWidth: 300,
buttons: [{
text: "Save",
icon: "ui-icon-check",
class: "ui-priority-primary",
click: function() {
saveSetting();
appDiv.dialog("close");
}
}, {
text: "Cancel",
icon: "ui-icon-close",
click: function() {
appDiv.dialog("close");
}
}],
close: function(e, ui) {
resetDialog();
}
});
$(".app .edit-setting").button().click(function(e) {
var that = $(this).parent();
var setting = {
id: that.attr("id"),
label: $("label", that).text(),
value: that.data("value")
};
editSetting(setting);
});
$("form", appDiv).submit(function(e) {
e.preventDefault();
saveSetting();
appDiv.dialog("close");
});
$(".app > .save").button().click(function() {
var settings = {};
$(".app li").each(function(ind, el) {
var k = $(el).attr("id");
var v = $(el).data("value");
settings[k] = v;
});
//Save Settings to Storage
console.log(settings);
});
});
.app ul {
margin: 10px;
padding: 0;
list-style: none;
width: 300px;
}
.app ul li {
border: 1px solid #CCC;
padding: .5em;
margin-bottom: -1px;
}
.app ul li:first-child {
border-radius: 3px 3px 0 0;
}
.app ul li:last-child {
border-radius: 0 0 3px 3px;
}
.app ul li label {
display: inline-block;
width: 200px;
}
.app .save {
margin-left: 10px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="app ui-widget">
<ul>
<li id="set-1" data-value="A"><label>Setting 1</label><button class="edit-setting">Edit</button></li>
<li id="set-2" data-value="B"><label>Setting 2</label><button class="edit-setting">Edit</button></li>
<li id="set-3" data-value="C"><label>Setting 3</label><button class="edit-setting">Edit</button></li>
</ul>
<div id="appDialog" class="appDiv" title="Edit Setting">
<form>
<input type="hidden" class="setting-id" />
<label class="setting-name"></label>: <input type="text" class="setting-value" />
</form>
</div>
<button class="save">Save Settings</button>
</div>
如果我们将对话框视为容器或模板,我们可以用各种数据填充单个对话框。然后就是打开关闭的问题了
单击 'Edit' 按钮时,当前设置和值会在对话框打开之前加载到对话框中。点击 'X' 或按 'Cancel' 关闭对话框而不保存。用 <form>
包装我们的条目允许我们使用 Enter 提交表单或单击 'Save'。两者都配置为在关闭对话框之前保存值。
我在关闭回调中添加了一个重置函数,因此无论何时关闭对话框,它都会清除所有旧数据。这并不是完全需要的,因为当我们打开对话框时,它会将数据填充到字段中。
我们必须将值存储在某个地方。对于这个例子,我使用 data
属性。它可以作为 HTML 的一部分添加并由 jQuery 读取。它不是持续的。您可以看到一个最终保存按钮,这可以读取新值并将它们推送到 localStorage 或数据库。
希望对您有所帮助。
我正在设置一个小 window 用于设置和更新 Web 应用程序中不同模块的参数,为此,我使用了一个 jQueryUI 对话框,该对话框当时从每个模块加载设置。我的问题是,如果您点击取消按钮,它会将所有配置重置为初始状态,即使我之前进行了更改并在再次打开对话框并取消之前保存了它们。
此外,我希望关闭 'X' 按钮具有与取消按钮相同的行为。
var appDiv = $(Container).find(".divAppAdmin")[0];
var backupDiv = appDiv.innerHTML;
var closedFunction = function() {
$(appDiv).dialog( "destroy" );
};
var closeFunction = function() {
$(appDiv).dialog( "close" );
$(Container).append(appDiv);
};
var cancelFunction = function() {
$(appDiv).dialog( "close" );
appDiv.innerHTML = backupDiv;
$(Container).append(appDiv);
}
$(appDiv).dialog({
"modal": true,
"title": "Edit",
"close": closedFunction,
"buttons": {
"Save": closeFunction,
"Cancel": cancelFunction
},
"minWidth": 600
});
一步一步:
1.打开对话框,引入一些变化,
2.保存修改,
3.再次打开对话框,不做任何修改,
4. 点击取消按钮。
此时,我丢失了之前所做的更改并在第 2 步中保存,模块返回到第 1 步之前的状态。
我知道使用
appDiv.innerHTML = backupDiv;
在这种特定情况下导致更改丢失,但如果我真的想撤消任何修改,它工作正常。
编辑:
我一直在挖掘,到目前为止,我找到了将取消行为复制到关闭 'X' 按钮 (How to find out if jquery dialog was closed on escape and execute some code) 的解决方案:
var closedFunction = function (event, ui) {
if (event.originalEvent) {
cancelFunction();
}
$(appDiv).dialog("destroy");
};
通过在 closedFunction() 中添加此 if 子句,我可以在单击 'X' 按钮或按 ESCAPE 键关闭对话框时进行捕获,然后我可以在if 和 now 与点击取消按钮相同。
考虑这个 semi-basic 示例。
$(function() {
var appDiv = $("#appDialog");
function editSetting(s) {
$(".setting-id", appDiv).val(s.id);
$(".setting-name", appDiv).html(s.label);
$(".setting-value", appDiv).val(s.value);
appDiv.dialog("open");
}
function saveSetting() {
var sid = $(".setting-id", appDiv).val();
var v = $(".setting-value", appDiv).val();
$("#" + sid).data("value", v);
}
function resetDialog() {
$(".setting-id", appDiv).val("");
$(".setting-name", appDiv).html("");
$(".setting-value", appDiv).val("");
}
appDiv.dialog({
autoOpen: false,
modal: true,
minWidth: 300,
buttons: [{
text: "Save",
icon: "ui-icon-check",
class: "ui-priority-primary",
click: function() {
saveSetting();
appDiv.dialog("close");
}
}, {
text: "Cancel",
icon: "ui-icon-close",
click: function() {
appDiv.dialog("close");
}
}],
close: function(e, ui) {
resetDialog();
}
});
$(".app .edit-setting").button().click(function(e) {
var that = $(this).parent();
var setting = {
id: that.attr("id"),
label: $("label", that).text(),
value: that.data("value")
};
editSetting(setting);
});
$("form", appDiv).submit(function(e) {
e.preventDefault();
saveSetting();
appDiv.dialog("close");
});
$(".app > .save").button().click(function() {
var settings = {};
$(".app li").each(function(ind, el) {
var k = $(el).attr("id");
var v = $(el).data("value");
settings[k] = v;
});
//Save Settings to Storage
console.log(settings);
});
});
.app ul {
margin: 10px;
padding: 0;
list-style: none;
width: 300px;
}
.app ul li {
border: 1px solid #CCC;
padding: .5em;
margin-bottom: -1px;
}
.app ul li:first-child {
border-radius: 3px 3px 0 0;
}
.app ul li:last-child {
border-radius: 0 0 3px 3px;
}
.app ul li label {
display: inline-block;
width: 200px;
}
.app .save {
margin-left: 10px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="app ui-widget">
<ul>
<li id="set-1" data-value="A"><label>Setting 1</label><button class="edit-setting">Edit</button></li>
<li id="set-2" data-value="B"><label>Setting 2</label><button class="edit-setting">Edit</button></li>
<li id="set-3" data-value="C"><label>Setting 3</label><button class="edit-setting">Edit</button></li>
</ul>
<div id="appDialog" class="appDiv" title="Edit Setting">
<form>
<input type="hidden" class="setting-id" />
<label class="setting-name"></label>: <input type="text" class="setting-value" />
</form>
</div>
<button class="save">Save Settings</button>
</div>
如果我们将对话框视为容器或模板,我们可以用各种数据填充单个对话框。然后就是打开关闭的问题了
单击 'Edit' 按钮时,当前设置和值会在对话框打开之前加载到对话框中。点击 'X' 或按 'Cancel' 关闭对话框而不保存。用 <form>
包装我们的条目允许我们使用 Enter 提交表单或单击 'Save'。两者都配置为在关闭对话框之前保存值。
我在关闭回调中添加了一个重置函数,因此无论何时关闭对话框,它都会清除所有旧数据。这并不是完全需要的,因为当我们打开对话框时,它会将数据填充到字段中。
我们必须将值存储在某个地方。对于这个例子,我使用 data
属性。它可以作为 HTML 的一部分添加并由 jQuery 读取。它不是持续的。您可以看到一个最终保存按钮,这可以读取新值并将它们推送到 localStorage 或数据库。
希望对您有所帮助。