jquery-mobile - 页面加载小部件中的 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

在单页中

此处提供加载程序的文档。另请查看与您非常相关的文档。

您应该执行以下操作

$(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>

设置为全局

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