jQueryMobile: jak pracować z wydarzeniami z suwakiem?

Question

Testuję zdarzenia slider w jQueryMobile i musiałem czegoś przegapić.

kod strony jest:

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

i jeśli mam zrobić:

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

uzyskać

blur, focus, keyup, remove 

Co chcę zrobić, to uzyskać wartość raz wydaniu użytkownika uchwyt suwaka

io hak do zdarzenia keyup jako

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

robi absolutnie nic :(

Muszę powiedzieć, że ja błędnie zakłada że jQueryMobile używany jQueryUI sterujących jak to była moja pierwsza myśl, ale teraz pracuję głęboko w wydarzeniach, które widzę, nie jest tak w przypadku CSS Design.

Co mogę zrobić?

jQuery komórkowy Slider source code można znaleźć na Git czy to pomaga nikomu, jak również strona Test można znaleźć w JSBin

---

Jak rozumiem, #slider jest pole tekstowe z wartość, więc potrzebowałbym podłączyć się do uchwytu suwaka, ponieważ wygenerowany kod dla tego suwaka to:

<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> 

i sprawdzanie wydarzeń w kotwicy handler mam tylko zdarzenie click

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

---

Fix

Ivan odpowiedź, musimy tylko:

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

a następnie

$(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()); 
} 

Dziękuję Ivan za heads up.

Answer 1

Moje rozwiązanie problemu polega na obsłudze załączników w przypadku zdarzeń "dotknij i kopiuj". Dotknięcie jest zawieszone na elemencie div suwaka, a taphold jest zawieszony na elemencie (przycisk sterowania suwakiem).

znaczników HTML z suwakiem:

<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')); }); 

Funkcja makesAjaxChange (elem) sprawia aktualizację do serwera. Jest jeszcze jedna rzecz, o której należy pamiętać, zmiana wartości w polu wprowadzania nie aktualizuje serwera, więc musisz powiązać funkcję, aby zmienić zdarzenie elementu wejściowego. Musisz również zwrócić uwagę, że wykonując ten ruch, każdy ruch suwaka wywoła zmianę elementu wejściowego, więc i Ty musisz to obejść.

Dlatego jQuery Mobile NIE jest jQuery UI dla urządzeń mobilnych. Nie masz tych rzeczy uporządkowanych i musisz zrobić to sam.

Mam nadzieję, że to pomoże.

EDYTOWANIE: Zapomniałem wyjaśnić, dlaczego dotknij suwaka div.ui i taflady na uchwycie suwakowym a.ui. Stuknij w przycisk div.ui-handler dla zdarzenia "kliknij/dotknij", gdy użytkownik kliknie lub dotknie palcem suwaka. uchwyt a.ui-uchwyt-uchwyt jest po tym, jak użytkownik poruszał się myszką lub palcem w lewo/prawo w dół suwaka i puścił go.

Ivan

Answer 2

Znalazłem znacznie prostsze rozwiązanie tego problemu. Używając tego kodu, możesz dodać zdarzenia początku i końca do suwaka.

$('.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');}); 

Answer 3

Okazało się, że są pewne problemy z korzystaniem z rozwiązania Ivana. Jeśli przeciągniesz suwak, wstrzymaj na chwilę (nie podnosząc przycisku myszy) i kontynuuj przeciąganie suwaka, tafelka - nie będzie już uruchamiana.

Dodanie zdarzeń vmouseup i mouseup do suwaka suwaka powoduje poprawę, ale suwak nadal nie wyzwala zdarzenia, jeśli kursor myszy zostanie przesunięty ponad suwak.

Answer 4

Jeśli chcesz po prostu uchwycić zdarzenie po zwolnieniu suwaka (najprawdopodobniej w celu zoptymalizowania żądań ajax).

Ten pracował dla mnie:

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); 
} 
}); 

także zapobiega to, że można dodawać zdarzenia, gdy kontrola nie jest jeszcze zainicjowane (lub utworzone), więc czeka na razie stworzenia jest nieco bardziej poprawne myślę.

Answer 5

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

Answer 6

Na podstawie rozwiązania @ VTWood; Oto ogólna "poprawka" dla wszystkich suwaków jQuery-Mobile 1.1, więc wysyłają zdarzenia start i stop we właściwym czasie. Wystarczy raz wrzucić ten kod na swoją stronę, aby załatać wszystkie przyszłe suwaki.

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

W skrócie, to wiąże detektor zdarzeń do obiektu dokumentu, który nasłuchuje obu mousedown i touchstart zdarzeniach wyzwalanych z .ui-slider elementów. Po uruchomieniu funkcja obsługi znajdzie element input, który znajduje się obok elementu sterującego .ui-slider, który został kliknięty i wyzwoli zdarzenie start.Można spożywać to tak:

$("#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); 
}); 

Answer 7

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

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

Answer 8

Spróbuj ten kod:

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

Mam nadzieję, że te prace dla Ciebie

Answer 9

najlepszy i prosty sposób można sprawdzić poniżej link. otrzymasz kod dla wszystkich urządzeń mobilnych.

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