jQueryMobile: как работать с событиями слайдера? - PullRequest
Новая
       58

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

12 голосов
/ 03 января 2011

Я тестирую ползунок в jQueryMobile , и я, должно быть, что-то упустил.

Код страницы: 

<div data-role="fieldcontain">
    <label for="slider">Input slider:</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>

и если я сделаю: 

$("#slider").data("events");

Я получу 

blur, focus, keyup, remove

Что я хочу сделать, это получить значение, как только пользователь отпустит ручку ползунка

и наличие события keyup как 

$("#slider").bind("keyup", function() { alert('here'); } );

абсолютно ничего не делает: (

Я должен сказать, что я ошибочно предположил , что jQueryMobile использовал jQueryUI контролирует, как это было моей первой мыслью, но теперь, работая глубоко в событиях, я вижу, что это не так, только с точки зрения CSS Design.

Что можетЯ делаю?

jQuery Mobile Slider Исходный код можно найти на Git , если это кому-нибудь также поможет, на тестовой странице можно найти в JSBin

Как я понимаю, #slider - это текстовое поле со значением, поэтому мне нужно подключиться к дескриптору ползунка, как сгенерированныйкод для этого ползунка: 

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

и проверяя события в привязке обработчика, я получаю только click событие 

$("#slider").next().find("a").data("events");

Fix

Из ответа Ивана нам просто нужно: 

<div data-role="fieldcontain">
    <label for="slider">Input slider:</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>

, а затем 

$(document).bind("pagecreate", function(event, ui) {

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

});

function makeAjaxChange( elem ) { 
    alert(elem.val()); 
}

Спасибо Иван за голову.

Ответы [ 9 ]

9 голосов
/ 13 ноября 2012

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

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

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

8 голосов
/ 03 января 2011

Мое решение вашей проблемы - подключить обработчики к событиям 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-slider и нажмите на a.ui-slider-handle. div.ui-handler tap - это событие click / tap, когда пользователь просто щелкает пальцем по сенсорной панели. a.ui-slider-handle tabhold - это после того, как пользователь двигал мышью или пальцем влево / вправо по ползунку и отпускал его.

Иван

1 голос
/ 07 сентября 2012 
<input type="range" id="player-slider" value="25" min="0" max="100"/>

$( "#player-slider" ).bind( "change", function(event, ui) {
    alert ("changed!");
});
1 голос
/ 24 июля 2012

на основе решения @ 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);
});
1 голос
/ 16 августа 2011

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

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

1 голос
/ 21 мая 2011

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

$('.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');});
0 голосов
/ 06 февраля 2013

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

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

0 голосов
/ 08 мая 2012 
 $('#slider').next().children('a').bind('taphold', function () {
        $('#slider').live("change", function (event, ui) {
          //do these.....
        });
    });
0 голосов
/ 20 апреля 2012

Если вы хотите просто перехватить событие при отпускании ползунка (скорее всего, для оптимизации запросов 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);
}
});

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

...