Dokunmatik cihazlarda jQuery UI kaydırıcıları

96

JQuery UI kullanarak bir web sitesi geliştiriyorum ve sitemde dokunmatik ekranlı cihazlarda görüntülendiğinde uyumsuz görünen birkaç öğe var; herhangi bir hataya neden olmazlar, ancak davranış olması gerektiği gibi değildir.

Söz konusu öğeler, jQuery UI tarafından tanımlanan kaydırıcılar ve aralık kaydırıcılarıdır; dokunmatik ekranda, bir tutamacı kaldırmak gibi bir dokunuş ve tutamacı kaydırıcı boyunca sürüklerken bir sürükleme kaydetmek yerine, yalnızca tüm web sayfasını ekranın kenarına kaydırır. Tutamaca dokunursanız ve ardından tutamacın bitmesini istediğiniz kaydırıcıdaki konuma dokunursanız çalışır, ancak bu çok yavaştır ve ideal değildir. Herhangi bir fikir?

Jqtouch eklentisini indirmeyi ve ardından .touch([...])tüm çağrılara slider () ve rangeslider () eklemeyi denedim, ancak bu işe yaramadı.

Teşekkürler!

GÜNCELLEME: Bu "yamayı" jQuery UI web sitesinde buldum

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

Bu, iPhone'da kaydırıcıyı kolaylaştırdığını söylüyor, ancak şimdi başka bir aptalca soru için: Bu "yamayı" koduma nasıl dahil edebilirim? Bir eklenti gibi kodun başına eklemeli miyim?

slider touch jqtouch

— jqcoder
kaynak

141

Görünüşe göre bu kitaplık aradığınız şeyi sunuyor:

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

Ayrıca bazı örnek kullanım kodlarına da sahiptir (sadece eklentiyi ekleyin):

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

— Dazbradbury
kaynak

28

Kitlelere dikkat edin: her şeye değil, kaydırma çubuğuna takın. (JQuery kaydırıcısı için$('.ui-slider-handle').draggable();

— PaulSkinner

18

Şimdi kaydırma çubuğunu sayfanın her yerine taşıyabilirim !! Bu gülünç.

— dezman

Kolu Firefox Mac'te sayfanın her yerine taşıyabilirim. Koşullu if (ipad | iphone) ... ve ardından sürüklenebilir () koymamız gerekip gerekmediğini merak ediyorum.

— Joe Hyde

13

Yukarıdaki orijinal yorumumu kaşı. Bu sadece bu eklentiyi HEAD'e dahil ederek çalışır. <Script src> 'yi $ (selector) .draggable () eklemeyin; sürgü tutamaçlarının çalışmasını sağlamak için.

— Joe Hyde

6

Sadece dokunmatik yumruk komut dosyasını eklemeniz gerekiyor ve hepsi bu. @JoeHyde'nin ikinci yorumunda söylediği gibi, herhangi bir öğede .draggable () 'ı çağırmaya gerek yoktur. Sadece senaryoyu ekleyin ve çalışmalıdır.

— Jack Vial

22

Bununla ilgili yeni bilgiler eklemek istedim. Dokunmatik yumruk, iPad'ler ve Android cihazlar için iyi çalışacaktır. Ancak kaydırıcı, test edebileceğim kadarıyla Windows mobil cihazlarda çalışmayacak (jquery ui ve Touch punch'ın en son sürümleriyle)

Düzeltme oldukça basittir, sadece aşağıdaki CSS kurallarını .ui-slider-handle'a ekleyin:

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

Bu yardımcı olur umarım

— Stijn_d
kaynak

benim için çalışmıyor mu? herhangi bir örnek bağlantı lütfen @Stijn_d

— ShibinRagh

uhh ama bu gerçek dokunma yumruğunun

— işleyişini mahvediyor

Bu benim sorunumu çözdü. Teşekkürler!

— parker_codes

Ne de bir dokunmatik ekran ile Dell dizüstü formu beni çalışma jsfiddle.net/jhtcqbqo

— Jean-François Beauchamp

Android telefonda görüntülendiğinde çok gecikmeli ve dalgalı olan bataklık standardı bir HTML kaydırıcısı kullanıyorum. Eklemek touch-action: none;bu gecikmeyi anında ortadan kaldırdı. Yani bu hem bir teşekkür hem de gelecekte aynı sorunu yaşayan herkese bir not: Özel CSS'ye sahip dalgalı veya gecikmeli HTML kaydırıcıları bu özellikten yararlanabilir.

— Timmiej93

6

@Dazbradbury'nin önerdiği gibi, dokunma delme kitaplığı, fare olaylarını dokunma olaylarına çevirmeye yardımcı olabilir. .Draggable () içindeki parametreler, kaydırıcının hareketini sınırlar, böylece kaydırıcı üst öğesinin ötesine taşınamaz.

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

DÜZENLEME: Zaten bir Jquery UI kaydırıcısı kullanıyorsanız , yalnızca touchpunch kitaplığını eklemeniz gerekir. .Ui-slider-handle için .draggable () 'ı çağırmayın, çünkü mevcut işlevselliğin üzerine yazacaktır.

— DPH Trading Danish Plate House
kaynak

Bu benim için çalışmasını sağladı. Şimdi tek sorun, arka plan bölgesinin (aralık: "min" ayarlandığında) kaydırıcı konumuna uymamasıdır.

— ejectamenta

5

Ben de aynı sorunu yaşadım. JQuery UI'nin kaydırıcısında ayrıntılı bir kaydırıcı UI geliştirdim, yalnızca mobil cihazlarda çalışmadığını fark etmek için. Burada listelenen önerileri denedim, ancak yalnızca jQuery UI Slider'ı temel alan özel bir çözüme sahip olduğum için işe yaramadı.

Sadece noUiSlider'ı kullanın .

JQuery UI kaydırıcısının üzerine inşa ettiğim tüm ayrıntılı özellikleri (ve çok daha fazlasını) yapar. Mobil cihazlarda güzel bir şekilde çalışır ve ayrıca şekillendirmesi de kolaydır.

— Adam Karacsony
kaynak