看起来jQuery mobile是在启动页面附加一个加载消息。我真的不知道发生了什么,但考虑以下简单的代码段:
<!DOCTYPE html> <html> <head> <title>sadFace</title> <Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> <Meta charset="utf-8" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <h1>;__;</h1> </body> </html>
我甚至不得不向下滚动看到加载消息。所以我认为这可能发生,因为我不遵循典型的jQuery移动页面解剖,但是:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>;_;</h1> </div><!-- /header --> <div data-role="content"> <p>Same shit,different page.</p> </div><!-- /content --> <div data-role="footer"> <h4><a href="http://www.google.com/pacman/">need cookies :C</a></h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
一样。我完全被这种行为吓坏了。我也测试jQuery1.0rc2与相同的结果,即使我从上周开始我的项目,它看起来不错。发生了什么事情<。< 在jQuery Mobile’ js查找我认为这个initializePage:function()负责消息。我可以评论
//cue page loading message $.mobile.showPageLoadingMsg();
或设置autoInitializePage:false,但我更喜欢一个不涉及修改的jQuery文件(除非它是一个bug)的解决方案。
解决方法
你必须添加CSS,那么它会很好:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
详细:
它总是把以下HTML放在你的body的底部:
<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div>
这是相关的CSS(所以也许你可以玩它自己,如果你想)
.ui-loading .ui-loader { display: block; } .ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; }