jquery-mobile – jQuery mobile追加“加载标题”到页面

前端之家收集整理的这篇文章主要介绍了jquery-mobile – 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与相同的结果,即使我从上周开始我的项目,它看起来不错。发生了什么事情<。< 在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; }

函数showPageLoadingMsg将CSS类’.ui加载’添加到HTML标记,然后它变得可见

猜你在找的jQuery相关文章