Пользовательский интерфейс слайдера, если диапазон типов ввода HTML5 не поддерживается?

Question

Мне нужно что-то вроде ввода диапазона HTML для сайта, над которым я работаю, но мне нужно, чтобы он работал со старыми версиями Android, которые не поддерживают эту функцию.

<input type="range" value="10" min="0" max="100" /> 

Что, если поддерживается выглядит как это: http://jqueryui.com/demos/slider/

Im делает демо только поэтому все, что нужно это пользовательский интерфейс, так что просто точка вы можете перетащить слайдер. Сайт оптимизирован для мобильных устройств, поэтому необходим интерфейс сенсорного экрана, поэтому я не могу использовать jQuery UI. Есть ли способ сделать это без использования jQuery Mobile framework? Благодаря

Answer 1

Ive сделали это с JQuery UI, и этот хак, чтобы получить его работу с сенсорными экранами: http://touchpunch.furf.com/

Answer 2

Вот слайдер в основном написан с нуля. То есть без использования каких-либо библиотек пользовательского интерфейса. Я использую jQuery, _ и позвоночник, но если вас это не волнует, их можно заменить более примитивными версиями API-интерфейсов браузера, которые делают то же самое. Полный образец на http://jsfiddle.net/shyamh/gBNAg/ Поддержка событий со спуском не добавлена, но это не должно быть слишком сложно для подключения.

function slider(id, width) { 

     var _i = this, 

      // todo - can we refactor to get _thumbWidth from element styles? 
      _thumbWidth = 24, 

      _slideRange = width, 

      // View template for control. Typically this would be outside the class, 
      // so it's reused between multiple instance of this control. 
      // The id is bound as a paremeter in the template. There may be other parameters. 
      // 
      _t = '<div id="<%=id%>" class="slider" style="width:<%=width%>px;">' + 
       ' <div id="<%=id%>_track" class="sliderTrack"></div>' + 
       ' <div id="<%=id%>_thumbcontainer" class="sliderThumbContainer" style="width:' + _thumbWidth + 'px">' + 
       ' <div id="<%=id%>_thumb" class="sliderThumb"></div>' + 
       ' </div>' + 
       '</div>', 

      _currentValue = 0, 

      _$el = $(_.template(_t, { id: id, width: (width || 100) })), 

      _el = _$el[0], 

      _elTrack = $('#' + id + '_track:first', _el)[0], 
      _elThumbContainer = $('#' + id + '_thumbcontainer:first', _el)[0]; 

     _.extend(_i, Backbone.Events); 

     function x2Percent(x) { 
      if (x < 0) { 
       return 0; 
      } else { 
       var p = x/_slideRange * 100; 
       if (p > 100) { p = 100; } 
       return p; 
      } 
     } 

     function moveThumbToX(x) { 
      var offsetLeft = _$el.offset().left, 
       p = x2Percent(x - offsetLeft), 
       newX = (Math.round(p/100 * _slideRange) - _thumbWidth/2); 

      newX = (newX < 0) ? 0 : ((newX > (width - _thumbWidth)) ? (width - _thumbWidth) : newX) ; 

      _elThumbContainer.style.left = newX + "px"; 

      _currentValue = p; 
     } 

     function _elClick(e) { 
      moveThumbToX(e.x); 
      // todo - fire backbone event for slider changed event 
     } 

     function _elThumbContainerMouseDown(e) { 
      document.addEventListener("mousemove", _mouseMove); 
      document.addEventListener("mouseup", _mouseUp); 
      e.preventDefault(); 
      e.stopPropagation(); 
      // todo - fire backbone event for slider drag-started event 
     } 

     function _mouseMove(e) { 
      var x = e.x; 
      e.preventDefault(); 
      requestAnimationFrame(function() { 
       moveThumbToX(e.x); 
       // todo - fire backbone event for slider dragging event 
      });   
     } 

     function _mouseUp(e) { 
      e.preventDefault(); 
      document.removeEventListener("mousemove", _mouseMove); 
      document.removeEventListener("mouseup", _mouseUp); 
      // todo - fire backbone event for slider drag-ended event 
     } 

     // set the value to p, where p is between 0..100 
     _i.setValue = function(p) { 
      moveThumbToX(Math.round(p/100 * _slideRange));  
     } 

     _i.getElement = function() { 
      return _el; 
     } 

     var _ctor = function() { 
      _el.addEventListener("click", _elClick); 
      _elThumbContainer.addEventListener("mousedown", _elThumbContainerMouseDown); 
     }(); 
    }