如何自定义水平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>
此外,我们的客户端要显示 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 ://*.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://*.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.