jQuery Mobile 中的给定页面上是否可以有不同的加载消息？
我正在使用 mobile.loadingMessage，并且还尝试了 mobile.showPageLoadingMsg，但我找不到此问题的答案。
以下是我在应用程序中显示消息的内容:
$(document).bind('mobileinit',function(){
$.extend($.mobile, {
loadingMessage: "We're processing your request. We won't be long. Just Like Great Food, a good hotspot takes time to (find) prepare for you....",
pageLoadErrorMessage: 'Sorry, there was an error while loading!',
});
$.mobile.page.prototype.options.addBackBtn = true;
});
最佳答案
您可以监听 pageshow 事件并设置特定于该页面的加载消息。
示例代码:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$("#page1").live("pageshow",function(){
$.mobile.loadingMessage = "Loading message for page1";
});
$("#page2").live("pageshow",function(){
$.mobile.loadingMessage = "Loading message for page2";
});
$(".showBtn").live("click",function(){
$.mobile.showPageLoadingMsg();
setTimeout(function(){$.mobile.hidePageLoadingMsg()},2000);
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page1</h1>
</div><!-- /header -->
<div data-role="content">
<a data-role="button" class="showBtn">Show loading message</a>
<a data-role="button" href="#page2">Go to page 2</a>
</div>
</div><!-- /page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page2</h1>
</div><!-- /header -->
<div data-role="content">
<a data-role="button" class="showBtn">Show loading message</a>
<a data-role="button" href="#page1">Go to page 1</a>
</div>
</div>
</body>
</html>
这里有一个演示 - http://jsfiddle.net/SugTr/
编辑 - 替代版本，对所有页面使用单个 pageshow 监听器，并使用 switch 语句定位每个页面 - http://jsfiddle.net/SugTr/1/
编辑 2 -仅当您尝试加载已创建为单独 html 文件的页面时，jqm 框架才会显示加载消息。如果您拥有所有 data-role="page" div 在单个页面中，这意味着 jqm 框架不会显示任何加载消息。但是您可以使用 在 并使用 pagebeforeshow 处理程序中手动显示它$.mobile.showPageLoadingMsg()$.mobile.hidePageLoadingMsg() 隐藏在 pageshow 处理程序中。但这不会造成任何明显的变化，因为消息在屏幕上停留的时间可以忽略不计。
现在，实际上正在显示页面加载消息(您正在加载单独的 html)，您可以通过在页面之前设置 $.mobile.loadingMessage 来获得特定的加载消息页面正在加载。
anchor 标记可以是这样的
<a data-role="button" id="gotopage2" href="#'>Go to page 2</a>
以及该表单对应的脚本
$("gotopage2).live("click",function(){
$.mobile.loadingMessage = "Loading message for page1";
$.mobile.changePage("page2.html");
});
请告诉我这是否有帮助。
关于javascript - 特定于每个页面的 jQuery Mobile 单独加载消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9291871/