jQueryMobile: how to work with slider events?

Question

I\'m testing the slider events in jQueryMobile and I must been missing something.

page code is:

    

        
                      

              相关标签:
       
      

Answer 1

My solution to your problem is to hookup handlers on tap and taphold events. Tap is hooked on div element of slider, while taphold is hooked on a element (slider control button).

HTML markup of slider:

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

Function makesAjaxChange(elem) makes the update to the server. There is one other thing to note here, changing value in input field does not updates server so you have to bind function to change event of input element. Also you must pay attention that by doing this every slider control move will trigger input element change so you have to workaround that too.

This is why jQuery Mobile is NOT jQuery UI for mobile devices. You dont have these things sorted out and must do them yourself.

I hope this helps.

EDIT: I forgot to explain why tap on div.ui-slider and taphold on a.ui-slider-handle. div.ui-handler tap is for click/tap event when user just clicks or taps a finger on slidebar. a.ui-slider-handle tabhold is after user was moving with mouse or finger left/right down the slidebar and released it.

Ivan

Answer 2

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

Answer 3

I found a much simpler solution to this problem. Using this code, you can retrofit start and stop events onto the slider.

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

I found out that there's some issues in using Ivan's solution. If you drag the slider, pause for a while (not lifting the mouse button) and keep on dragging the slider the taphold -event won't be triggered anymore.

By adding the vmouseup and mouseup events in to the slider div you get an improvement but the slider still fails to trigger the event if the mouse cursor is moved away from above the slider.

Answer 5

Based on @VTWood's solution; here's a generic 'fix' for all jQuery-Mobile 1.1 sliders so they dispatch start and stop events at the appropriate times. You just need to drop this code into your page once to patch up all future sliders.

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

In a nutshell, it binds an event listener to the document object which listens for both mousedown and touchstart events triggered from .ui-slider elements. Once triggered the handler function will find the input element which sits alongside the .ui-slider control that was clicked and trigger a start event. You can consume this like 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 6

Best and easy way you can check below link. you will get code for all mobile devices.

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