Tôi làm cách nào để tạo một phạm vi HTML5 có độ phân giải cao?

Question

Tôi muốn sử dụng <input type='range' /> từ HTML5 cho các trình duyệt hỗ trợ và phân cấp thành <select /> nếu không. Tôi đang sử dụng Ruby-on-Rails, vì vậy thất bại tất cả, tôi có thể làm một cái gì đó như this ở phía máy chủ.

Tôi muốn, mặc dù, để có nội dung nào đó phù hợp hơn với ý tưởng về cải tiến nâng cao được thực hiện qua Javascript. Điểm thưởng nếu đó là JQuery.

Answer 1

Kiểm tra Modernizr, nó sẽ cho bạn biết phạm vi có được hỗ trợ không. Tôi tin rằng kỹ thuật này là để tạo ra một đầu vào phạm vi và kiểm tra loại của nó - nếu nó vẫn là "phạm vi" thì nó được hỗ trợ. Nếu không, nó sẽ báo cáo "văn bản" là dự phòng trong các trình duyệt khác.

Answer 2

Đầu tiên phát hiện nếu trình duyệt có thể xử lý HTML 5 sau đó sử dụng một cái gì đó như thế này:

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

Vì bạn không thể sử dụng bộ chọn input[type=range] tôi đã phải đi với cách tiếp cận $(item).attr('min') && $(item).attr('min'), này sẽ nhận được một chút lạ nếu bạn có các loại điều khiển đầu vào khác với hai thuộc tính đó.