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

Question

更新2015年7月24日:由于我无法迁移代码并且存在冲突问题,因此我完全更改了库.对我来说最快的解决方法是http://refreshless.com/nouislider/.它仍然允许我使用jquery所做的相同的短编码来检索值.我不能保证这是多么轻,但我可以推荐客户网站上的临时修复.

更新2015年7月30日:jQuery用户界面已经尝试过和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

我也遇到了同样的麻烦，很多移动网络应用程序。最后，厌倦了触摸管理、外部 js、JQuery 等等，第四，我使用了http://refreshless.com/nouislider/。（请确保我从 2012 年开始在线或从 v1.4 开始的 Phonegap 中获取了此类应用程序的战利品）。

完美、简单、清晰，因此易于定制。

我的答案：NoUiSlider。定义。

天哪，不要陷入棘手的开发......让它变得简单