このバルサミコ制御を表示するHTML/JSウィジェットはどれですか？

Question

私は、彼らは2つの値のうちの、値を選択することが可

• この素敵なウィジェットを、持っているbalsamiq &でモックアップをしました。
• が選択された1つの

例の強調表示&を2つの値を表示するために使用できるタッチスクリーン上で本当に素敵な作品：HTML/CSSを経由して写真のようにオプションが同様のウィジェットを実装するためにどのような

& JS？

Answer 1

私はすべてfieldset要素を通じて反復の下に存在し、すべての入力がそこtype="radio"である場合に、それらの関連label要素からテキストを使用して、それらを非表示にし、その場所で（class="buttonRadio"の）span要素を追加アプローチ。また、追加span要素にclickイベントを結合し、元inputの上changeイベントをトリガし、また、それはその兄弟からそのクラスを除去しながら、クリックされた/触れた要素にクラス名を「確認」追加：

$('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 Fiddle demo。

1. は、少し前にこのバージョンでは、私が最初の化身で割り当てられたlegend変数を使用することを思い出し
2. を$(this)オブジェクトをキャッシュされた：jQueryのを少し修正するを編集

   ---

   実際には...一口を使うのを忘れてしまった。

   $('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 Fiddle demo：

はまた、実際の<legend></legend>要素を隠しました。

参考文献：

• addClass()。
• attr()。
• click()。
• css()。
• each()。
• eq()。
• find()。
• on()。
• removeClass()。
• siblings()。
• text()。
• trigger()。