jQuery Mobile 是一个基于 jQuery 的框架,用于创建移动端网页应用。当页面加载或执行 AJAX 请求时,jQuery Mobile 会显示一个加载叠加层(loading overlay)来指示正在处理中。
默认情况下,jQuery Mobile 的加载叠加层不会自动禁用页面上的按钮,这可能导致用户在等待期间重复点击按钮,造成多次提交或其他意外行为。
$(document).on("mobileinit", function() {
// 显示加载时禁用所有按钮
$(document).on("pagebeforeload", function() {
$(":jqmData(role='button')").attr("disabled", "disabled").addClass("ui-disabled");
});
// 加载完成后启用所有按钮
$(document).on("pageload", function() {
$(":jqmData(role='button')").removeAttr("disabled").removeClass("ui-disabled");
});
});
// 自定义显示加载函数
function showLoading() {
$.mobile.loading("show", {
text: "加载中...",
textVisible: true,
theme: "a",
html: ""
});
// 禁用所有按钮
$("a, button").attr("disabled", "disabled").addClass("ui-disabled");
}
// 自定义隐藏加载函数
function hideLoading() {
$.mobile.loading("hide");
// 启用所有按钮
$("a, button").removeAttr("disabled").removeClass("ui-disabled");
}
// 使用示例
$("#myButton").on("click", function() {
showLoading();
// 模拟异步操作
setTimeout(function() {
hideLoading();
}, 2000);
});
// 保存原始加载方法
var originalLoading = $.mobile.loading;
// 重写加载方法
$.mobile.loading = function(method, options) {
if (method === "show") {
// 显示加载时禁用所有按钮
$("a, button").attr("disabled", "disabled").addClass("ui-disabled");
} else if (method === "hide") {
// 隐藏加载时启用所有按钮
$("a, button").removeAttr("disabled").removeClass("ui-disabled");
}
// 调用原始方法
originalLoading.apply(this, arguments);
};
mobileinit
事件中)ui-disabled
类可以确保样式正确这些方法可以确保在加载过程中用户无法与页面交互,从而避免意外行为,同时保持应用的专业性和用户体验。