如何自定义水平 jQuery-mobile 单选按钮

2022-01-21 00:00:00 radio-button jquery html css jquery-mobile

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

Our client need a custom design radio button style for the jQuery-mobile. Actually it's very similar to default jQuery-mobile radio button design in horizontal mode. For example jQuery-mobile define the horizontal radio button as 

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

此外，我们的客户希望在 labell 下方显示默认单选按钮.例如下面的图片

Additionally our client wants to display the default radio button below the lablel. For example following image

我想知道 jQuery-mobile 是否允许我们显示默认单选按钮?如果可以，你能举个例子吗?

I would like to know does jQuery-mobile allow us to display the default radio buttons ? If so can you give an example ?

还是我们需要自定义这个?

Or should we need to customize this ?

推荐答案

解决方案

首先，它不能通过 jQM 配置来完成.这必须通过 jquery 手动创建(与任何其他 jQM 小部件一样，包括字段集).

Solution

First thing, it can't be done through the jQM configuration. This must be created manually through a jquery (like any other jQM widget, including fieldset).

我为您创建了一个工作示例:http://jsfiddle.net/Gajotres/779Kn/

I have created an working example for you: http://jsfiddle.net/Gajotres/779Kn/

您只需要再做一件事，我不想打扰自定义图像，所以我使用为我的另一个示例创建的图像:https://stackoverflow.com/a/13634738/1848600

Your only need to do one more thing, I didn't want to bother with a custom images so I am using images created for my other example: https://stackoverflow.com/a/13634738/1848600

这里需要一个javascript:

Here's an javascript needed:

$(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;
}

如果你能等几个小时，我会更新一张图片，我不能从我当前的位置更新.

If you can wait few hours I will update a picture, I can't do it from my current location.

如果您想了解有关如何自定义 jQuery Mobile 页面和小部件的更多信息，请查看此 文章.它附带了许多工作示例，包括为什么 !important 对于 jQuery Mobile 是必需的.

If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.

相关文章