在jquery移动列表中使用自定义图标 [英] Using custom icons in jquery mobile list

问题描述

我找到了有关使用 jQuery移动按钮的自定义图标的文档以及如何使用现有图标自定义列表但我无法找到如何将自定义图标添加到列表视图（即我创建自己的PNG）。

I have found documentation on using custom icons for jQuery mobile buttons and how to customize lists using existing icons but I am unable to find how to add custom icons to list views (i.e. PNGs I have created my self).

我已尝试设置 data-url ：

<li data-icon="action-arrow">...</li>

到png文件的名称，如 jQuery移动按钮但这不起作用。

to the name of the png file as explained in the jQuery mobile buttons but this doesn't work.

推荐答案

您需要为新图标添加CSS规则：

You need to add a CSS rule for your new icon:

.ui-icon-myapp-email {
    background-image: url("app-icon-email.png") !important;/*I added the !important, I found that this rule was being overwritten*/
}

Upadate：

你也可以让你的CSS规则比jQuery Mobile规则更具体，如下所示：

You can also just make your CSS rule more specific than the jQuery Mobile rule like so:

html .ui-icon-myapp-email {
    ...
}

这就是它，你应该是能够像这样引用它来使用这个图标：

That's about it, you should then be able to use this icon by referencing it like this:

<li data-icon="myapp-email"><a href="#">MY LI!!!</a></li>

请注意，如果中没有链接，则不会显示图标li 元素。

这是一个演示： http://jsfiddle.net/KYaQT/106/ （更新链接）

Here is a demo: http://jsfiddle.net/KYaQT/106/ (Updated Link)

这篇关于在jquery移动列表中使用自定义图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！