哪個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()。