web-dev-qa-db-ja.com

jQuery UIスライダーモバイルデバイスでのタッチとドラッグ/ドロップのサポート

私はすでにjQuery UIスライダーのスタイルを設定してプロジェクトに実装しています。モバイルであり、適切にスケーリングされますが、タップとドラッグは許可されません。代わりに、スライダーを移動したい場所をタッチする必要があります。 jQueryモバイルUIはこれをサポートしますが、すでにあるものに時間を費やしました。

必要な機能： Here
使用しているもの： Here

デスクトップでは、違いを見分けることはできません。モバイルデバイスでは明らかです。

このサポートをjquery UIに追加する方法を知っている人はいますか？

$("#cameraSlider").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    cameramen = ui.value;
    return calcTotal();
  }
});

ありがとう、セス

jqueryjquery-uitouchjquery-ui-slider
97
Seth

jQuery uiにはタッチサポートがありません。 jQuery-ui touch punch で使用する必要があります。

JQuery UIの後にスクリプトを追加するだけです。

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

Cdnjsを使用することもできます。

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

注：より良い このレポ Githubのスター.

243
username

このjsをリンクするだけです。

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

ありがとう。

4
Sword I