2011-11-29 96 views
26

似乎jQuery手机在启动页面附加了加载消息。我真的不知道发生了什么事情,但考虑下面这个简单的代码片段:jQuery手机将“加载标题”附加到页面

<!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)。

回答

37

您必须添加CSS过,那么这将是罚款:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 

详细:

它总是把下面的HTML在你的身体的底部:

<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; } 

功能showPageLoadingMsg添加CSS类“的.ui加载”到HTML标记,然后将它变为可见

+0

除了CSS和所有这些框架都做同样令人讨厌的事情 - 并试图覆盖基本元素的布局首选项,如 ... –

+0

我该如何阻止它放置h1? – Jayen

16

您可以通过以下之前,您加载jQuery的移动图书馆停止autoInitializePage

jQuery(document).on("mobileinit", function() { 
    jQuery.mobile.autoInitializePage = false; 
}); 

此处了解详情:http://api.jquerymobile.com/global-config/

2

添加到您的JS文件的顶部

$.mobile.autoInitializePage = false;