114

私はすでにjQueryUIスライダーのスタイルを設定してプロジェクトに実装しました。応答性はありますが、スライダーはタッチやドラッグに反応しません。代わりに、スライダーを移動する場所にタッチする必要があります。すでにjQuery（非モバイル）UIを広く使用しているため、タッチとドラッグをサポートするjQueryモバイルUIへのスワップは避けたいと思います。

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

デスクトップでは、違いがわかりません。モバイルデバイスでは、それは明らかです。

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

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

3 に答える 3

296

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

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

<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でこのリポジトリにスターを付けることをお勧めします。

于 2012-12-10T20:34:29.360 に答える
5

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

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

ありがとう。

于 2017-08-14T14:01:04.327 に答える
1

Wordpressを使用している場合は、functions.phpで次のコードを使用できます。

add_action( 'wp_head', function () {

    // jquery.ui.touch-punch
    wp_enqueue_script( 'jquery.ui.touch-punch', '//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js', [], '0.2.3',false );

}, 999 );
于 2021-07-11T04:42:40.140 に答える