jQueryMobile: Wie man mit Schiebereignissen arbeitet?

Question

Ich teste die slider Ereignisse in jQueryMobile und ich muss etwas fehlen.

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

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

ich

blur, focus, keyup, remove 

Was ich tun möchte, ist zu den Wert einmal Benutzerfreigabe erhalten der Schieberegler

und als

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

einen Haken zum keyup Ereignis mit absolut nichts :(

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

Was kann ich tun?

jQuery Mobile Slider source code auf Git gefunden werden, wenn es jemand als auch eine Seite Test hilft kann bei JSBin

---

Wie ich verstehe gefunden werden, ist die #slider die Textbox mit der Wert, also würde ich in den Slider Handle einhaken müssen, 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> 

01 Ich bekomme nur die click Ereignis

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

---

Fix

Von Ivan Antwort

und die Ereignisse in dem Handler Anker Überprüfung, wir müssen 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()); 
} 

Vielen Dank Ivan für die Köpfe hoch.

Answer 1

Meine Lösung für Ihr Problem besteht darin, Handler beim Tippen und Tapphold-Ereignisse zu verbinden. Der Tap wird an das div-Element des Sliders angehängt, während der Taphold an ein Element angehängt wird (Schieberegler-Schaltfläche).

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

Funktion makesAjaxChange (Elem) macht das Update auf dem Server. Es gibt noch eine andere Sache, die hier zu beachten ist, wenn der Wert im Eingabefeld geändert wird, wird der Server nicht aktualisiert. Daher müssen Sie die Funktion binden, um das Ereignis des Eingabeelements zu ändern. Außerdem müssen Sie darauf achten, dass jede Verschiebung des Schiebereglers eine Änderung des Eingabeelements auslöst, so dass Sie dies ebenfalls umgehen müssen.

Aus diesem Grund ist jQuery Mobile keine jQuery-Benutzeroberfläche 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 tippen Sie auf div.ui-Slider und taphold auf a.ui-Slider-Griff. div.ui-handler tap ist für ein Klick-/Antippen-Ereignis, wenn der Benutzer gerade mit einem Finger auf die Schieberegler klickt oder tippt. a.ui-slider-handle tabhold ist, nachdem der Benutzer mit der Maus oder dem Finger nach links/rechts über die Schiebeleiste gezogen und losgelassen hat.

Ivan

Answer 2

Ich fand eine viel einfachere Lösung für dieses Problem. Mit diesem Code können Sie Start- und Stopp-Ereignisse auf dem 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 3

Ich fand heraus, dass es einige Probleme bei der Verwendung von Ivan Lösung gibt. Wenn Sie den Slider ziehen, eine Weile pausieren (nicht die Maustaste loslassen) und den Schieberegler weiter ziehen, wird das Taphold-Event nicht mehr ausgelöst.

Durch Hinzufügen der vmouseup- und mouseup-Ereignisse zum Schieberegler div erhalten Sie eine Verbesserung, aber der Schieberegler löst das Ereignis immer noch nicht aus, wenn der Mauszeiger über den Schieberegler bewegt wird.

Answer 4

Wenn Sie das Ereignis nur abfangen wollen, wenn der Slider freigegeben wird (höchstwahrscheinlich um Ajax-Anfragen zu optimieren).

Das ist für mich gearbeitet:

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

Auch dies verhindert, dass Sie Ereignisse hinzufügen, wenn die Steuerung noch nicht initialisiert (oder erstellt), so dass für den Fall, daß ich denke, ein bisschen mehr korrekt erstellen zu warten.

Answer 5

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

Answer 6

Basierend auf @ VTWood-Lösung; Hier ist ein generischer 'Fix' für alle jQuery-Mobile 1.1 Schieberegler, so dass sie start und stop Ereignisse zu den entsprechenden Zeiten versenden. Sie müssen diesen Code nur einmal in Ihre Seite einfügen, um alle zukünftigen Schieberegler zu füllen.

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

Auf den Punkt gebracht, es bindet einen Ereignis-Listener auf das Dokumentobjekt, das für beide mousedown und touchstart Ereignisse hört von .ui-slider Elemente ausgelöst. Einmal ausgelöst, findet die Handler-Funktion das Element input, das neben dem Steuerelement .ui-slider sitzt, auf das geklickt wurde, und löst ein Ereignis start aus.Sie können diese verbrauchen etwa so:

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

diesen Code Versuchen:

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

ich diese Arbeit hoffen für Sie

Answer 9

Beste und einfache Möglichkeit, Sie folgenden Link überprüfen können. Sie erhalten Code für alle mobilen Geräte.

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