jQuery UI slider รองรับ Touch & Drag / Drop บนอุปกรณ์มือถือ


103

ฉันได้กำหนดสไตล์และใช้ตัวเลื่อน jQuery UI ในโปรเจ็กต์แล้ว แม้ว่าจะตอบสนอง แต่แถบเลื่อนจะไม่ตอบสนองต่อการสัมผัสและลาก แต่คุณต้องแตะตำแหน่งที่คุณต้องการให้แถบเลื่อนไป ฉันต้องการหลีกเลี่ยงการเปลี่ยนเป็น jQuery mobile UI ซึ่งรองรับการแตะและลากเนื่องจากเราใช้ jQuery (ไม่ใช่มือถือ) UI อย่างกว้างขวางอยู่แล้ว

ฟังก์ชันที่เราต้องการ: นี่คือ
สิ่งที่เราใช้: ที่นี่

บนเดสก์ท็อปคุณไม่สามารถบอกความแตกต่างได้ บนอุปกรณ์เคลื่อนที่เป็นที่ประจักษ์

ใครทราบวิธีเพิ่มการสนับสนุนนี้ใน jquery UI?

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

คำตอบ:


262

jQuery ui ไม่รองรับการสัมผัส คุณควรใช้กับjQuery UI-สัมผัสหมัด

เพียงเพิ่มสคริปต์หลัง 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>

หมายเหตุ:ควรให้repo นี้เป็นดาวบน Github


นี่ช่วยประหยัดวันของฉัน!
Dr3am3rz

ขอบคุณมาก! นี่ช่วยวันของฉันจริงๆ !!
Syamsoul Azrien

ใช่มันยังแก้ไขข้อบกพร่องที่แถบเลื่อนไม่เลือกค่าที่ถูกต้อง
Ronen Festinger

1
ทำงานได้อย่างมีเสน่ห์ด้วยอุปกรณ์ Android และ iOS ของราง 5
Stef Hej

เยี่ยมมาก .. มันทำงานได้อย่างราบรื่น .. :) ข้อสังเกตอย่างหนึ่งคือในอุปกรณ์ iOS เมื่อเราเลื่อนแถบเลื่อนมันจะไม่เลื่อนเมื่อเราแตะ แต่เมื่อเราปล่อยสัมผัสจากนั้นมันจะเลื่อนไปที่จุดนั้น มีความคิดว่าทำไมสิ่งนี้ถึงเกิดขึ้น? คุณมีวิธีแก้ปัญหานี้หรือไม่?
Rahul J. Rane

4

คุณสามารถเชื่อมโยง js นี้

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

ขอบคุณ.


สิ่งนี้ทำให้มันทำงานได้อย่างรวดเร็วดีจริงๆ ขอบคุณ
tijnn
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.