Question

我感兴趣的是如何使用jQuery实现下面描述的行为。

技术概述：

从技术上讲，行为最好由状态机建模：

页面已加载并处于初始状态（状态A）。状态A中的页面对用户没有限制，因为用户可以在页面上做任何他喜欢的事情。一旦页面处于状态B（通过单击特定按钮/链接等到达），用户需要执行特定的步骤（通常正确填写表单并提交表单），以便将页面恢复到它的初始状态。换句话说，正确提交表单会使页面回到初始状态（状态A）

在状态B中，用户尝试离开页面或单击当前页面上的其他链接等将导致弹出消息框（或JQuery消息框）并要求用户确认（是，取消）如果他们想要离开当前任务。

实践中的一个例子：

显示一个页面，其中显示了一个供用户点击的按钮，以便填写一些必要的信息。用户可以选择忽略该按钮，并继续浏览该站点。但是，一旦用户单击按钮并开始输入信息，如果他们（有意或有意）离开任务（即做任何会导致当前页面被刷新/重新加载的东西），那么一个消息框应该弹出并要求用户确认这是否确实是他们想要做的。当您单击“提问”按钮“

时，实际上可以在此网站上找到此类行为的一个很好的示例

我想知道如何使用jQuery提供的功能来实现这种行为。

Answer 1

在此处查看window.onbeforeunload事件：

https://developer.mozilla.org/en/DOM/window.onbeforeunload

您可以像这样使用jQuery：

var warning = false;
window.onbeforeunload = function(e) {
    return warning;
};

$('input,textarea,select').change(function() {
   warning = true;
});

每当用户更改任何选定的表单字段时，都会将warning设置为 true 。当页面被“卸载”时，窗口会触发onbeforeunload事件，并在函数返回true（warning变量）时显示警告。

Answer 2

相当广泛的问题......

点击显示表单的按钮/链接创建对话框
创建一个调出确认对话框的函数 - 将其附加到表单对话框中的“close”事件以及unload上的window事件。

参考：

http://api.jquery.com/unload/

http://jqueryui.com/demos/dialog/

Answer 3

前一段时间问了这个问题，但你现在可以在javascript / jQuery中找到一些你可以使用的FSM实现：

FSM（有限状态机）使用jQuery对网页状态进行建模

3 个答案: