jquery-mobile 单选按钮中的数据图标

Question

我希望用data-icons in jquery mobile 中的一些图标替换我的单选按钮的文本。我的代码是这样的，on jsfiddle

<div data-role="page">
    <div data-role="content">
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup"><legend>Choose a direction:</legend>
                <input type="radio" name="1" id="1" value="1" />
                <label for="1">Up</label>
                <input type="radio" name="1" id="2" value="2" />
                <label for="2">Down</label>
            </fieldset>
        </div>
    </div>
</div>

我想将“向上”替换为 data-icon="arrow-u"，将“向下”替换为 data-icon="arrow-d"。 This answer 展示了如何替换为外部图像，但是数据图标呢？

Answer 1

这是一个工作示例：http://jsfiddle.net/Gajotres/wL2gQ/

我希望这是你想要的。

HTML：

<div data-role="page" id="radio-icons"> 
    <div data-role="content"> 
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
                <label for="radio-choice-1" ><div id="custom-label"><span class="ui-icon ui-icon-bars ui-icon-shadow up">&nbsp;</span></div></label>

                <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
                <label for="radio-choice-2"><div id="custom-label"><span class="ui-icon ui-icon-bars ui-icon-shadow down">&nbsp;</span></div></label>
            </fieldset>
        </div>
    </div>
</div>

CSS ：

#custom-label {
    width: 18px;    
    height: 18px;
    background-color: rgba(0, 0, 0, 0.4);
    background-image: url("images/icons-18-white.png");
    background-repeat: no-repeat;
    border-radius: 9px 9px 9px 9px;  
}

#custom-label span {
    left: 45px !important;
    margin-top: -7px;
}

#custom-label span.up {
    background-position: -180px -1px !important;    
}

#custom-label span.down {
    background-position: -216px -1px !important;    
}