Question

我想在一组复选框的一些chekbox标签上放一个漂亮的小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进行基本样式和定位。

如果你尝试使用jquery函数在jqm样式运行之后附加它：http://jsfiddle.net/shanabus/zt7cP/1/ - 但同样，样式与实际的复选框冲突，但复选框的功能仍然是那里。

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

Answer 2

我不确定这是否仅适用于最新的jQuery mobile（1.4.5），但您可以通过“class”属性添加ui-icon。所以对于这个例子，它看起来像这样：

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

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

2 个答案: