1

私のラジオ ボタンのテキストをjquery mobile の data-icons のアイコンに置き換えようとしています。私のコードはこのようなもので、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" に置き換えたい。 この回答は外部画像に置き換える方法を示していますが、データアイコンはどうですか?

4

1 に答える 1

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;    
}
于 2013-04-03T15:57:51.997 に答える