Quel widget HTML/JS pour afficher ce contrôle balsamiq?

Question

je l'ai fait dans Balsamiq & mockups ils ont un widget qui

• a permis de sélectionner une valeur, sur deux valeurs. Fonctionne très bien sur les écrans tactiles
• peut être utilisé pour afficher deux valeurs & mettant en lumière la sélectionnée

Exemple:

quelles sont les options pour mettre en œuvre un widget semblable à celle indiquée dans l'image via HTML/CSS & JS?

Answer 1

L'approche que je vous présente ci-dessous à travers tous itère fieldset éléments, et si toutes les entrées qui y sont type="radio", les cuirs et éléments span ajoute (de class="buttonRadio") à leur place, en utilisant le texte de leurs éléments label pertinents. Il se lie également aux éléments span annexés click événements et déclenche l'événement change sur les input originaux s et ajoute également la « checked » nom de classe à l'élément cliquée/touché, tout en retirant cette classe de son frères et soeurs:

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

Il utilise le CSS suivant pour le style de ces éléments:

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

---

Edité de modifier la jQuery un peu:

1. mises en cache l'objet $(this) un peu plus tôt dans cette version,
2. pensé à utiliser la variable legend que j'affecté dans la première incarnation mais j'ai oublié d'utiliser ... soupir.

3. également caché l'élément <legend></legend> réel:

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

Références:

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