Wie erstelle ich einen würdevoll degradierenden HTML5-Bereich?

Question

Ich möchte die <input type='range' /> von HTML5 für Browser, die es unterstützen und <select /> degradieren, wenn nicht. Ich benutze Ruby-on-Rails, also könnte ich auf der Serverseite etwas wie this machen.

Ich würde jedoch lieber etwas mehr inline mit der Idee der progressiven Verbesserung über Javascript getan haben. Bonuspunkte, wenn es JQuery ist.

Answer 1

Überprüfen Sie Modernizr, es wird Ihnen sagen, wenn Bereich unterstützt wird. Ich glaube, die Technik besteht darin, einen Bereichseingang zu erstellen und dessen Typ zu überprüfen - wenn er immer noch "Bereich" ist, wird er unterstützt. Andernfalls sollte "text" gemeldet werden, was in anderen Browsern der Fallback ist.

Answer 2

Zuerst erkennen, ob der Browser HTML 5 verarbeiten kann dann so etwas wie folgt verwenden:

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

Da Sie den input[type=range] Selektor kann ich mit dem $(item).attr('min') && $(item).attr('min') Ansatz gehen musste, wird dies ein wenig seltsam erhalten wenn Sie andere Arten von Eingabesteuerelementen mit diesen beiden Attributen haben.