在 ajax 呼叫 Jquery 手机时暂停或禁用页面

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 结束时启用所有字段。这是正确的方法吗？

示例代码片段会对我有所帮助

Answer 1

您可以向页面添加 div/mask 以使其在 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>

并将 HTML div 和 class mask 添加到您的 HTML 页面，如

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

在 ajax 呼叫 Jquery 手机时暂停或禁用页面

Pause or disable the page while doing ajax call Jquery mobile

ajax

jquery

jquery-mobile

onpause

progress-bar