Kategoriler

jQuery Touchswipe Eklentisi ile Parmak Hareketlerini Yakalamak

14 yorum

Telefon ve Tabletlerde ekrana parmak ile dokunduğumuzda bunu yakalayıp işlem yapmamızı sağlayacak güzel bir eklenti tanıtacağım size.
Ben bu eklentiyi kullanarak parmak ile kaydırarak açılıp kapanan bir yan menü örneği hazırladım videoda.
Umarım işinize yarar, zira ben responsive dökümlerde bu eklentisi sıkça kullanıyorum.

Eklenti Adresi;
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

Demo Adresi;
http://www.erbilen.net/demo/jquery-touchswipe/index.html

Yorumlar (14)

Alperen Uzun demiş ki;

paylaşım için teşekkürler..

Tayfun Erbilen demiş ki;

Teşekkürler @Ahmet Mazlum Aras ,
Soran arkadaşlara da bir cevap olmuş oldu böylece :)

Ahmet Mazlum Aras demiş ki;

Merhaba Tayfun.

Kodlara allowPageScroll:"auto" bunu da eklersen iyi olur. Eklemeyince body' de dikey ve yatay işlemler yaptığımızda olmuyor. Sadece Menu de ki işlemleri yapabiliyoruz.
Genellikle de Apple cihazlarında yapıyor.

batuhan saygılı demiş ki;

yaptığım projeme uyguladım ama telefonda aşağıya doğru indikçe takılmalar oluyor bunun çözümü nedir acaba

Mert Güzey demiş ki;

Yahu parmağınızla kaydırın yazısını görünce anlık dalgınlıkla laptop ekranında parmağımla kaydırmayı denedim :/ yapmayın abi şöyle :D

+db+ demiş ki;

Mouse hareketiyle de çalışıyor. :)

Yusuf Bakır demiş ki;

Jquery ile pencerenin genişliği yani width'ini bir değişkene atayıp,
var w = $(window).width()
if(w < 768){
// burayada o js kodlarını atıp sadece o kodların " w " nin boyutu 768 den küçük olduğunda çalıştırabilirsiniz beyler.
}

Tayfun Erbilen demiş ki;

@Ali Unal, video orada hocam. Eminim atladığınız bir şey vardır, kontrol edin. Birde aşağı yukarı hareket etmiyor ne demek onu anlayamadım, hangi amaç için kullandınız eklentiyi?

Ali Unal demiş ki;

Öncelikle teşekkür ederim. Siteme uyguladım fakat site aşağı yukarı hareket etmiyor. Bu konuda yardım eder misin?

Davut Kember demiş ki;

Gerçekten çok iyiymiş..

Tayfun Erbilen demiş ki;

@Ekren ÖZER, aslında burada olay parmak olayını yakalamak. Sonrası sizin hayal gücünüze kalmış ben menü örneği yapmayı tercih ettim örneğin.
Orada menü açıldığında body'e de şu kodları eklersek her şey düzgün çalışır;

$('body').css('margin-left', '251px');

Ekrem ÖZER demiş ki;

Çok faydalı bir eğitim olmuş Tayfun. Emeğine sağlık. Ancak bir sorum olacak menü yazının üstüne geliyor, yazı ile birlikte kayması gerekmez miydi? Bu js ile mi alakalı yoksa html iskeletle mi?

Tayfun Erbilen demiş ki;

İsmail elbette bu mümkün. Örneğin javascript ile mobilden olup olmadığını anlarsın, jquery kodlarını da bu if içinde çalıştırırsın.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// jquery touchswipe kodları
}

Usluer demiş ki;

Bu olayı sadece mobilde kullanamaz mıyız peki Tayfun? Fare ile kaydırma yapınca bu fonksiyonun çalışmasını istemiyorum ama mobilde çalışsın.

Yorum Gönder