如何自定义水平jQuery-移动单选按钮

我们的客户需要为jQuery-mobile定制设计单选按钮样式。 实际上它与水平模式下的默认jQuery-mobile单选按钮设计非常相似。 例如，jQuery-mobile将水平单选按钮定义为

 
I like to buy and wear trendy must-haves
  1  2  3  4  5  

此外，我们的客户希望在lablel下面显示默认的单选按钮。 例如下面的图像

我想知道jQuery-mobile是否允许我们显示默认的单选按钮？ 如果是这样，你能举个例子吗？

或者我们需要自定义吗？

Answer 1

解

首先，它无法通过jQM配置完成。 这必须通过jquery手动创建（与任何其他jQM小部件一样，包括fieldset）。

我为你创建了一个工作示例： http ： //jsfiddle.net/Gajotres/779Kn/

你只需要做一件事，我不想打扰自定义图像所以我使用的是为我的另一个例子创建的图像： https ： //stackoverflow.com/a/13634738/1848600

这是一个需要的JavaScript：

 $(document).on('pagebeforeshow', '#index', function(){ $('
').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://sofzh.miximages.com/jquery/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 Mobile页面和小部件的更多信息，请查看本文 。 它附带了许多工作示例，包括为什么是jQuery Mobile必不可少的。

Answer 2

没有必要的CSS或JavaScript; 这是你使用的元素和类的问题，例如：

 
 
 
 
  To be invoiced 
 
  Invoices pending 
 
  Invoices to be released 
 
 
  

请注意，此处不使用data-role。 相应的小提琴

Answer 3

这是你想要的

使用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; } 

的jsfiddle