Welches HTML/JS-Widget zum Anzeigen dieses Balsamiq-Steuerelements?

Question

Ich habe Mockups in Balsamiq & sie haben dieses schöne Widget, das

• erlaubt einen Wert auszuwählen, aus zwei Werten. Funktioniert wirklich gut auf Touch-Screens
• verwendet werden können zwei Werte anzeigen & Hervorhebung der ausgewählten

Beispiel:

Was sind die Optionen ähnlich ein Widget zu implementieren, um in Bild über HTML/CSS gezeigt & JS?

Answer 1

Der Ansatz I unten iteriert durch alle fieldset Elemente vorhanden, und, wenn alle Eingänge des darin type="radio" sind, versteckt sie und fügt span Elemente (von class="buttonRadio") an ihrem Platz, um den Text von ihren entsprechenden label Elementen. Es bindet auch click Ereignisse auf die beigefügten span Elemente und löst das change Ereignis auf dem ursprünglichen input s und fügt auch den ‚überprüft‘ Klassennamen für das Klick/berühren Element, während die Klasse zu entfernen es von seinen Geschwistern:

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

Diese verwendet die folgenden CSS jene Elemente stylen:

.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.

---

redigierte die jQuery ein wenig zu ändern:

1. gecached die $(this) Objekt ein wenig früher in dieser Version
2. erinnerte an die legend Variable zu verwenden, die ich in der ersten Inkarnation zugewiesen aber vergessen, tatsächlich zu verwenden ... Seufzer.

3. versteckte auch die tatsächliche <legend></legend> Element:

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

Referenzen:

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