Tworząc dynamicznie responsywne strony internetowe, programista musi obsługiwać gesty mobilne, a także ściskanie, dotykanie i przesuwanie. Gesty te są obsługiwane przez języki programowania aplikacji mobilnych, takie jak „ trzepotanie ' Lub ' reaguj natywnie ” i JavaScript. Inne programy internetowe nie obsługują tego rodzaju zdarzeń. Na szczęście! Z pomocą jQuery „ wydarzenie dotykowe ”, te zdarzenia lub gesty również mogą być obsługiwane.
W tym blogu przedstawiono proces korzystania z wtyczki zdarzenia dotykowego jQuery dla telefonów komórkowych.
Jak korzystać z wtyczki jQuery Touch Events dla telefonów komórkowych?
jQuery abstrahuje różnice pomiędzy zdarzeniami dotykowymi i zdarzeniami mobilnymi, aby używać spójnych interfejsów API lub wtyczek, takich jak „ wydarzenie dotykowe ”. Wtyczka udostępnia kilka zdarzeń, które przedstawiono poniżej w formie tabelarycznej:
| ubijanie kaczki | Wywołuje określoną funkcję na końcu przesuwania palcem po elemencie. |
| przewiństart | Wywołuje określoną funkcję na początku przewijania wybranego elementu. |
| przewiń | Wywołuje określoną funkcję na końcu przewijania elementu. |
| zmiana orientacji | Uruchamia funkcję, gdy orientacja urządzenia lub telefonu komórkowego ulegnie zmianie, np. przy przechodzeniu z układu poziomego w układzie pionowym. |
Składnia
Poniżej podano składnię zdarzeń dotykowych jQuery:
$ ( 'Ten' ) .touchWydarzenie ( funk ( ) {
// Twój kod
} )
W powyższej składni:
-
- „ Ten ” to selektor będący akcją jako wywołujący akcję lub wybrany element.
- „ dotknijWydarzenie ” to konkretna nazwa używanego zdarzenia, może to być zdarzenie z powyższej tabeli.
- „ funkcja() ” to funkcja niestandardowa, która będzie wykonywana przez dostarczone zdarzenie dotykowe.
Przyjrzyjmy się teraz kilku przykładom, aby lepiej zrozumieć zdarzenia dotykowe.
Przykład 1: Użycie Tap i DoubleTap
W tym przykładzie „ dotknijWydarzenie ' wydarzenie ' uzyskiwać ' I ' podwójne wciśnięcie ” będzie używany do wywołania lub wykonania jakiejś funkcji na wybranym elemencie:
< HTML >< głowa >
< skrypt src = „https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js” > scenariusz >
< scenariusz źródło = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
scenariusz >
głowa >
< ciało >
< h3 styl = 'kolor: błękit kadetowy;' > Linuksa h3 >
< przycisk ID = 'T' > Uzyskiwać przycisk >
< przycisk ID = „dt” > Podwójne wciśnięcie przycisk >
< P ID = 'cel' > Przykład zdarzeń DoubleTap i Tap Touch. P >
< scenariusz >
$ ( '#T' ) .uzyskiwać ( funkcjonować ( ) {
$ ( '#cel' ) .ukrywać ( ) ;
} )
$ ( „#dt” ) .podwójne wciśnięcie ( funkcjonować ( ) {
$ ( '#cel' ) .pokazywać ( ) ;
} )
scenariusz >
ciało >
HTML >
Wyjaśnienie powyższego kodu:
-
- Po pierwsze, CDN „ Sieć dostarczania treści ” dla zdarzeń jQuery i touch zostanie wstawiony wewnątrz „
”, aby były dostępne. CDN można znaleźć na oficjalnej stronie jQuery i odwiedzając stronę cdnjs odpowiednio. - Następnie tworzone są dwa elementy przycisku o identyfikatorze „ T ' I ' dt ”. Utwórz także „ P ” element o identyfikatorze „ cel ”. Na tym elemencie zostanie wykonana akcja po zdarzeniu touch.
- W środku '
”, wybierz element o identyfikatorze „ T ” i dołącz „ uzyskiwać ” dotknij nim wydarzenia. To zdarzenie wybiera inny element HTML o identyfikatorze „ cel ” i stosuje „ ukrywać() ” metoda na to. - Ponadto wybierz opcję „ dt ” i zastosuj element „ podwójne wciśnięcie ” dotknij zdarzenia i w ten sam sposób zastosuj „ pokazywać() ” metoda na „ cel element identyfikacyjny.
- Po pierwsze, CDN „ Sieć dostarczania treści ” dla zdarzeń jQuery i touch zostanie wstawiony wewnątrz „
Wynik wygenerowany po kompilacji kodu pokazano poniżej:
Powyższe dane wyjściowe pokazują, że akcje zostały wykonane w przypadku zdarzeń dotykowych „dotknięcie” i „podwójne dotknięcie”.
Przykład 2: Użycie zdarzeń dotykowych przeciągnięcia i przesunięcia
W tym przykładzie wdrożenie „ trzepnąć ' I ' ubijanie kaczki ” zostaną pokazane zdarzenia dotykowe:
< scenariusz >$ ( '#T' ) .trzepnąć ( funkcjonować ( ) {
$ ( '#cel' ) .ukrywać ( ) ;
} )
$ ( '#T' ) .przesuwająca kaczka ( funkcjonować ( ) {
$ ( '#cel' ) .ukrywać ( ) ;
} )
scenariusz >
Opis powyższego kodu jQuery wygląda następująco:
-
- Najpierw wybrany element jest wybierany poprzez jego identyfikator „ T ” i „ trzepnąć ” jest do niego dołączone wydarzenie. To zdarzenie uruchamia funkcję, a uruchomiona funkcja wybiera docelowy element poprzez identyfikator „ cel ” i stosuje „ ukrywać() ” na nim, aby jego zawartość była niewidoczna.
- Następnie „ ubijanie kaczki ” zdarzenie jest stosowane do tego samego elementu, a jego funkcja jest stosowana do „ pokazywać() ” nad wybranym elementem o identyfikatorze „ cel ”, aby zawartość była widoczna po zakończeniu zdarzenia przesunięcia.
Dane wyjściowe powyższego kodu są generowane jako:
Dane wyjściowe pokazują, że treść elementu docelowego zostaje ukryta w momencie przesunięcia i pojawia się po zakończeniu zdarzenia przesunięcia.
Przykład 3: Użycie scrollstart i scrollend Touch Events
W tym przypadku „ przewiństart ' I ' przewiń ” będą realizowane zdarzenia dotykowe:
< scenariusz >$ ( '#T' ) .scrollstart ( funkcjonować ( ) {
$ ( '#cel' ) .ukrywać ( ) ;
} )
$ ( '#T' ) .przewiń ( funkcjonować ( ) {
$ ( '#cel' ) .pokazywać ( ) ;
} )
scenariusz >
Wyjaśnienie powyższego kodu jest następujące:
-
- Jedyną zmianą w tym przykładzie jest użycie „ przewiństart ' I ' przewiń ” wydarzenia do wykonania „ ukrywać() ' I ' pokazywać() ” nad elementem, a reszta kodu pozostanie taka sama jak w powyższym przykładzie.
- Docelowy tekst zostaje ukryty na początku lub w trakcie przewijania i staje się widoczny po zakończeniu przewijania.
Wynik wygenerowany po kompilacji powyższego kodu pokazano poniżej:
Dane wyjściowe pokazują, że zawartość elementu jest ukryta w momencie przewijania i staje się widoczna po zakończeniu przewijania.
W tym blogu wyjaśniono wtyczki zdarzeń dotykowych jQuery dla urządzeń mobilnych.
Wniosek
jQuery” wydarzenie dotykowe ” wtyczka dla urządzeń mobilnych, umożliwia jQuery dodawanie zdarzeń, które specyficznie obsługują zdarzenia występujące na telefonach dotykowych, takie jak przesuwanie, stukanie, zmiana orientacji itp. Zdarzenia dostarczane przez tę wtyczkę są implementowane podobnie jak tradycyjne „ na kliknięcie ”lub inne wydarzenia. Korzystając z tej wtyczki, programista może z łatwością zastosować określone funkcje w zależności od interakcji użytkownika z telefonem komórkowym. W tym blogu wyjaśniono podłączanie zdarzeń dotykowych jQuery dla urządzeń mobilnych.