1

ラジオ ボタンの機能を再現できる CSS ツールキットはありますが、グリッドに配置された写真や画像を使用していますか? たとえば、レンタカー サイトの自動車モデルのグリッドでは、ユーザーは車の写真をクリックして、レンタル アプリケーションに適した車両を選択する必要があります。

これは HTML 選択メニュー ウィジェットに似ていますが、次の点が異なります。

  • レイアウトはグリッドであり、項目の行ではありません (つまり、折り返す必要があります)。
  • 現在選択されているアイテムは永続的で常に表示され、オプションでチェックマーク (または選択を示すその他のアイコンベースのインジケーター) が表示されます。
  • ブラウザのサイズが変更されたときに、グリッドがインテリジェントに配置される (行と列が再計算される) と便利です。
  • また、単一選択 (ラジオ ボタン) モードと複数選択 (チェックボックス ボタン) モードのどちらかを選択できるオプションがあると便利です。

これは簡単だと思っていましたが、このようなものを見つけるのに本当に苦労しました。JQuery UI ボタン​​の機能は近いですが、(私が思うに) 画像中心のボタンやリフロー グリッドは提供していません。

4

1 に答える 1

2

これはあなたのために働くはずです。各車をでDIV包み、チェックボックスを中に入れてから、チェックボックスの画像をで包みlabelます。画像をクリックすると、チェックボックスがオンになります。

次に、jQueryはラッピングのクラスDIVをselectedに変更し、車が選択されていることを明確にするためにスタイルを設定できるようにします。

jQuery 

jQuery(document).ready(function ($) {
    'use strict';
    $('input:checkbox').click(function () {
        $(this).closest('.photo').toggleClass('selected');
    });
});

HTML

<div class="photo">
    <input type="checkbox" name="image[0][status]" value="1" />
    <label for="image[0][status]">
        <img src="#" />
    </label>
</div>
于 2012-04-17T23:54:55.970 に答える