页面加载小部件中的JQuery Mobile自定义HTML

Question

如何为JQuery Mobile Web应用程序的页面加载窗口小部件设置自定义HTML？

我尝试了以下内容：

$(document).on('mobileinit', function(){
    $.mobile.loader.prototype.options.html = "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='/image/logo.png' /><h2>loading...</h2></span>";
});

但它仍然显示默认图像。我希望有一个全局配置。

Answer 1

单页

loader available here的文档。另请查看此documentation much relevant to you。

您应该执行以下操作

$(document).ready(function() {
  $.mobile.loading('show', {
    text: 'foo',
    textVisible: true,
    theme: 'z',
    html: "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='http://www.shougun.it/images/loading.gif' /><h2>loading...</h2></span>"
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page">
  <div data-role="header">
    <h1>header</h1>
  </div>
</div>

设置为全局

它需要在<script src=jquery.js>之前<script src=jquerymobile.js>但必须在mobileinit事件之前调用。你在加载jQuery Mobile js之前导入了js吗？