JQueryMobile: как работать со слайдерами?

Ответ 1

Мое решение вашей проблемы заключается в подключении обработчиков к событиям tap и taphold. Нажмите на крючок на элементе div ползунка, а нажатие кнопки - на элементе (кнопка управления ползунком).

HTML-разметка слайдера:

<div class="ui-field-contain ui-body ui-br" data-role="fieldcontain" id="element-boravak3">
     <label class="ui-input-text ui-slider" id="boravak3-label" for="boravak3">strop</label>
    <input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c ui-slider-input" name="boravak3" id="boravak3" value="0" min="0" max="100" data-type="range">
<!-- this is code that jQMobile generates -->
    <div role="application" class="ui-slider  ui-btn-down-c ui-btn-corner-all">
        <a class="ui-slider-handle ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0" title="0" aria-labelledby="boravak3-label" style="left: 0%;">
            <span class="ui-btn-inner ui-btn-corner-all">
                <span class="ui-btn-text"></span>
            </span>
        </a>
    </div>
</div>

JS:

$('#' + id).slider();
$('#' + id).siblings('.ui-slider').bind('tap', function(){ makeAjaxChange($(this).siblings('input')); });
$('#' + id).siblings('.ui-slider a').bind('taphold', function(){ makeAjaxChange($(this).parent().siblings('input')); });

Функция makeAjaxChange (elem) делает обновление для сервера. Здесь есть еще одна вещь, изменение значения в поле ввода не обновляет сервер, поэтому вам нужно привязать функцию для изменения события входного элемента. Также вы должны обратить внимание на то, что при этом каждый ход управления ползунком инициирует изменение входного элемента, поэтому вы также должны обходиться.

Именно поэтому jQuery Mobile не является пользовательским интерфейсом jQuery для мобильных устройств. Вы не разбираетесь в этом и должны сами делать это.

Надеюсь, это поможет.

EDIT: Я забыл объяснить, почему нажмите на div.ui-слайдер и нажмите на a.ui-слайдер. div.ui-handler tap - для события click/tap, когда пользователь просто нажимает или нажимает палец на ползунок. Закладка a.ui-slider-handle находится после того, как пользователь двигался с помощью мыши или пальца влево/вправо по ползунку и отпускал его.

Иван

Ответ 2

Попробуйте этот код:

$( "#slider-1").on('slidestop', function( event ) {
   var slider_value=$("#slider-1").slider().val();
   alert('Value: '+slider_value);
});

Я надеюсь, что эта работа для вас

Ответ 3

Я нашел гораздо более простое решение этой проблемы. Используя этот код, вы можете модифицировать события запуска и остановки на слайдере.

$('.ui-slider').live('mousedown', function(){$('#'+id).trigger('start');});
$('.ui-slider').live('mouseup', function(){$('#'+id).trigger('stop');});
$('.ui-slider').live('touchstart', function(){$('#volumeSlider').trigger('start');});
$('.ui-slider').live('touchend', function(){$('#volumeSlider').trigger('stop');});

Ответ 4

Я узнал, что есть некоторые проблемы с использованием решения Ivan. Если вы перетащите ползунок, остановитесь некоторое время (не поднимая кнопку мыши) и продолжайте перетаскивание слайдера, кнопка -event больше не будет запускаться.

Добавляя события vmouseup и mouseup в ползунок div, вы получаете улучшение, но ползунок все еще не запускает событие, если курсор мыши перемещается от ползунка.

Ответ 5

На основе решения @VTWood; здесь общее "исправление" для всех слайдеров jQuery-Mobile 1.1, чтобы они отправляли события start и stop в соответствующие моменты времени. Вам просто нужно отбросить этот код на свою страницу один раз, чтобы исправить все будущие слайдеры.

$(document).on({
    "mousedown touchstart": function () {
        $(this).siblings("input").trigger("start");
    },
    "mouseup touchend": function () {
        $(this).siblings("input").trigger("stop");
    }
}, ".ui-slider");

В двух словах он связывает прослушиватель событий с объектом документа, который прослушивает события mousedown и touchstart, вызванные элементами .ui-slider. После срабатывания функция обработчика найдет элемент input, который сидит рядом с элементом управления .ui-slider, который был нажат и вызывает событие start. Вы можете использовать это так:

$("#my-slider").on("start", function () { 
    console.log("User has started sliding my-slider!");
});

$("#my-slider").on("stop", function (event) {
    var value = event.target.value;
    console.log("User has finished sliding my slider, its value is: " + value);
});

Ответ 6

<input type="range" id="player-slider" value="25" min="0" max="100"/>

$( "#player-slider" ).bind( "change", function(event, ui) {
    alert ("changed!");
});

Ответ 7

Если вы хотите просто поймать событие при отпускании слайдера (скорее всего, для оптимизации запросов ajax).

Это сработало для меня:

var slider = $('#my_slider');
//as the answer from @nskeskin you have to remove the type range from your input on the html code
slider.slider({create:function(){
    //maybe this is too much hacking but until jquery provides a reference to this...
    $(this).next().children('a').bind('vmouseup', yourOnChangeCallback);
}
});

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

Ответ 8

 $('#slider').next().children('a').bind('taphold', function () {
        $('#slider').live("change", function (event, ui) {
          //do these.....
        });
    });

Ответ 9

Лучший и простой способ проверить ссылку ниже. вы получите код для всех мобильных устройств.

http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/