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

Question

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

<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是否允许我们显示默认的单选按钮？如果是的话，你可以举个例子吗？

或者我们是否应该定制这个？

Answer 1

解决方案

第一件事是什么，它不能被通过JQM的配置来完成。这必须通过jquery手动创建（与其他任何jQM小部件一样，包括fieldset）。

我已经创建了一个工作示例为您提供：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 Mobile的页面和窗口小部件，然后看看这个article。它附带了很多工作示例，其中包括为什么对于jQuery Mobile来说非常重要。

Answer 2

这是你正在寻找

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

Answer 3

没有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> 

请注意，此处不使用数据角色。对应fiddle