CODEWITHSUNDEEP
jquery-mobile
Mad Echet
Mad Echet

Reputation: 3881

JQuery Mobile - Put a data-icon in addition to the checkbox in an input checkbox

I would like to put a nice little data-icon="star" on some chekbox labels of a group of checkboxes. Is there a way to do so using jQuery data-icon or should I just do it directly in the CSS (in which case how do I get the same rendering as the one of data-icon?).

In a dream world, here is what would work:

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

Thanks a lot for your help

Upvotes: 2

Views: 5558

Answers (2)

Elek Cseh
Elek Cseh

Reputation: 11

I am not sure if this is only available in the latest jQuery mobile (1.4.5) but you can just add ui-icon via the "class" attribute. So for this example it would look like this:

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

Upvotes: 1

shanabus
shanabus

Reputation: 13115

You would have to use your own custom CSS or JS to do this, data-icon only works with a tags per the documentation: http://jquerymobile.com/test/docs/buttons/buttons-icons.html

This is even more tricky because the icon's are entered as styled spans which is exactly how the jqm checkbox is rendered - they both use the ui-icon for some base styling and positioning.

If you tried to use a jquery function to append it after the jqm styling has worked its magic like so: http://jsfiddle.net/shanabus/zt7cP/1/ - but again, the styling conflicts with the actual checkbox, but the functionality of the checkbox is still there.

Hope this gets you going in the right direction.

Upvotes: 1

Related Questions