最近我在Stackoverflow上问了一个问题,如何定制水平jQuery-mobile单选按钮你也可以从这个链接查看文章如何定制水平jQuery-mobile单选按钮。一个开发人员用一个非常好的JSFiddle示例粗略地回答了这个问题。根据他的指示,我实现了自定义JQuery移动单选按钮,它在桌面浏览器中都工作得很好。
然而,当我检查实际设备(Galaxy S 2, IPhone 5, Mac模拟器和Android模拟器)时,它的工作方式不像桌面浏览器那样。我不确定这里有什么问题,但我可以理解我需要做一个小调整来支持实际设备。我不擅长JS,因此,有没有人能尽快调查一下这个问题。
下面是前面的JSFiddle示例,由Gajotres http://jsfiddle.net/Gajotres/779Kn/
$(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);
}
});
});
.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;
}
我创建了一个单独的链接,希望这将帮助您快速检查设备。http://www.apartmentslanka.com/ztest_calender/radio.html
*Stackoverflow仅供参考:我试图继续从以前的帖子,但由于负责任的开发人员无法回答或检查最后一个问题,我创建了一个新的帖子。
你真的需要耐心点,我在度假。
下面是一个工作示例:http://jsfiddle.net/Gajotres/779Kn/20/
这个版本应该可以在触摸设备和桌面浏览器上工作:http://jsfiddle.net/Gajotres/779Kn/21/
Click event更改为touchstart event,现在也可以在移动设备上使用。
$(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('touchstart', '.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);
}
});
});
只是一个额外的注释(以防将来有人碰巧遇到这个问题)- JQueryMobile的新版本提供了"vclick"事件,这与在移动设备上查找"touch start"和在桌面浏览器上查找"click"是一样的。