如何自定义水平jQuery-mobile单选按钮 [英] How to customize horizontal jQuery-mobile radio buttons

问题描述

我们的客户需要为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>

此外，我们的客户端要显示 lablel 。例如下面的图片

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

I想知道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 ?

推荐答案

/ h1>

首先，它不能通过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/

您的需要做一件事情，我不想打扰自定义图像，因此我使用为我的其他示例创建的图片： http ：//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: http://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移动版网页和小部件随后会查看此 文章 。它有很多工作示例，包括为什么是！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.

这篇关于如何自定义水平jQuery-mobile单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！