jQueryMobile: cómo trabajar con eventos de control deslizante?

Question

Estoy probando los eventos slider en jQueryMobile y me falta algo.

código de la página es:

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

y si lo hago:

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

consigo

blur, focus, keyup, remove 

Lo que quiero hacer es obtener el valor una vez que suelta por el usuario el control deslizante

y que tiene un gancho al evento keyup como

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

no hace absolutamente nada :(

hay que decir que me supuesto erróneamente que jquery mobile usa jQueryUI controles ya que era mi primer pensamiento, pero ahora trabajando en profundidad en los eventos, puedo ver que este no es el caso, solo en términos de CSS Design.

¿Qué puedo hacer?

jQuery Mobile deslizante source code se puede conocer en Git si ayuda a nadie así una página prueba se puede encontrar en JSBin

---

Según tengo entendido, el #slider es el cuadro de texto con el valor, por lo que tendría que enganchar en el control deslizante como el código generado para este control deslizante es:

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

y control de los acontecimientos en el ancla manejador consigo sólo el evento click

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

---

Fix

de Iván respuesta, sólo tenemos:

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

y luego

$(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 por la cara.

Answer 1

Mi solución a su problema es conectar manejadores en eventos tap y taphold. El grifo está enganchado en el elemento div del control deslizante, mientras que el taphold está enganchado en un elemento (botón de control deslizante).

marcado HTML del control deslizante:

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

makesAjaxChange Función (elem) hace que la actualización al servidor. Hay una cosa más a tener en cuenta aquí, el cambio de valor en el campo de entrada no actualiza el servidor, por lo que debe vincular la función para cambiar el evento del elemento de entrada. También debe prestar atención que al hacer esto, cada movimiento de control deslizante activará el cambio del elemento de entrada, por lo que también debe solucionarlo.

Es por eso que jQuery Mobile NO es jQuery UI para dispositivos móviles. No tienes estas cosas resueltas y debes hacerlas tú mismo.

Espero que esto ayude.

EDIT: Olvidé explicar por qué toca en div.ui-slider y taphold en a.ui-slider-handle. div.ui-handler tap es para hacer clic/tocar evento cuando el usuario simplemente hace clic o toca un dedo en la barra deslizante. El tabhold handle de a.ui-slider es después de que el usuario se moviera con el mouse o el dedo hacia la izquierda/derecha en la barra deslizante y lo soltó.

Ivan

Answer 2

he encontrado una solución mucho más sencilla a este problema. Con este código, puede actualizar los eventos de inicio y detención en el control deslizante.

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

Descubrí que hay algunos problemas al usar la solución de Ivan. Si arrastra el control deslizante, hace una pausa por un tiempo (sin levantar el botón del mouse) y sigue arrastrando el control deslizante, el evento Taphold -event no se activará más.

Al agregar los eventos vmouseup y mouseup en el deslizador div se obtiene una mejora, pero el control deslizante aún no activa el evento si el cursor del mouse se aleja del control deslizante.

Answer 4

Si solo quiere ver el evento cuando se suelta el control deslizante (lo más probable es que optimice las solicitudes ajax).

Esto funcionó para mí:

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

También esto evita que se agrega eventos cuando el control aún no se ha inicializado (o crear), por lo que espera para el evento de creación es un poco más correcto que pienso.

Answer 5

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

Answer 6

Basado en la solución @ VTWood's; Aquí hay una "solución" genérica para todos los controles deslizantes de jQuery-Mobile 1.1 para que despachen los eventos start y stop en los momentos apropiados. Solo necesita colocar este código en su página una vez para reparar todos los controles deslizantes futuros.

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

En pocas palabras, se une un detector de eventos para el objeto de documento que la escucha de ambos mousedown y touchstart eventos disparados desde .ui-slider elementos. Una vez activada, la función del manejador encontrará el elemento input que se encuentra junto al control .ui-slider que se hizo clic y desencadenará un evento start.Puede consumir este modo:

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

probar este código:

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

espero que este trabajo para usted

Answer 9

forma mejor y más fácil se puede comprobar a continuación enlace. Obtendrás el código para todos los dispositivos móviles.

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