0

jQuery Mobile では、ユーザーがタップして選択できるアイテムの垂直リストが必要です。

私が欲しい：

  1. フィルター バー (ユーザーが最初に項目のサブグループを検索し、それらの中から選択できるようにするため)
  2. 挿入ビューなし (全幅、角丸なし)
  3. アイテムが現在選択されているかどうかを示す右側のチェックボックス
  4. アイテムの表面全体がチェックボックスを有効にします

これは、jQM サムネイル リストビューの動作をフィルター (上記のポイント 1. および 2.) およびチェックボックス フィールドセット (ポイント 3. および 4.) と組み合わせることを意味します。

これまでの私の試みは次のように失敗しました: - checkfox フィールドセットにはフィルターがなく、常に挿入されています - リストビューは<input>、<label>アイテムが使用されている場合でも、jQM スタイルのチェックボックスを表示しません (私が知る限り)

どんな助けでも大歓迎です。

jQuery Mobile 1.2.0 の使用

4

1 に答える 1

0

この例を見て、必要なものを追加してください。これは完全な要件ではありませんが、構築することができます。

これは元の例です。

  <li data-icon="false">
     <div class="checkBoxLeft">
        <input type="checkbox" name="checkbox-0" id="checkbox-0"/>
     </div>
     <a href="#" class="detailListText"> Message 1 </a>
  </li>

これで、li 要素とその子チェックボックスの間の相関関係を簡単に作成できるようになりました。

li 要素との対話中にチェックボックスをアクティブ化/非アクティブ化できるようにするには、次のコードを使用します。

長いです：

$('li').bind('click', function(e) {
    if($(this).find('input[type="checkbox"]').is(':checked')) {
        $(this).find('input[type="checkbox"]').prop('checked', false)    
    }  else {
        $(this).find('input[type="checkbox"]').prop('checked', true)
    }
});

短い：

$('li').bind('click', function(e) {
    $(this).find('input[type="checkbox"]').prop('checked', ($(this).find('input[type="checkbox"]').is(':checked')) ? false : true);    
});

これは、jQuery バージョン 1.6 以降で動作するはずです。

最終的な注意事項

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

于 2012-11-26T12:32:07.963 に答える