javascript - images - slider mobile

jQuery Slider no funciona en el dispositivo móvil como está diseñado

Question

ACTUALIZACIÓN 24/7/15: Como no podía migrar el código y tenía problemas conflictivos, cambié totalmente la biblioteca. La solución más rápida, para mí fue http://refreshless.com/nouislider/ . Todavía me permitió recuperar los valores de trabajo con la misma shortcoding que hizo jquery. No puedo asegurar lo ligero que es esto, pero para una solución temporal en un sitio de clientes que puedo recomendar.

ACTUALIZACIÓN 30/7/15: jQuery UI ya se intentó y Touch Punch, ambos causaron más problemas. De nuevo, la única solución fue No UI Slider para mí en este caso. Su proyecto puede ser diferente, pero para los conflictos graves de guiones de jQuery en marcos de más de 4 años esta fue mi solución.

El siguiente código (ejemplo en: http://www.equant-design.com/aab/shop/category/new-in-whats-new/89 ) me da bastante reflexión ya que estoy ayudando a un cliente a convertir su sitio a modo sensible. El control deslizante funciona como codificado, pero en los dispositivos móviles los rangos solo funcionan al hacer clic en la barra de escala y no en los sujetalibros para definir el rango. Estaba a punto de extraer el código por completo, pero quería ver si alguien sabía de una solución rápida para este problema.

Versión jQuery: 1.4.2

<script type="text/javascript">
    $(''#price-range-filter-header'').click(function() {
        FilterContainerSlideUpDown(''filter_but'', ''price-range-filter-header'');
        });
    $(function() {
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 300,
            values: [0, 300],
            step: 5,
            slide: function(event, ui)
            {
                $("#slider-range-caption").html(''<?=$currency_type->symbol?>'' + ui.values[0] + '' - '' + ''<?=$currency_type->symbol?>'' + ui.values[1]);
            },
            change: function(event,ui)
            {
                ApplyPriceRangeFilter(ui.values[0],ui.values[1]);
            }

        });

        $("#slider-range-caption").html(''<?=$currency_type->symbol?>'' + $("#slider-range").slider("values", 0) + '' - '' + ''<?=$currency_type->symbol?>'' + $("#slider-range").slider("values", 1));

        //initialise jquery scrollbar
        $(''.scrollbar'').scrollbar();
    });
</script>

<div id="filter_but" name="filter_but">
    <div id="slider-range"></div>
</div>

Answer 1

Para que los widgets de jQuery UI funcionen en dispositivos móviles, debe integrar la compatibilidad con eventos táctiles.

Esto ya se ha hecho en este proyecto: jQuery UI Touch Punch

Solo tiene que incluirlo después de jQuery y jQuery UI.

<script src="jquery.ui.touch-punch.min.js"></script>

Answer 2

Tuve el mismo problema, a lo largo de una gran cantidad de aplicaciones web para dispositivos móviles. Finalmente, harto de touch management, js externo, JQuery y cuarto, utilicé http://refreshless.com/nouislider/ . (Asegúrate de haber hecho botines de tales aplicaciones, en línea o Phonegap desde v1.4, desde 2012).

Perfecto, simple, claro y, por lo tanto, fácilmente personalizable.

Mi respuesta: NoUiSlider . Def.

OMG no te sumerjas en un desarrollo complicado ... hazlo simple

Answer 3

Me parece que hay problemas con la página y el desplazamiento. Si yo fuera tú, inhabilitaría el arrastre de páginas (mientras permitía el desplazamiento) para que cuando los usuarios deslizaran el control deslizante no arrastrasen la página. El siguiente fragmento de código requiere que uses jQuery mobile:

$(document).delegate(''.ui-page'', ''touchmove'', false);

Alternativamente, podría ir con un framework de front-end como Foundation o Bootstrap y podría usar sus herramientas para asegurarse de que las cosas se mantengan en el lugar correcto y sean realmente amigables para dispositivos móviles.