标题中的jquery mobile自定义图标未显示答案

【问题标题】：jquery mobile custom icon in header not showing标题中的jquery mobile自定义图标未显示
【发布时间】：2013-05-28 16:42:26
【问题描述】：

我到处搜索，查看了所有答案，但仍然找不到适合自己的解决方案。链接数据图标中的自定义 png 图像未显示在标题中。这是我的结构：

<div data-theme="b" data-role="header" data-position="fixed" data-tap-toggle="false" style="height:100px">
    <img style="width:100%; height:100px" src="style/images/appbg.png" alt="Header"/>
    <a data-role="button" data-iconpos="left" data-icon="my-home">Home</a>
</div>

在头部我有：

<style>.ui-icon-my-home{background-image: url("style/images/home.png");}</style>

看起来应该可以了。我尝试添加样式 50% 50% no-repeat，尝试将其添加到 css 文件中……没有任何效果。

我正在使用 jquery 2.0 min、jquery-mobile-1.3.1.min 和 jquery-mobile-1.3.1.min.css。也许这些新版本不起作用？我应该使用旧版本吗？

我还要先加载 CSS，然后是 jQuery，最后是 jQuery Mobile。另一件事是，当我执行常规 img 标签时，图像会显示出来……所以路径是正确的。只有当我尝试将图像输入到链接数据图标中时，它才会显示出来。请帮帮我...

【问题讨论】：

home.png 是否真的存在于您指定的位置？此外，您的 html 中没有 ui-icon-my-home 类，但它可能是由 jQuery 添加的。
home.png 位于 (Phonegap Eclipse) assets-www-style-images 中。 JQM 位于样式文件夹中。从其他示例中，当我想将图标设置为 .ui-icon-my-home{}... 时，设置 data-icon="my-home" 应该可以工作
告诉我您是使用 1 个 html 多页模板还是使用多个 HTML 文件，如果您使用多个 HTML 文件，这是您的第一个 HTML 文件还是其他任何文件？这很重要。
@Gajotres 你是对的。这是我的第二个 HTML 文件。我将代码插入到我的初始 index.html 文件中，图像显示在我的第二个 html 文件中。我真的很讨厌所有页面的这种 JQM ajax 加载......它是如此不同和令人困惑。在第一页插入代码以更改第三页...我不喜欢它但有什么替代方案？？？

标签： jquery css jquery-mobile background-image

【解决方案1】：

我可以看出你已经理解了我的问题，我必须承认我喜欢能看穿问题的人。

如果你想了解这个问题，你需要了解jQuery Mobile works。如果以标准方式使用，它会将所有内容存储在 DOM 中，因此使用的每个 HTML 页面都将存储在 DOM 中。如果您不知道发生了什么，这可能会导致问题，不幸的是，即使您查看了官方文档，您也不会发现这一点。

只有第一页被完全加载，从其他页面开始，只有 BODY 被加载，即使这样也只有 data-role="page" DIV。其他一切都将被丢弃。不幸的是，事情就是这样，所以你需要小心。在我之前的链接中，您可以找到一些预防方法。

其他问题是 id 的。因为 DOM 是如何工作的，所以你可以在里面拥有相同的 id，但是如果你试图以某种方式访问它们，只会访问第一个。基本上你需要确保每个页面都有一个唯一的 ID。其余内容可以相同，因为 jQuery Mobile 有一个不错的选择器：

 $.mobile.activePage

可用于访问当前活动页面中的当前数据，例如：

$.mobile.activePage.find('someID');

【讨论】：