jQuery mobile将“加载标题”添加到页面

时间:2011-11-29 15:34:33

标签: jquery-mobile

似乎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具有相同的结果。到底发生了什么&lt;。&lt;

查看jQuery Mobile' js我认为initializePage: function()负责此消息。我可以发表评论

//cue page loading message
$.mobile.showPageLoadingMsg();

或设置autoInitializePage: false但我宁愿选择一个不涉及修改过的jQuery文件的解决方案(除非它是一个bug)。

4 个答案:

答案 0 :(得分:38)

你也必须添加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 loading'添加到HTML标记,然后它变得可见

答案 1 :(得分:19)

您可以在加载jquery-mobile库之前使用以下内容停止autoInitializePage

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

此处有更多信息:http://api.jquerymobile.com/global-config/

答案 2 :(得分:2)

将其添加到JS文件的顶部

$.mobile.autoInitializePage = false;

答案 3 :(得分:0)

我遇到了这个问题,网站末尾(底部)的“正在加载”这个词是不变的,它很糟糕/很糟糕。 我是这样解决的:在谷歌浏览器中,在检查悬停词“加载”中,复制元素。我创建了一个样式并作为属性: display:none!important; 这是:

body > div.ui-loader.ui-corner-all.ui-body-a.ui-loader-default {
    display: none !important;
}