Question

我正在尝试使用Font Awesome的微调器来替代jQuery Mobile的加载器。这是我的代码：

        <script type="text/javascript">
            $(document).bind('mobileinit', function ()
            {
                $.mobile.loading("show",
                {
                    text: "",
                    textVisible: false,
                    theme: "z",
                    html: "<i class='fa fa-spinner fa-5x fa-spin'></i>"
                });
            });
</script>

这不起作用。我究竟做错了什么？如果我将包含fa-spinner的“i”标签放在页面本身中，那么我可以看到微调器。它只是没有包含在JQM中（我正在使用JQM 1.4.0）

Answer 1

您有两个选项，全局更改jQM默认微调器，或根据请求更改它。

全局：

覆盖mobileinit上的加载小部件选项。这将一劳永逸地替换默认选项。

<head>
  <link rel="stylesheet" href="jquery.mobile-1.4.0.min.css" />
  <link rel="stylesheet" href="font-awesome.css" />
  <script src="jquery-1.9.1.min.js"></script>
  <script>
    $(document).on("mobileinit", function() {
      $.mobile.loader.prototype.options.html = '<i class="fa fa-spinner fa-5x fa-spin"></i>';
    });
  </script>
  <script src="jquery.mobile-1.4.0.min.js"></script>
</head>

<强> Demo

根据要求：

$.mobile.loading("show", {
  html: '<i class="fa fa-spinner fa-5x fa-spin"></i>'
});

<强> Demo

如何在jQuery Mobile中使用Font Awesome的微调器

1 个答案: