2

リストビューセルでjqmスタイルのチェックボックスを使用したいのですが。目的の最終結果を示すために合成画像を作成しました。

http://tinyurl.com/ctvko27

ラベル付きのjqmチェックボックスを使用すると、フレームワークから大きなスタイルが取得されますが、これは望ましくありません。フィールドセット機能は常に挿入されており、リストの幅を100％にする必要があるため、フィールドセット機能は使用しません。リストビューセルの一部として、完全なスタイルのチェックボックスを単独で使用できるようにしたい。私の質問が明確であり、誰かがいくつかのガイダンスを提供できることを願っています。

よろしく、Ivo

4

3 に答える 3

4

解決

これがあなたのための解決策です。私は暇だったので、ここにあります：http://jsfiddle.net/Gajotres/ek2QT/

Javascript コード:

First on pagebeforeshow カスタム チェックボックスを選択/選択解除します。

$('#index').live('pagebeforeshow',function(e,data){
    $('input[type="checkbox"]').each(function(){
        ($(this).is(':checked')) ? $(this).parent().parent().addClass('checked') : $(this).parent().parent().addClass('not-checked');   
    });
});

この部分は、チェックボックスの状態の変更を処理します。

$('.checkBoxLeft').bind('click', function(e) {
    if($(this).find('input[type="checkbox"]').is(':checked')){
        $(this).removeClass('checked').addClass('not-checked');
        $(this).find('input[type="checkbox"]').attr('checked' , false);
    } else {
        $(this).removeClass('not-checked').addClass('checked');             
        $(this).find('input[type="checkbox"]').attr('checked' , true);
    }
});

残りの CSS は例にあります。カスタム状態に使用される img は次の場所にあります。

最終的な注意事項

jQuery Mobile ページとウィジェットをカスタマイズする方法について詳しく知りたい場合は、この記事をご覧ください。jQuery Mobile に !important が必要な理由など、多くの実用的な例が付属しています。

于 2012-11-29T21:07:18.947 に答える
0

うまくいくかもしれないいくつかのアプローチがあります。ハイパーリンク<a />タグのチェックボックスの先頭を配置してみてください。チェックボックスの自動拡張を無効にすることもできます。基本的に、タッチイベントと2つのコントロールのオーバーラップで問題が発生します。

<input type="checkbox" data-role="none" />
于 2012-11-29T19:28:24.600 に答える
0

jquery (1.9.1) + jquerymobile (1.3.2) の最新バージョンで Gajotre のソリューションを使用しようとしましたが、残念ながら機能しませんでした。

変更する必要があります

$(this).find('input[type="checkbox"]').attr('checked' , false);
$(this).find('input[type="checkbox"]').attr('checked' , true);

に

$(this).find('input[type="checkbox"]').prop('checked' , false);
$(this).find('input[type="checkbox"]').prop('checked' , true);

そうしないと、チェックボックスの「チェック済み」の値を一度だけ変更できます。

于 2013-10-09T17:56:37.837 に答える