jquery mobile单选按钮图标 [英] jquery mobile radio button icon

问题描述

我有一个分组的单选按钮(分组时它们看起来像普通的 jquery 按钮).而不是文本，我希望在其上显示一个图标(或小图像).谁能教我如何在 jquery mobile 上做到这一点?

解决方案

实例:

• http://jsfiddle.net/uZeDz/6/

例子:

<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"/><label for="radio-choice-2"><img src="http://images.findicons.com/files/icons/8/dog/48/48_dog4.png"/></标签>

hi I have a grouped radio buttons (they look like normal jquery buttons when grouped). and instead of text, i want an icon (or a small image) to be displayed on it. could anyone teach me how can i do this on jquery mobile?

解决方案

Live Example:

• http://jsfiddle.net/uZeDz/6/

Example:

<div data-role="page" id="radio-icons"> 
    <div data-role="content"> 
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>Choose a pet:</legend>
                     <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
                <label for="radio-choice-1"><img src="http://cdn2.iconfinder.com/data/icons/Snow/Snow/snow/Cat.png" /></label>

                     <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
                <label for="radio-choice-2"><img src="http://images.findicons.com/files/icons/8/dog/48/48_dog4.png" /></label>

                     <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
                <label for="radio-choice-3"><img src="http://icon.downv.com/32x32/5/142/1070746.0048c51761d5b53e5a2297e458ba0ff7.gif" /></label>

                     <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
                    <label for="radio-choice-4"><img src="http://cdn6.droidmill.com/media/market-media/com.tinyminds.android.widgets.lizardbattery_icon.png" /></label>
            </fieldset>
        </div>
    </div>
</div>

这篇关于jquery mobile单选按钮图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！