JQuery Mobile-除了输入复选框中的复选框之外，还放一个数据图标

Question

我想在一组复选框的一些复选框标签上放一个漂亮的小data-icon="star"。有没有一种方法可以使用jQuery data-icon来做到这一点，或者我应该直接在CSS中完成它（在这种情况下，我如何获得与data-icon相同的渲染？）。

在一个梦幻世界里，以下是可行的方法：

<div data-role='fieldcontain' data-mini='true'>
<fieldset data-role='controlgroup'>
<input type='checkbox' name='cb1' id='cb1' />
<label for='cb1' data-icon='star'>special</label>
<input type='checkbox' name='cb2' id='cb2' />
<label for='cb2'>normal</label>
</fieldset></div>

非常感谢您的帮助

Answer 1

您必须使用自己的自定义CSS或JS才能做到这一点，根据文档，data-icon只能使用a标签：http://jquerymobile.com/test/docs/buttons/buttons-icons.html

这更为棘手，因为图标是以样式跨度的形式输入的，这正是jqm复选框的渲染方式——它们都使用ui-icon进行一些基本样式和定位。

如果您试图在jqm样式发挥其魔力后使用jquery函数来附加它，如下所示：http://jsfiddle.net/shanabus/zt7cP/1/-但是，样式与实际复选框冲突，但复选框的功能仍然存在。

希望这能让你朝着正确的方向前进。

Answer 2

我不确定这是否只在最新的jQuery mobile（1.4.5）中可用，但您可以通过"class"属性添加ui图标。因此，对于这个例子，它看起来是这样的：

<div data-role='fieldcontain' data-mini='true'>
<fieldset data-role='controlgroup'>
<input type='checkbox' name='cb1' id='cb1' />
<label for='cb1' class='ui-icon-star'>special</label>
<input type='checkbox' name='cb2' id='cb2' />
<label for='cb2'>normal</label>
</fieldset></div>