在进行ajax调用Jquery mobile时暂停或禁用页面

Question

我正在执行 Ajax 调用，该调用会转到服务器并取回记录。我在 ajax 上显示进度条，完成后停止。

// Shows the loading bar when ajax call starts
$(document).ajaxStart(function() {
    $.mobile.loading('show');
});

// dismiss the loading bar when ajax call ends
$(document).ajaxStop(function() {
    $.mobile.loading('hide');
}); 

进度条显示，但我仍然可以编辑页面中的字段。我不想那样做。我想让页面处于暂停状态。我查看了 Jquery 移动 API，但没有任何帮助。

我正在禁用 ajax 启动中的每个字段，并在 ajax 结束时启用所有字段。这是正确的方法吗？

示例代码 sn-p 可以帮助我

Answer 1

您可以向页面添加一个 div/掩码，使其在 ajax 启动时禁用，并在 ajax 结束时将其删除。请尝试以下操作：

<style>
.mask{ background: #000; opacity: 0.5; position:fixed; top: 0; left: 0; width: 100%; height:100%;}
</style>

<script>
$(document).ajaxStart(function() {
    $.mobile.loading('show');
    $('.mask').show();
});

$(document).ajaxStart(function() {
    $.mobile.loading('hide');
    $('.mask').hide();
});
</script>

并将带有mask 类的 HTML div 添加到您的 HTML 页面中，例如

<div class="mask"></div>