哪个HTML/JS小部件显示此balsamiq控件？

Question

在Balsamiq工作室&我做样机他们有这个漂亮的小部件，它

• 允许选择一个值，出两个值。作品真的很好地在触摸屏上
• 可用于显示两个值&突出显示所选一个

实施例：

什么选项，来实现类似的窗口小部件，以通过HTML/CSS显示在画面& JS？

Answer 1

我提出下面遍历所有fieldset元件，并且如果所有的输入是在其中的type="radio"，隐藏它们和附加在其位置（的class="buttonRadio"）span元件，使用从它们的相关label元件文本的方法。它还结合click事件所附span元素，并触发对原input S上的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。

---

编辑修改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()。