Dinamik duyarlı web sitelerinin oluşturulmasında geliştiricinin, kıstırma, dokunma ve kaydırma gibi mobil hareketlerin yanı sıra mobil hareketleri de kullanması gerekir. Bu hareketler mobil geliştirme dilleri tarafından gerçekleştirilir: ' çarpıntı ' veya ' yerli tepki ” ve JavaScript. Diğer web programlama bu tür olayları işlemez. Neyse ki! jQuery’nin yardımıyla “ dokunma olayı ” eklentisi ile bu olaylar veya jestler de ele alınabilir.
Bu blog, mobil cihazlar için jQuery touch event eklentisini kullanma sürecini gösterecek.
Mobil Cihazlar için jQuery Touch Events Eklentisi Nasıl Kullanılır?
jQuery, tutarlı API'leri veya eklentileri kullanmak için dokunma etkinlikleri ile mobil etkinlikler arasındaki farkları soyutlar: ' dokunma olayı ”. Bu eklenti tarafından sağlanan ve aşağıda tablo halinde belirtilen çeşitli olaylar vardır:
| ördek kırbaçlanıyor | Bir öğe üzerinde kaydırmanın sonunda belirli bir işlevi çağırır. |
| kaydırma başlangıcı | Seçilen öğe üzerinde kaydırmanın başlangıcında belirli bir işlevi çağırır. |
| kaydırma ucu | Öğe üzerinde kaydırmanın sonunda belirli bir işlevi çağırır. |
| yönelim değişikliği | Yatay düzenden dikeyde hareket etme gibi cihazın veya cep telefonunun yönü değiştiğinde bir işlevi çalıştırır. |
Sözdizimi
jQuery touch olaylarının sözdizimi aşağıda belirtilmiştir:
$ ( 'Bu' ) .touchEvent ( işlev ( ) {
// senin kodun
} )
Yukarıdaki sözdiziminde:
-
- “ Bu ”, eylem çağıran veya seçilen öğe olarak bir eylem olan seçicidir.
- “ dokunma olayı ”, kullanılan spesifik olay adıdır, yukarıda belirtilen tablodan olay oluşturabilir.
- “ işlev() ”, sağlanan dokunma olayı tarafından yürütülecek özel işlevdir.
Şimdi dokunma olaylarını daha iyi anlamak için birkaç örneği inceleyelim.
Örnek 1: Dokunma ve Çift Dokunmanın Kullanımı
Bu örnekte “ dokunma olayı ' etkinlik ' musluk ' Ve ' iki kez dokunma ”, seçilen bir öğe üzerinde bazı işlevleri çağırmak veya gerçekleştirmek için kullanılacak:
< HTML >< KAFA >
< komut dosyası kaynağı = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > senaryo >
< senaryo kaynak = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
senaryo >
KAFA >
< vücut >
< h3 stil = 'renk: öğrenci mavisi;' > Linux h3 >
< düğme İD = 'T' > Musluk düğme >
< düğme İD = 'dt' > İki kez dokunun düğme >
< P İD = 'hedef' > DoubleTap ve Tap Touch Olayları Örneği. P >
< senaryo >
$ ( '#T' ) .musluk ( işlev ( ) {
$ ( '#hedef' ) .saklamak ( ) ;
} )
$ ( '#dt' ) .çift dokunma ( işlev ( ) {
$ ( '#hedef' ) .göstermek ( ) ;
} )
senaryo >
vücut >
HTML >
Yukarıdaki kodun açıklaması:
-
- İlk olarak CDN “ İçerik Dağıtım Ağı jQuery ve touch olayları için '' içine eklenecek
” etiketini kullanarak bunları erişilebilir hale getirin. CDN'leri resmi sitede bulabilirsiniz. jQuery'den ve cdnjs'yi ziyaret ederek sırasıyla. - Daha sonra “ kimliğine sahip iki düğme öğesi oluşturulur. T ' Ve ' dt ”. Ayrıca bir ' P ' kimliğine sahip ' öğesi hedef ”. Dokunma olayının eylemi bu öğe üzerinde gerçekleştirilecek.
- İçinde '
- İlk olarak CDN “ İçerik Dağıtım Ağı jQuery ve touch olayları için '' içine eklenecek