Skip to main content
 首页 » 编程设计

jquery-mobile之jQuery mobile将 “loading heading”附加到页面

2024年10月24日20mengfanrong

看来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文件的解决方案(除非是错误)。

请您参考如下方法:

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