Добавьте повторяющееся действие приращения к «кнопкам» на концах ползунка jQuery. Нужно работать на iPhone

Question

У меня есть веб-приложение, которое использует множество слайдеров jQuery. Все привязаны к элементам ввода с помощью функции ниже. Это работает очень хорошо, за исключением iPhone. Из того, что я видел до сих пор в дискуссиях здесь и в других местах, в настоящее время нет хороших решений, которые бы позволили слайдерам работать хорошо.

В качестве обходного пути я хочу связать повторяющееся действие с img '-' и '+', которые я поместил на обоих концах ползунков. Что является самым чистым способом включить это в мою функцию sliderinit (), так что, удерживая палец (или мышь) над img, вы увеличиваете значение входного элемента $ (inpid), метку слайдера $ (sldlblid) и обновляете большой палец слайдера время?

Обратите внимание, что значения являются числами с плавающей запятой и должны быть ограничены минимальным и максимальным значениями, указанными в аргументе функции.

function sliderinit(inpid,min,max) {
    var sldid = '#slider_'+inpid; 
    var sldlblid = sldid + "_val"
    inpid = '#'+inpid;
    $(inpid).hide();
    $(sldid).slider(
        {
        min:    min,
        max:    max,
        step:   (max-min)/100.,
        value:  $(inpid).val(),

        stop:   function(event,ui) {
                $(inpid).val(ui.value);
                $(sldlblid).text((ui.value).toFixed(2));
                }
        });
    };        

Спасибо, Mike

Answer 1

С момента публикации вопроса я разработал решение, которое связывает кнопки img с действием ползунка. Код размещен ниже. Он определяет пользовательские события, 'incr' и 'decr' на ползунках и организует кнопки img для отправки этих событий, когда мышь нажата и внутри кнопки. Он работает довольно хорошо в обычном браузере.

К сожалению, это все еще не решает проблему iPhone. Кнопки img просто не реагируют - вероятно, потому что события сенсорного экрана Apple не отображаются на обычные события мыши. Я предполагаю, что они сделали это для поддержки интерфейса жестов. Кто-нибудь знает, как это обойти?

function sliderinit(inpid,min,max) {
    var sldid = '#slider_'+inpid; 
    var sldlblid = sldid + "_val"
    inpid = '#'+inpid;
    $(inpid).hide();
    $(sldid).slider(
        {
        min:    min,
        max:    max,
        step:   (max-min)/100.,
        value:  $(inpid).val(),

        stop:   function(event,ui) {
                $(inpid).val(ui.value);
                $(sldlblid).text((ui.value).toFixed(2));
                }
        });

    // define custom slider events 'incr' and 'decr'
    $(sldid).slider().bind("incr decr",{
        max:max, 
        min:min,
        slid:$(sldid).slider(),
        inpid:inpid,
        labelid:$(sldlblid),
        }, function(e) {
            var d = e.data;
            var v = d.slid.slider("value");
            var sign;
            (e.type == "decr") ? sign = -1.0 : sign = 1.0;
            var vf = parseFloat(v);
            vf += sign * d.slid.slider("option","step");
            if (vf > d.max) vf = d.max;
            else if (vf < d.min) vf = d.min;
            $(d.inpid).val(vf);
            d.slid.slider("value",vf);
            $(d.labelid).text(vf.toFixed(2));
            }
        );

    // Arrange for clicks on + and - images to 
    // trigger custom slider events
    var plus = sldid + "_plus";
    var minus = sldid + "_minus";

    $(plus).mousedown(function(e) {
        $(plus).everyTime(100,"sliderbutton", function(){
            $(sldid).trigger('incr');
            })
        });
    $(plus).bind("mouseup mouseleave",function(e){
            $(plus).stopTime("sliderbutton");
        });

    $(minus).mousedown(function(e) {
        $(minus).everyTime(100,"sliderbutton", function(){
            $(sldid).trigger('decr');
            })
        });
    $(minus).bind("mouseup mouseleave",function(e){
            $(minus).stopTime("sliderbutton");
        });

    };