Question

更新2015年7月24日：因为我无法迁移代码并且遇到了相互矛盾的问题，所以我完全改变了库。对我而言最快的解决方法是http://refreshless.com/nouislider/。它仍然允许我使用jquery所做的相同的短编码来检索值。我无法保证这是多么轻巧，但我可以推荐在客户网站上进行临时修复。

更新2015年7月30日：已经尝试过jQuery UI和Touch Punch，它们都引发了进一步的问题。在这种情况下，唯一的解决方案是没有UI滑块。您的项目可能有所不同，但对于4年以上的旧框架上的严重jQuery脚本冲突，这是我的解决方案。

以下代码（例如：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>

Answer 1

要使jQuery UI小部件在移动设备上运行，您需要集成对触摸事件的支持。

这项工作已在此项目中完成：jQuery UI Touch Punch

你只需要在jQuery和jQuery UI之后包含它。

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

Answer 2

在我看来，页面和滚动存在问题。如果我是你，我会禁用页面拖动（同时仍然允许滚动），以便当用户滑动滑块时，它们不会拖动页面。以下代码要求您使用jQuery mobile：

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

或者，你可以使用像Foundation或Bootstrap这样的前端框架，你可以使用他们的工具来确保东西保持在正确的位置并且真正适合移动设备。

Answer 3

我在很多移动网络应用程序中遇到了同样的麻烦。最后，厌倦了触摸管理，外部js，JQuery等等，我使用了http://refreshless.com/nouislider/。（确保我从2012年开始在v1.4上发布了这类应用程序，在线或Phonegap）。

完美，简单，清晰，因此可轻松定制。

我的回答： NoUiSlider 。业。

OMG不要潜入棘手的开发......让它变得简单

jQuery Slider没有按照设计在移动设备上工作

3 个答案: