Thanh trượt giao diện người dùng jQuery trên thiết bị cảm ứng

Tôi đang phát triển một trang web sử dụng giao diện người dùng jQuery và có một số phần tử trên trang web của tôi có vẻ không tương thích khi xem trên thiết bị màn hình cảm ứng; họ không gây ra bất kỳ lỗi nào, nhưng hành vi không phải như vậy.

Các phần tử được đề cập là thanh trượt và thanh trượt phạm vi như được định nghĩa bởi jQuery UI; trên màn hình cảm ứng, thay vì đăng ký một lần chạm khi nhấc tay cầm và kéo khi kéo tay cầm qua thanh trượt, nó chỉ trượt toàn bộ trang web sang một bên màn hình. Nó hoạt động nếu bạn chạm vào tay cầm và sau đó chạm vào vị trí trên thanh trượt nơi bạn muốn tay cầm kết thúc, nhưng điều này rất chậm và không lý tưởng. Bất kỳ ý tưởng?

Tôi đã thử tải xuống plugin jqtouch và sau đó đính kèm .touch([...])vào tất cả các lệnh gọi đến slider () và rangelider (), nhưng điều đó không hoạt động.

Cảm ơn!

CẬP NHẬT: Tôi đã tìm thấy "bản vá" này trên trang web jQuery UI

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

điều đó nói rằng nó tạo điều kiện cho thanh trượt trên iPhone, nhưng bây giờ cho một câu hỏi ngu ngốc khác: làm cách nào để kết hợp "bản vá" này vào mã của tôi? Tôi có chỉ đưa nó vào đầu mã như một plugin không?

Thư viện này dường như cung cấp những gì bạn đang tìm kiếm:

https://github.com/furf/jquery-ui-touch-punch#readme

Nó cũng có một số mã sử dụng ví dụ (chỉ cần thêm plugin):

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

Chỉ muốn thêm một số thông tin mới về điều này. Touch-punch sẽ hoạt động tốt cho Ipad và các thiết bị Android. Nhưng thanh trượt sẽ không hoạt động trên các thiết bị di động Windows, theo như tôi có thể thử nghiệm (với các phiên bản mới nhất của jquery ui & Touch punch)

Cách khắc phục khá đơn giản, chỉ cần thêm các quy tắc CSS sau vào .ui-slider-handle:

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

Hi vọng điêu nay co ich

Như @dazbradbury đã đề xuất, thư viện touchpunch có thể giúp dịch các sự kiện chuột thành các sự kiện chạm. Các tham số trong .draggable () giới hạn chuyển động của thanh trượt để không thể di chuyển nó ra ngoài thanh trượt cha của nó.

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

CHỈNH SỬA: Nếu bạn đang sử dụng thanh trượt Giao diện người dùng Jquery , bạn chỉ cần đưa vào thư viện touchpunch. Không gọi .draggable () cho .ui-slider-handle vì nó sẽ ghi đè chức năng hiện có.

Tôi đã từng gặp vấn đề tương tự. Tôi đã phát triển một xây dựng giao diện người dùng trượt phức tạp trên thanh trượt của jQuery UI chỉ để nhận ra rằng nó hoàn toàn không hoạt động trên thiết bị di động. Tôi đã thử các đề xuất được liệt kê ở đây nhưng vì tôi có giải pháp tùy chỉnh chỉ dựa trên jQuery UI Slider nên nó không hoạt động.

Chỉ cần sử dụng noUiSlider .

Nó có tất cả các tính năng phức tạp (và nhiều hơn nữa) như một tính năng mà tôi đã xây dựng trên thanh trượt jQuery UI. Nó hoạt động đẹp trên thiết bị di động và cũng dễ tạo kiểu.