3

最近我在 Stackoverflow 上问了一个问题，即如何自定义水平 jQuery-mobile 单选按钮，您也可以从这个链接查看帖子如何自定义水平 jQuery-mobile 单选按钮。一位开发人员非常粗略地用非常好的 JSFiddle 示例回答了这个问题。根据他的指示，我实现了自定义 JQuery Mobile 单选按钮，并且在桌面浏览器中一切正常。

但是，当我检查实际设备（Galaxy S 2、iPhone 5、Mac 模拟器和 Android 模拟器）时，它的工作方式不像桌面浏览器那样工作。我不确定这里出了什么问题，但我可以理解我需要做一些小调整来支持实际设备。因此，我不擅长 JS，任何人都可以尽快研究一下。

这是Gajotres http://jsfiddle.net/Gajotres/779Kn/完成的上一个 JSFiddle 示例

$(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 仅供参考：我尝试从上一篇文章继续，但由于负责的开发人员无法回答或检查上一个问题，我创建了一个新帖子。

4

2 回答 2

3

你真的需要耐心，我在度假:)

这是一个工作示例：http: //jsfiddle.net/Gajotres/779Kn/20/

这个版本应该适用于触摸设备和桌面浏览器：http: //jsfiddle.net/Gajotres/779Kn/21/

点击事件更改为touchstart事件，现在它也适用于移动设备。

$(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);
        }        
    });   
});
于 2013-04-02T08:19:16.187 回答
1

只是一个额外的评论（以防将来有人遇到这个问题） - 较新版本的 JQueryMobile 提供“vclick”事件，这与在移动设备上寻找“触摸启动”和在桌面上寻找“点击”相同浏览器。

于 2014-08-27T04:49:55.817 回答