2012-08-14 28 views
8

a continuación es mi código de rango deslizante Jquery (min-max), el arrastre funciona bien en la computadora de escritorio, pero cuando pruebo esto en el iPad, no funciona. ¿Puede alguien ayudarme con esto, por favor?El rango del control deslizante Jquery no funciona en el iPad

Lamentablemente no puedo adjuntar imagen. A continuación se muestra el diagrama de gama deslizante,

===== (>) ======= (<) =====

var maxValue,myRequest,isDown=false,setUrl; 
setUrl = "/search_type/filter.php"; 

$("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 500, 
    step:25, 
    orientation: "horizontal", 
    values: [ 0,500 ], 
    slide: function(event, ui) { 

    if(ui.values[1] === 500) 
    { 
     maxValue = 500+"+"; 
    } 
    else 
    { 
     maxValue = ui.values[1]; 
    } 
     $("#priceRange").val("£" + ui.values[ 0 ] + " to £" + maxValue); 
    } 
}); 

// AJAX CALL 
$("#slider-range").find('a').mousedown(function(){ 
    isDown=true; 
}); 
$(document).mouseup(function(){ 
    if(isDown) 
    { 
     return setAjaxRequest(); 
    } 
}); 

// Decoration drag image 
$("#slider-range") 
.find('.ui-slider-handle') 
.eq(0).addClass('a-right').end() 
.eq(1).addClass('a-left'); 

//Default this is 
    $("#priceRange") 
    .val("£" + $("#slider-range") 
    .slider("values", 0) + " to £" + $("#slider-range") 
    .slider("values", 1)+'+'); 
    return true; 

Respuesta

20

probar este http://touchpunch.furf.com/

I utilizado para un proyecto y que resuelve los problemas que tenía en los dispositivos iPad y tacto

también está disponible en cdnjs

+0

¡Funcionó, es un código mágico! gracias – Sappy

+0

thnks ..... Solución perfecta .. – ARUNRAJ

+0

Sí. Sin duda, es una buena solución. Pero encontré algunos errores en la PC con pantalla táctil de Windows 8 y en los navegadores IE-11. Por favor, comparta si tiene alguna solución. De todos modos, gracias por esta respuesta. – varun

4

Como se ha sugerido, solía http://touchpunch.furf.com/

y funcionó a la perfección!

En la página HTML utilicé:

<script src="_js/jquery-1.9.1.min.js"></script> 
<script src="_js/jquery-ui-1.10.1.custom.min.js"></script> 
<script src="_js/jquery.ui.touch-punch.min.js"></script> 

código JavaScript que utiliza para crear el rango deslizante:

var slider = $("#dv_sliderrange").slider({ 
     range: true, 
     orientation: 'horizontal', 
     min: 0, 
     max: 10000, 
     step: 10, 
     values: [ 0, 10000 ], 
     // Update my own form fields with the Slider values 
     slide: function(event, ui) { 
      $("#fd_amount0").val("$ " + ui.values[ 0 ]); 
      $("#fd_amount1").val("$ " + ui.values[ 1 ]); 
     } 
    }).draggable(); 
0

Muchas gracias por las respuestas. Probé la solución y al principio no funcionó para mí. Luego me di cuenta de que tenía un archivo js más que estaba rompiendo la funcionalidad. Fue una barra de progreso de jquery. Lo eliminé, funcionó perfectamente.

Cuestiones relacionadas