web-dev-qa-db-ja.com

タッチデバイスのjQuery UIスライダー

JQuery UIを使用してWebサイトを開発していますが、タッチスクリーンデバイスで表示すると互換性がないように見えるサイト上の要素がいくつかあります。エラーは発生しませんが、動作は本来の動作ではありません。

問題の要素は、jQuery UIで定義されているスライダーと範囲スライダーです。タッチスクリーン上で、ハンドルを拾うようにタッチを登録し、スライダーを横切ってハンドルをドラッグするようにドラッグを登録する代わりに、単にWebページ全体を画面の横にスライドします。ハンドルをタップしてから、スライダーのハンドルをタップする場所をタップすると機能しますが、これは非常に遅く、理想的ではありません。何か案は？

Jqtouchプラグインをダウンロードしてから、.touch([...])をすべてのSlider（）およびRangeSlider（）の呼び出しにアタッチしましたが、うまくいきませんでした。

ありがとう！

更新：jQuery UI Webサイトでこの「パッチ」を見つけました

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

それはiPhoneのスライダーを容易にするということですが、今度は別の愚かな質問になります：この「パッチ」をどのようにコードに組み込むのですか？プラグインのようにコードの最初にそれを含めるだけですか？

slidertouchjqtouch
95
jqcoder

このライブラリはあなたが探しているものを提供しているようです：

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>
137
dazbradbury

これに関する新しい情報を追加したかっただけです。タッチパンチは、iPadおよびAndroidデバイスで正常に機能します。ただし、スライダーはWindowsモバイルデバイスでは動作しません。テストできる限り（jquery uiとTouch punchの最新バージョンで）

修正は非常に簡単で、次のCSSルールを.ui-slider-handleに追加するだけです。

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

お役に立てれば

22
Stijn_d

@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>

EDIT：すでに Jquery UIスライダー を使用している場合は、タッチパンチライブラリのみを含める必要があります。 .ui-slider-handleに対して.draggable（）を呼び出さないでください。既存の機能が上書きされるためです。

5
DPH Trading Danish Plate House

同じ問題がありました。私はjQuery UIのスライダーの上に構築された精巧なスライダーUIを開発しましたが、それはモバイルでまったく機能しないことを実現するためだけです。ここにリストされた提案を試しましたが、jQuery UI Sliderのみに基づいたカスタムソリューションがあるため、機能しませんでした。

noUiSlider 。を使用するだけ

JQuery UIスライダーの上に構築したものとして、すべての精巧な機能（およびそれ以上）を実行します。モバイルデバイスでも美しく機能し、スタイルも簡単です。

1
Adam Karacsony