1

私はbalsamiqでモックアップを作成しましたが、この素敵なウィジェットがあります。

  • 2つの値から値を選択できます。タッチスクリーンで本当にうまく機能します
  • 2つの値を表示し、選択した値を強調表示するために使用できます

例： ウィジェット

HTML / CSSとJSを介して画像に示されているようなウィジェットを実装するためのオプションは何ですか？

4

1 に答える 1

2

以下に示すアプローチは、すべての要素を反復処理しfieldset、その中のすべての入力が of のtype="radio"場合、それらを非表示にして、関連する要素のテキストを使用してspan要素 (of class="buttonRadio") をその場所に追加しlabelます。またclick、追加された要素にイベントをバインドし、元の でイベントspanをトリガーし、クリック/タッチされた要素に「チェック済み」のクラス名を追加し、兄弟からそのクラスを削除します。changeinput

$('fieldset').each(
    function() {
        var legend = $(this).find('legend').text();
        if ($(this).find('input').length == $(this).find('input[type="radio"]').length) {
            var that = $(this),
                len = that.find('input[type="radio"]').length;
            for (var i = 0; i < len; i++) {
                $('<span />')
                    .text($('label')
                          .eq(i).text())
                    .addClass('buttonRadio')
                    .attr('data-fromID',that.find('input:eq(' + i + ')').attr('id'))
                    .appendTo(that);
            }
        }
    }).on('click','.buttonRadio',function(){
        var id = $(this).attr('data-fromID');
        $(this).addClass('checked').siblings().removeClass('checked');
        $('#' + id).click().trigger('change');
    }).find('label, input[type="radio"]').css('display','none');​

これは、次の CSS を使用してこれらの要素のスタイルを設定します。

.buttonRadio {
    background-color: #fff;
    padding: 0.5em 1em;
    border: 1px solid #000;
    margin: 0.5em 0 0 0;
}

.buttonRadio.checked {
    background-color: #ffa;
}​

JS フィドルのデモ。

jQueryを少し修正するために編集しました：

  1. $(this)このバージョンでは少し前にオブジェクトをキャッシュし、
  2. 最初の化身で割り当てた変数を使用することを覚えていましlegendたが、実際に使用するのを忘れていました...ため息。

  3. 実際の<legend></legend>要素も隠しました：

    $('fieldset').each(
    function() {
        var that = $(this),
            legend = that.find('legend').text();
        $('<span />').text(legend).addClass('legend').appendTo(that);
        if (that.find('input').length == that.find('input[type="radio"]').length) {
            var len = that.find('input[type="radio"]').length;
            for (var i = 0; i < len; i++) {
                $('<span />')
                    .text($('label')
                      .eq(i).text())
                    .addClass('buttonRadio')
                    .attr('data-fromID',that.find('input:eq(' + i + ')').attr('id'))
                    .appendTo(that);
            }
        }
    }).on('click','.buttonRadio',function(){
        var id = $(this).attr('data-fromID');
        $(this).addClass('checked').siblings().removeClass('checked');
        $('#' + id).click().trigger('change');
    }).find('label, input[type="radio"], legend').css('display','none');​

JS フィドルのデモ。

参考文献:

于 2012-04-01T20:19:33.837 に答える