2015 年 7 月 24 日更新:由于我无法迁移代码并且存在冲突问题,所以我完全更改了库。最快的修复,对我来说是http://refreshless.com/nouislider/ .它仍然允许我使用与 jquery 相同的简码来检索值。我无法保证这有多轻,但我可以推荐在客户站点上进行临时修复。
2015 年 7 月 30 日更新:已经尝试使用 jQuery UI 和 Touch Punch,它们都导致了进一步的问题。在这种情况下,唯一的解决方案是没有 UI Slider。您的项目可能有所不同,但对于 4 年以上的旧框架上严重的 jQuery 脚本冲突,这是我的解决方案。
以下代码(示例位于:http://www.equant-design.com/aab/shop/category/new-in-whats-new/89)让我深思,因为我正在帮助客户将他的站点转换为响应模式。 slider 按编码工作,但在移动设备上,范围只能通过单击比例尺而不是书挡来定义范围。我正要完全撕掉代码,但想看看是否有人知道这个问题的快速修复方法。
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>
最佳答案
要使 jQuery UI 小部件在移动设备上运行,您需要集成对触摸事件的支持。
这已经在这个项目中完成了:jQuery UI Touch Punch
你只需要在 jQuery 和 jQuery UI 之后包含它。
<script src="jquery.ui.touch-punch.min.js"></script>
关于javascript - jQuery Slider 无法按设计在移动设备上运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31434998/