jquery - 如何自定义水平jQuery移动单选按钮

我们的客户需要jQuery mobile的自定义设计单选按钮样式。实际上，它与水平模式下默认的jQuery移动单选按钮设计非常相似。例如jQuery mobile将水平单选按钮定义为

<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>I like to buy and wear trendy must-haves</legend>
    <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked"  />
    <label for="radio-choice-1">1</label>

    <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"  />
    <label for="radio-choice-2">2</label>

    <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3"  />
    <label for="radio-choice-3">3</label>

    <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4"  />
    <label for="radio-choice-4">4</label>

    <input type="radio" name="radio-choice" id="radio-choice-5" value="choice-5"  />
    <label for="radio-choice-5">5</label>
</fieldset>

此外，我们的客户希望在lablel下面显示默认单选按钮。例如下图
我想知道jQuery mobile是否允许我们显示默认的单选按钮？如果是，你能举个例子吗？
或者我们需要定制这个？

最佳答案

解决方案
首先，它不能通过jQM配置完成。这必须通过jquery手动创建（类似于任何其他jQM小部件，包括fieldset）。
我已经为您创建了一个工作示例：http://jsfiddle.net/Gajotres/779Kn/
你只需要再做一件事，我不想打扰自定义图像，所以我使用为我的另一个示例创建的图像：https://stackoverflow.com/a/13634738/1848600
这里需要一个javascript：

$(document).on('pagebeforeshow', '#index', function(){
    $('<div>').addClass('checkBox').appendTo('fieldset div div.ui-radio label');
    $('input[type="radio"]').each(function(){
        ($(this).is(':checked')) ? $(this).next().find(".checkBox").addClass('checked') : $(this).next().find(".checkBox").addClass('not-checked');
    });

    $(document).on('click', '.ui-radio', function(){
        $('input[type="radio"]').each(function(){
            $(this).next().find(".checkBox").addClass('not-checked').removeClass('checked');
        });

        if($(this).find('input[type="radio"]').is(':checked')){
           $(this).find('label div.checkBox').removeClass('checked').addClass('not-checked');
           $(this).find('input[type="radio"]').attr('checked' , false);
        } else {
           $(this).find('label div.checkBox').removeClass('not-checked').addClass('checked');
           $(this).find('input[type="radio"]').attr('checked' , true);
        }
    });
});

这里是css：

.checkBox{
    width: 18px;
    height: 18px;
    background: #d9d9d9;
    border-radius: 3px;
    margin: 0 auto;
    margin-bottom: 5px;
}

.not-checked, .checked {
    background-image: url("http://www.fajrunt.org/icons-18-white.png");
    background-repeat: no-repeat;
}

.not-checked {
    background-position: -18px 0;
    background-color:#d9d9d9;
}

.checked {
    background-position: -720px 0;
    background-color:#6294bc;
}

如果你能等几个小时，我会更新一张照片，我不能从我现在的位置。
最后说明
如果您想了解更多关于如何定制jQuery Mobile页面和小部件的信息，那么请查看这个article。它有很多工作的例子，包括为什么！对jQuery Mobile很重要。