Question

我需要像我正在处理的网站的HTML范围输入之类的东西，但是我需要它来使用不支持此功能的旧版Android。

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

支持时看起来有点像这样：http://jqueryui.com/demos/slider/

我只是制作一个演示，所以我需要的只是UI，所以只需要一个点就可以沿滑块拖动。该网站是移动优化的，因此需要一个触摸屏界面，这就是我无法使用jQuery UI的原因。有没有办法在不使用jQuery Mobile框架的情况下执行此操作？谢谢

Answer 1

我已经使用jQuery UI完成了这项工作，并将其与触摸屏配合使用：http://touchpunch.furf.com/

Answer 2

这是一个主要从头开始编写的滑块。也就是说，不使用任何UI库。我使用jQuery，_和backbone，但如果你不关心它们，可以用更原始版本的浏览器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);
        }();
    }

不支持HTML5输入类型范围时的滑块UI？

2 个答案: