Подтвердить что ты не робот

JQuery Slider не работает на мобильных устройствах

ОБНОВЛЕНИЕ 7/24/15: Поскольку я не мог выполнить миграцию кода и имел конфликтующие проблемы, я полностью изменил библиотеку. Самое быстрое исправление, для меня было http://refreshless.com/nouislider/. Это все еще позволяло мне получать значения, работая с тем же самым коротким кодом jquery. Я не могу ручаться за то, насколько свет это, но для исправления temp на сайте клиентов, который я могу порекомендовать.

ОБНОВЛЕНИЕ 7/30/15: пользовательский интерфейс jQuery уже был предпринят и Touch Punch, они оба вызвали дополнительную проблему. Опять же, единственным решением для меня был No UI Slider. Ваш проект может быть другим, но для серьезных конфликтов jQuery script в 4+ старых фреймах это было моим решением.

Следующий код (пример: http://www.equant-design.com/aab/shop/category/new-in-whats-new/89) дает мне достаточно размышления, поскольку я помогаю клиенту преобразовать его сайт в отзывчивый режим. Ползунок работает как закодированный, но на мобильных устройствах диапазоны работают только щелчком по шкале шкалы, а не букрандами, чтобы определить диапазон. Я собирался просто полностью вырвать код, но хотел узнать, знает ли кто-нибудь о быстром исправлении этой проблемы.

версия 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>
4b9b3361

Ответ 1

У меня была такая же проблема, как и множество мобильных веб-приложений. Наконец, надоело управление касанием, внешний js, JQuery и так четвертый, я использовал http://refreshless.com/nouislider/. (Будьте уверены, что я сделал гранаты таких приложений, онлайн или Phonegap с v1.4, с 2012 года).

Идеально, просто, понятно и поэтому легко настраивается.

Мой ответ: NoUiSlider. Def.

OMG не погрузится в сложный dev... упростите

Ответ 2

Чтобы сделать виджеты jQuery UI на мобильных устройствах, вам необходимо интегрировать поддержку сенсорных событий.

Это уже сделано в этом проекте: jQuery UI Touch Punch

Вам просто нужно включить его после jQuery и jQuery UI.

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

Ответ 3

Мне кажется, что есть проблемы со страницей и прокруткой. Если бы я был вами, я бы отключил перетаскивание страницы (при этом позволяя прокручивать), чтобы при слайдере пользователей они не перетаскивали страницу. Следующий фрагмент кода требует использования jQuery mobile:

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

В качестве альтернативы вы можете воспользоваться интерфейсом Front Foundation, таким как Foundation или Bootstrap, и вы можете использовать их инструменты для обеспечения того, чтобы все оставалось в нужном месте и действительно мобильно.