觸摸設備上的jQuery UI滑塊

我正在開發一個使用jQuery UI的網站，並且我的網站上有幾個元素在觸摸屏設備上查看時顯示爲不兼容;他們不會導致任何錯誤，但行爲不是它應該的。觸摸設備上的jQuery UI滑塊

有問題的元素是由jQuery UI定義的滑塊和範圍滑塊;在觸摸屏上，不是將觸摸註冊爲拾取手柄，拖動手柄拖動滑塊，而是將整個網頁滑動到屏幕一側。如果您點擊手柄，然後點擊滑塊上您想要手柄最終位置的位置，它會起作用，但這非常慢並且不理想。有任何想法嗎？

我嘗試下載jqtouch插件，然後將.touch([...])附加到所有對slider（）和rangeslider（）的調用中，但沒有奏效。

謝謝！

更新：我發現了jQuery UI網站

http://bugs.jqueryui.com/ticket/4143

，指出它有利於在iPhone上的滑塊，但現在再愚蠢的問題，對這個「補丁」：我怎麼將這一「補丁」成我的代碼？我是否只是在代碼的開始部分像插件一樣包含它？

來源

2011-06-15 jqcoder

133

這個庫似乎提供你在找什麼：

https://github.com/furf/jquery-ui-touch-punch#readme

它也有一些實例的使用代碼（只需添加插件）：

<script src="http://code.jquery.com/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script> 
<script src="jquery.ui.touch-punch.min.js"></script> 
<script> 
    $('#widget').draggable(); 
</script>

來源

2012-03-02 13:11:16 dazbradbury

這爲我工作。 ;） – 2012-03-16 20:44:46

+27

注意羣衆：將它附加到滑塊手柄，而不是整個事情。（對於jQuery滑塊，這將是'$（'。ui-slider-handle'）。draggable（）;' – PaulSkinner 2013-05-17 10:41:30

+14

現在我可以在整個頁面上移動滑塊手柄!!這很荒謬 – dezman 2013-05-24 15:17:42

只想添加一些關於此的新信息。對於iPad和Android設備，Touch-punch可以很好地工作。但滑動條將無法在Windows移動設備上工作，目前爲止我可以測試（使用最新版本的jquery UI &觸摸打孔機）

該修復非常簡單，只需將以下CSS規則添加到.ui -slider手柄：

-ms-touch-action: none; 
touch-action: none;

希望這有助於

來源

2014-02-26 07:59:06

非常有用，謝謝！ – evilscary 2014-03-27 16:38:14

不適合我嗎？任何示例鏈接請@Stijn_d – ShibinRagh 2015-02-06 10:42:12

呃，但這遺址的實際觸摸衝的功能 – user151496 2015-02-12 17:08:17

由於@dazbradbury建議的，touchpunch庫可以幫助翻譯的鼠標事件觸摸事件。 .draggable（）中的參數限制滑塊的移動，因此無法將其移到滑塊父級之外。

<script src="http://code.jquery.com/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script> 
<script src="jquery.ui.touch-punch.min.js"></script> 
<script> 
$(".ui-slider-handle").draggable({ 
    axis: "x", 
    containment: "parent" 
}); 
</script>

編輯：如果您已經使用了Jquery UI slider，你只需要包含touchpunch庫。不要爲.ui-slider-handle調用.draggable（），因爲它會覆蓋現有的功能。

來源

2016-05-19 08:35:52

我有同樣的問題。我在jQuery UI的滑塊上開發了一個詳細的滑塊UI，只是爲了實現它在移動設備上根本不起作用。我嘗試了這裏列出的建議，但由於我有一個只基於jQuery UI Slider的自定義解決方案，它不起作用。

只需使用noUiSlider。

它完成了我在jQuery UI滑塊之上構建的所有精巧功能（以及更多）。它在移動設備上運行非常漂亮，並且很容易使用。

來源

2017-06-22 08:33:59

觸摸設備上的jQuery UI滑塊

回答

相關問題