如何自定义水平jQuery-mobile单选按钮
如何自定义水平jQuery-mobile单选按钮
提问于 2013-02-01 17:47:24
我们的客户需要为jQuery-mobile定制设计单选按钮样式。实际上，它非常类似于水平模式下的默认jQuery-mobile单选按钮设计。例如，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是否允许我们显示默认的单选按钮？如果是这样，你能举个例子吗？
或者我们应该定制这个？
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-02-01 18:49:43
解决方案
首先，这不能通过jQM配置来完成。这必须通过jquery手动创建(就像任何其他jQM小部件一样，包括字段集)。
我已经为您创建了一个工作示例：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移动页面和小部件的信息，请查看此。它附带了许多工作示例，包括为什么！对jQuery移动来说是必要的。
Stack Overflow用户
发布于 2014-05-14 13:32:32
不需要css或javascript；这是您使用的元素和类的问题，例如：
<div id="test_content" class="ui-content" data-role="main" data-theme="b">
<fieldset class="ui-controlgroup ui-corner-all">
<div class="ui-grid-b ui-controlgroup-controls" style="width: 560px;">
<div class="ui-block-a">
<input name="invoicing_filter_type" id="invoicing_filter_tobeinvoiced"
value="1|4" type="radio" data-mini="true" data-iconpos="bottom">
<label for="invoicing_filter_tobeinvoiced">To be invoiced</label>
</div>
<div class="ui-block-b">
<input name="invoicing_filter_type" id="invoicing_filter_pending"
value="9|5" type="radio" data-mini="true" data-iconpos="bottom">
<label for="invoicing_filter_pending">Invoices pending</label>
</div>
<div class="ui-block-b">
<input name="invoicing_filter_type" id="invoicing_filter_tobereleased"
value="9|6" type="radio" data-mini="true" data-iconpos="bottom">
<label for="invoicing_filter_tobereleased">Invoices to be released</label>
</div>
</div>
</fieldset>
</div>请注意，这里不使用data-role。对应的fiddle
Stack Overflow用户
发布于 2013-02-01 18:15:20
这就是你要找的吗？
使用CSS
.myclass2 {
background-color: yellow;
float: left;
margin-top: 11px;
}
.myclass {
background-color: yellow;
float: left;
left: 13px;
margin-top: 26px;
padding-left: 22px;
position: relative;
top: 10px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14643485
复制相关文章
相似问题
腾讯云开发者
