jQueryMobile: Wie arbeitet man mit Slider-Events?

Question

Ich teste die Schieber Ereignisse in jQueryMobile und ich muss etwas übersehen haben.

Seitencode ist:

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

und wenn ich es tue:

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

Ich bekomme

blur, focus, keyup, remove

Was ich tun möchte, ist den Wert abrufen, sobald der Benutzer den Schieberegler loslässt

und mit einem Hook für das Keyup-Ereignis als

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

tut absolut nichts :(

Ich muss sagen, dass ich fälschlicherweise angenommen die jQueryMobile verwendet jQueryUI Kontrollen wie es war mein erster Gedanke, aber jetzt arbeiten tief in die Ereignisse kann ich sehen, das ist nicht der Fall, nur in Bezug auf die CSS-Design.

Was kann ich tun?

jQuery Mobile Schieberegler Quellcode finden Sie unter Git wenn es jemandem hilft, auch ein Testseite ist zu finden unter JSBin

---

So wie ich das verstehe, ist die #slider ist das Textfeld mit dem Wert, so würde ich brauchen, um in den Schieberegler Griff Haken wie der generierte Code für diesen Schieberegler ist:

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

und die Überprüfung der Ereignisse im Handler-Anker erhalte ich nur die click Veranstaltung

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

---

Fix

Von Ivan Antwort, wir brauchen nur:

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

und dann

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

Gracias Ivan für die Vorwarnung.

Answer 1

Probieren Sie diesen Code aus:

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

Ich hoffe, das funktioniert bei Ihnen

Answer 2

Meine Lösung für Ihr Problem ist es, Handler für Tap- und Taphold-Ereignisse einzubinden. Tippen Sie auf div-Element der Schieberegler eingehakt ist, während taphold auf ein Element (Schieberegler-Steuerelement-Taste) eingehakt ist.

HTML-Auszeichnung des Schiebers:

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

Die Funktion makesAjaxChange(elem) führt die Aktualisierung auf dem Server durch. Es gibt noch eine andere Sache, die hier zu beachten ist: Wenn Sie den Wert im Eingabefeld ändern, wird der Server nicht aktualisiert, also müssen Sie die Funktion an das Änderungsereignis des Eingabeelements binden. Außerdem müssen Sie darauf achten, dass jede Bewegung des Schiebereglers eine Änderung des Eingabeelements auslöst, so dass Sie auch das umgehen müssen.

Aus diesem Grund ist jQuery Mobile NICHT jQuery UI für mobile Geräte. Sie haben diese Dinge nicht aussortiert und müssen sie selbst tun.

Ich hoffe, das hilft.

EDIT: Ich habe vergessen zu erklären, warum tap auf div.ui-slider und taphold auf a.ui-slider-handle. div.ui-Handler tap ist für Klick/Tap-Ereignis, wenn Benutzer nur klickt oder tippt einen Finger auf Slidebar. a.ui-slider-Handle tabhold ist, nachdem Benutzer mit Maus oder Finger links/rechts nach unten die Slidebar bewegt und es losgelassen.

Ivan

Answer 3

Ich habe eine viel einfachere Lösung für dieses Problem gefunden. Mit diesem Code können Sie Start- und Stop-Ereignisse für den Schieberegler nachrüsten.

$('.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 4

Ich habe herausgefunden, dass es einige Probleme bei der Verwendung von Ivans Lösung gibt. Wenn man den Schieberegler zieht, eine Weile pausiert (die Maustaste nicht anhebt) und den Schieberegler weiter zieht, wird das Taphold-Ereignis nicht mehr ausgelöst.

Durch Hinzufügen der vmouseup und mouseup Ereignisse in den Schieberegler div erhalten Sie eine Verbesserung, aber der Schieberegler immer noch nicht das Ereignis auslösen, wenn der Mauszeiger weg von über den Schieberegler bewegt wird.

Answer 5

Basierend auf @VTWoods Lösung; hier ist ein allgemeiner 'Fix' für alle jQuery-Mobile 1.1-Slider, damit sie versenden start y stop Veranstaltungen zu den entsprechenden Zeiten. Sie müssen diesen Code nur einmal in Ihre Seite einfügen, um alle zukünftigen Schieberegler zu reparieren.

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

Kurz gesagt, es bindet einen Ereignis-Listener an das Dokument-Objekt, der sowohl auf mousedown y touchstart Ereignisse ausgelöst von .ui-slider Elemente. Sobald die Handler-Funktion ausgelöst wird, findet sie die input Element, das sich neben dem .ui-slider Steuerelement, das angeklickt wurde, und lösen eine start Veranstaltung. Sie können dies wie folgt konsumieren:

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