Jak zbudować wdzięcznie degradującą się serię HTML5?

Question

Chciałbym użyć <input type='range' /> z HTML5 dla przeglądarek, które go obsługują i pogarszają się do <select />, jeśli nie. Używam Ruby-on-Rails, więc w przypadku awarii wszystkie inne, mogę zrobić coś w stylu this po stronie serwera.

Wolałbym jednak, aby coś bardziej pasowało do idei progresywnego ulepszania za pomocą Javascript. Dodatkowe punkty, jeśli to JQuery.

Answer 1

Zapoznaj się z Modernizr, dowiesz się, czy zasięg jest obsługiwany. Wierzę, że technika polega na stworzeniu wejścia zakresu i sprawdzeniu jego typu - jeśli nadal jest "zasięgiem", to jest obsługiwana. W przeciwnym razie powinien zgłosić "tekst", który jest awarią w innych przeglądarkach.

Answer 2

Pierwszy wykryć czy przeglądarka obsługuje HTML 5 a następnie użyć coś takiego:

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

Ponieważ nie można użyć przełącznika input[type=range] musiałem iść z podejściem $(item).attr('min') && $(item).attr('min'), będzie to trochę dziwne jeśli posiadasz inne typy kontrolek wejściowych z tymi dwoma atrybutami.