jQuery Slider không hoạt động trên thiết bị di động như được thiết kế

Question

CẬP NHẬT 7/24/15: Vì tôi không thể di chuyển mã và gặp sự cố xung đột nên tôi đã thay đổi hoàn toàn thư viện. Bản sửa lỗi nhanh nhất, với tôi là http://refreshless.com/nouislider/. Nó vẫn cho phép tôi lấy các giá trị làm việc với cùng một mã ngắn mà jquery đã làm. Tôi không thể xác minh cho ánh sáng này là như thế nào nhưng cho một sửa chữa tạm thời trên một trang web của khách hàng tôi có thể khuyên bạn nên.

CẬP NHẬT 7/30/15: Giao diện người dùng jQuery đã được thử và Chạm Punch, cả hai đều gây ra sự cố thêm. Một lần nữa giải pháp duy nhất là No UI Slider cho tôi trong trường hợp này. Dự án của bạn có thể khác nhưng đối với kịch bản lệnh jQuery nghiêm trọng xung đột trên khung công tác cũ hơn 4 năm, đây là giải pháp của tôi.

Đoạn mã sau (ví dụ: http://www.equant-design.com/aab/shop/category/new-in-whats-new/89) đang cho tôi một suy ngẫm vì tôi đang giúp khách hàng chuyển trang web của mình sang chế độ phản hồi. Thanh trượt hoạt động như được mã hóa nhưng trên các thiết bị di động, các dải ô chỉ hoạt động bằng cách nhấp vào thanh trượt tỷ lệ chứ không phải bảng xếp hạng để xác định phạm vi. Tôi sắp sửa giải mã hoàn toàn nhưng muốn xem liệu có ai biết sửa chữa nhanh về vấn đề này hay không.

jQuery phiên bản: 1.4.2

<script type="text/javascript"> 
    $('#price-range-filter-header').click(function() { 
     FilterContainerSlideUpDown('filter_but', 'price-range-filter-header'); 
     }); 
    $(function() { 
     $("#slider-range").slider({ 
      range: true, 
      min: 0, 
      max: 300, 
      values: [0, 300], 
      step: 5, 
      slide: function(event, ui) 
      { 
       $("#slider-range-caption").html('<?=$currency_type->symbol?>' + ui.values[0] + ' - ' + '<?=$currency_type->symbol?>' + ui.values[1]); 
      }, 
      change: function(event,ui) 
      { 
       ApplyPriceRangeFilter(ui.values[0],ui.values[1]); 
      } 

     }); 

     $("#slider-range-caption").html('<?=$currency_type->symbol?>' + $("#slider-range").slider("values", 0) + ' - ' + '<?=$currency_type->symbol?>' + $("#slider-range").slider("values", 1)); 

     //initialise jquery scrollbar 
     $('.scrollbar').scrollbar(); 
    }); 
</script> 

<div id="filter_but" name="filter_but"> 
    <div id="slider-range"></div> 
</div> 

Answer 1

Tôi gặp sự cố tương tự, cùng với nhiều ứng dụng web di động. Cuối cùng, chán ngấy với quản lý cảm ứng, js bên ngoài, JQuery và thứ tư, tôi đã sử dụng http://refreshless.com/nouislider/. (Hãy chắc chắn rằng tôi đã thực hiện loots của các ứng dụng như vậy, trực tuyến hoặc Phonegap từ v1.4, từ năm 2012).

Hoàn hảo, đơn giản, rõ ràng và do đó dễ dàng tùy chỉnh.

Câu trả lời của tôi: NoUiSlider. Def.

OMG không lặn trong dev khó khăn ... làm cho nó đơn giản

Answer 2

Có vẻ với tôi như có vấn đề với các trang và di chuyển. Nếu tôi là bạn, tôi sẽ tắt tính năng kéo trang (trong khi vẫn cho phép cuộn) để khi người dùng trượt thanh trượt, họ sẽ không kéo trang. Các đoạn mã sau đây đòi hỏi bạn phải sử dụng jQuery di động:

$(document).delegate('.ui-page', 'touchmove', false); 

Ngoài ra, bạn có thể đi với một khuôn khổ kết thúc trước như Foundation hoặc Bootstrap và bạn có thể sử dụng công cụ của họ để đảm bảo mọi thứ đang ở trong đúng nơi và là thực sự thân thiện với thiết bị di động.

Answer 3

Để làm cho tiện ích con giao diện người dùng jQuery hoạt động trên thiết bị di động, bạn cần tích hợp hỗ trợ cho các sự kiện chạm.

này đã được thực hiện trong dự án này: jQuery UI Touch Punch

Bạn chỉ cần đưa nó sau khi jQuery và jQuery UI.

<script src="jquery.ui.touch-punch.min.js"></script>