Comment puis-je créer une plage HTML5 dégradée?

Question

Je voudrais utiliser le <input type='range' /> de HTML5 pour les navigateurs qui le supportent et le dégrader en <select /> sinon. J'utilise Ruby-on-Rails, donc à défaut, je pourrais faire quelque chose comme this sur le serveur.

Je préférerais, cependant, avoir quelque chose de plus en ligne avec l'idée de l'amélioration progressive faite via Javascript. Points bonus si c'est JQuery.

Answer 1

Découvrez Modernizr, il vous dira si la plage est prise en charge. Je crois que la technique consiste à créer une entrée de gamme et à vérifier son type - si elle est toujours "range" alors elle est supportée. Sinon, il devrait signaler "texte" qui est la solution de repli dans les autres navigateurs.

Answer 2

d'abord détecter si le navigateur peut gérer HTML 5 alors utiliser quelque chose comme ceci:

$('input').each(function (i, item) { 
     if ($(item).attr('min') !== undefined && $(item).attr('max') !== undefined) { 
      var select = document.createElement("SELECT"); 
      $(select).attr('name', $(item).attr('name')); 
      $(select).attr('id', $(item).attr('id')); 
      $(select).attr('disabled', $(item).attr('disabled')); 
      var step = 1; 
      if ($(item).attr('step') !== undefined) { 
       step = parseFloat($(item).attr('step')); 
      } 

      var min = parseFloat($(item).attr('min')); 
      var max = parseFloat($(item).attr('max')); 
      var selectedValue = $(item).attr('value'); 
      for (var x = min; x <= max; x = x + step) { 
       var option = document.createElement("OPTION"); 
       $(option).text(x).val(x); 
       if (x == selectedValue) { $(option).attr('selected', 'selected'); } 
       $(select).append(option); 
      }; 
      $(item).after(select); 
      $(item).remove(); 
     } 
    }); 

Puisque vous ne pouvez pas utiliser le sélecteur input[type=range] je devais aller à l'approche $(item).attr('min') && $(item).attr('min'), cela va être un peu bizarre si vous avez d'autres types de contrôles d'entrée avec ces deux attributs.