7

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.Comment puis-je créer une plage HTML5 dégradée?

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.

Répondre

5

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.

1

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.

+0

J'aime ça. Peut-être quelque chose comme 'jQuery.support.rangeInput = ((jQuery.browser.safari) || (jQuery.browser.opera && jQuery.browser.version> = 2.0))' pour vérifier la prise en charge d'entrée de gamme? –

+0

Merci d'avoir complété le code :) –

+0

J'aurais préféré une amélioration progressive de la dégradation gracieuse car il est possible que je rencontre un navigateur qui ne supporte ni 'ni Javascript sur, donc les entrées ne sera jamais converti. Pourtant, il répond au moins à la question. –