2

私たちのクライアントは、jQuery-mobile用のカスタムデザインのラジオボタンスタイルを必要としています。実際には、デフォルトのjQuery-水平モードのモバイルラジオボタンのデザインと非常によく似ています。たとえば、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でデフォルトのラジオボタンを表示できるか知りたいのですが？もしそうなら、あなたは例をあげることができますか？

または、これをカスタマイズする必要がありますか？

4

3 に答える 3

4

解決

まず、jQM構成では実行できません。これは、jqueryを介して手動で作成する必要があります（フィールドセットを含む他のjQMウィジェットと同様）。

私はあなたのために実用的な例を作成しました：http：//jsfiddle.net/Gajotres/779Kn/

もう1つ行う必要があるのは、カスタムイメージに煩わされたくなかったため、他の例用に作成されたイメージを使用していることです：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のページとウィジェットをカスタマイズする方法について詳しく知りたい場合は、この記事をご覧ください。jQuery Mobileに！importantが必要な理由など、多くの実用的な例が付属しています。

于 2013-02-01T10:49:43.077 に答える
2

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は使用されないことに注意してください。対応するフィドル

于 2014-05-14T05:32:31.880 に答える
0

これはあなたが探しているものですか

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

于 2013-02-01T10:15:20.083 に答える