이 balsamiq 컨트롤을 표시 할 HTML/JS 위젯은 무엇입니까? balsamiq &에서

Question

나는 한 모형 그들은

• 두 값에서 값을 선택하도록 허용이 좋은 위젯을 보유하고 있습니다.
• 선택된 하나

예 강조 &을 두 개의 값을 표시하는 데 사용할 수 있습니다 터치 스크린에 정말 잘 작동 : HTML/CSS를 통해 그림과 같이 할 수있는 옵션이 유사한 위젯을 구현하기 위해 무엇

& JS?

Answer 1

I 모든 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. JQuery와 조금 개정을 편집

---

:

1. 이 버전에서 조금 일찍 $(this) 객체를 캐시를,
내가 처음 화신에 할당 된 legend 변수를 사용하는 기억
2. 하지만 실제로 한숨 쉬는 걸 잊었 어. 한숨.

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