javascript jQuery Slider 无法按设计在移动设备上运行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31434998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Slider not working on mobile as designed
提问by Brian Ellis
UPDATE 7/24/15: As I couldn't migrate the code and was having conflicting issues I changed the library totally. The quickest fix, for me was http://refreshless.com/nouislider/. It still allowed me to retrieve values work with the same shortcoding the jquery did. I can't vouch for how light this is but for a temp fix on a clients site I can recommend.
2015 年 7 月 24 日更新：由于我无法迁移代码并且遇到冲突问题，我完全更改了库。对我来说，最快的解决方法是http://refreshless.com/nouislider/。它仍然允许我使用与 jquery 相同的短编码来检索值。我不能保证这有多轻，但我可以推荐在客户网站上进行临时修复。
UPDATE 7/30/15: jQuery UI was already attempted and Touch Punch, they both caused further issue. Again the only solution was No UI Slider for me in this case. Your project may be different but for severe jQuery script conflicts on 4+ yr old frameworks this was my solution.
2015 年 7 月 30 日更新：已经尝试使用 jQuery UI 和 Touch Punch，它们都引起了进一步的问题。在这种情况下，唯一的解决方案是没有 UI 滑块。您的项目可能有所不同，但对于 4 年以上旧框架上的严重 jQuery 脚本冲突，这是我的解决方案。
The following code (example at:http://www.equant-design.com/aab/shop/category/new-in-whats-new/89) is giving me quite a pondering as I'm helping a client convert his site to responsive mode. The slider works as coded but on mobile devices the ranges only work by clicking the scale rail and not the bookends in order to define the range. I was about to just rip the code out totally but wanted to see if anyone knew of a quick fix for this issue.
以下代码（示例位于：http: //www.equant-design.com/aab/shop/category/new-in-whats-new/89）让我深思，因为我正在帮助客户转换他的站点响应模式。滑块作为编码工作，但在移动设备上，范围只能通过单击比例尺而不是书挡来定义范围。我正要完全撕掉代码，但想看看是否有人知道此问题的快速解决方案。
jQuery version: 1.4.2
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>
采纳答案by 3pic
I had the same trouble, along lots of mobile web app. Finally, fed up with touch management, external js, JQuery and so fourth, i used http://refreshless.com/nouislider/. ( Be sure I made loots of such apps, online or Phonegap from v1.4, from 2012).
我遇到了同样的问题，很多移动网络应用程序。最后，厌倦了触摸管理、外部 js、JQuery 等等，我使用了http://refreshless.com/nouislider/。（请确保我从 2012 年的 v1.4 中在线或 Phonegap 中获得了此类应用程序的战利品）。
Perfect, simple, clear and therefore easily customisable.
完美、简单、清晰，因此易于定制。
My answer: NoUiSlider. Def.
我的回答是：NoUiSlider。定义。
OMG dont dive in tricky dev... make it simple
OMG 不要潜入棘手的开发...让它变得简单
回答by Andrea Casaccia
To make jQuery UI widgets work on mobile you need to integrate support for touch events.
要使 jQuery UI 小部件在移动设备上工作，您需要集成对触摸事件的支持。
This has already been done in this project: jQuery UI Touch Punch
这已经在这个项目中完成了：jQuery UI Touch Punch
You just need to include it after jQuery and jQuery UI.
你只需要在 jQuery 和 jQuery UI 之后包含它。
<script src="jquery.ui.touch-punch.min.js"></script>
回答by Tommyixi
It looks to me like there are issues with the page and scrolling. If I were you, I would disable page dragging (while still allowing scrolling) so that when users slide the slider they aren't dragging the page. The following piece of code requires you to use jQuery mobile:
在我看来，页面和滚动存在问题。如果我是你，我会禁用页面拖动（同时仍然允许滚动），这样当用户滑动滑块时，他们就不会拖动页面。以下代码要求您使用 jQuery mobile：
$(document).delegate('.ui-page', 'touchmove', false);
Alternatively, you could go with a front end framework like Foundation or Bootstrap and you could use their tools to ensure things are staying in the right place and are truly mobile friendly.
或者，您可以使用 Foundation 或 Bootstrap 之类的前端框架，您可以使用他们的工具来确保事物保持在正确的位置并且真正适合移动设备使用。
