Slider jQuery UI Sentuh & Seret / Jatuhkan dukungan pada perangkat Seluler

102

Saya sudah menata dan mengimplementasikan slider jQuery UI ke dalam sebuah proyek. Meskipun responsif, penggeser tidak merespons saat disentuh dan diseret. Sebaliknya, Anda harus menyentuh tempat yang Anda inginkan untuk membuka bilah geser. Saya ingin menghindari bertukar ke UI seluler jQuery, yang mendukung sentuhan dan seret, karena kami sudah banyak menggunakan UI jQuery (non-seluler).

Fungsionalitas yang kami inginkan: Berikut
Apa yang kami gunakan: Di sini

Di desktop Anda tidak bisa membedakannya. Di perangkat seluler, itu terlihat.

Adakah yang tahu bagaimana menambahkan dukungan ini ke jquery UI?

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

— Seth
sumber

kemungkinan duplikat slider jQuery UI pada perangkat sentuh

— Foreever

Jawaban:

262

jQuery ui tidak memiliki dukungan sentuh. Anda harus menggunakannya dengan touch punch jQuery-ui .

Cukup tambahkan skrip setelah 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>

Anda juga dapat menggunakan 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>

Catatan: Lebih baik berikan repo ini bintang di Github.

— nama pengguna
sumber

Ini menyelamatkan hariku!

— Dr3am3rz

Terima kasih banyak! Ini benar-benar menyelamatkan hariku !!

— Syamsoul Azrien

Ya, itu juga memperbaiki bug dengan slider yang tidak memilih nilai yang tepat.

— Ronen Festinger

bekerja seperti charme dengan perangkat rails5 android dan ios

— Stef Hej

hebat .. ini bekerja dengan lancar .. :) Salah satu pengamatan adalah bahwa di perangkat iOS ketika kita menggeser slider itu tidak bergeser saat kita menyentuhnya tetapi ketika kita melepaskan sentuhan darinya maka itu meluncur pada titik itu. tahu mengapa ini terjadi? apakah Anda punya solusi untuk ini?

— Rahul J. Rane

Anda bisa menautkan js ini.

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

Terima kasih.

— Pedang I
sumber

ini membuatnya bekerja sangat cepat dan sangat baik. terima kasih

— tijnn