Какой вид HTML/JS-виджета отображает этот элемент управления balsamiq?

Question

я сделал макетах в Balsamiq & они это хороший виджет, который

• Разрешенные для выбора значения из двух значений. Работает очень хорошо на тачскринов
• Может использоваться для отображения двух значений & выделения одного выбранного

Пример:

Что варианты реализации виджета, похожий на показанный на рисунке с помощью HTML/CSS & JS?

Answer 1

Подход я представляю ниже итерацию через все fieldset элементов, и если все входы в них имеют type="radio", скрывает их и добавляет span элементы (из class="buttonRadio") на их месте, используя текст из их соответствующих label элементов. Он также связывает click события с прилагаемыми span элементов, и запускает change события на оригинальных input с, а также добавляет «проверил» имя-класса на щелкнутый/прикоснулись элемент, при удалении этого класса это от своих братий и сестер:

$('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.

---

Отредактированный внести поправки в 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 Fiddle demo.

Ссылки:

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