Sa paggawa ng mga dynamic na tumutugon na website, kailangang pangasiwaan ng developer ang mga mobile na galaw tulad ng pagkurot, pag-tap, at pag-swipe. Ang mga galaw na ito ay pinangangasiwaan ng mga mobile development na wika tulad ng ' kumakaway 'o' tumugon katutubo ” at JavaScript. Hindi pinangangasiwaan ng ibang web programming ang ganitong uri ng kaganapan. Sa kabutihang palad! Sa tulong ng jQuery's ' kaganapan sa pagpindot ” plugin, ang mga kaganapan o kilos na ito ay maaari ding pangasiwaan.
Ipapakita ng blog na ito ang proseso ng paggamit ng jQuery touch event plugin para sa mga mobiles.
Paano Gamitin ang jQuery Touch Events Plugin para sa Mga Mobile?
Binubuo ng jQuery ang mga pagkakaiba sa pagitan ng mga kaganapan sa pagpindot at mga kaganapan sa mobile upang gumamit ng mga pare-parehong API o plugin tulad ng ' kaganapan sa pagpindot ”. Mayroong ilang mga kaganapan na ibinigay ng plugin na ito na nakasaad sa ibaba sa form na tabular:
| mamalo pato | Gumagamit ng isang partikular na function sa dulo ng pag-swipe sa isang elemento. |
| scrollstart | Gumagamit ng isang partikular na function sa simula ng pag-scroll sa napiling elemento. |
| scrollend | Gumagamit ng isang partikular na function sa dulo ng pag-scroll sa elemento. |
| pagbabago ng oryentasyon | Magpapagana ng function kapag nabago ang oryentasyon ng device o mobile gaya ng paglipat sa portrait mula sa landscape na layout. |
Syntax
Ang syntax para sa jQuery touch event ay nakasaad sa ibaba:
$ ( 'ito' ) .touchEvent ( func ( ) {
// iyong code
} )
Sa itaas na syntax:
-
- Ang ' ito ” ay ang selector na isang aksyon bilang isang action caller o napiling elemento.
- Ang ' touchEvent ” ay ang partikular na pangalan ng kaganapan na ginagamit, maaari itong kaganapan mula sa nakasaad sa itaas na talahanayan.
- Ang ' func() ” ay ang custom na function na isasagawa ng ibinigay na kaganapan sa pagpindot.
Ngayon, bisitahin natin ang ilang halimbawa para sa mas mahusay na pag-unawa sa mga kaganapan sa pagpindot.
Halimbawa 1: Paggamit ng Tap at DoubleTap
Sa halimbawang ito, ang ' touchEvent 'kaganapan' tapikin 'at' doubletap ” ay gagamitin upang mag-invoke o magsagawa ng ilang function sa isang napiling elemento:
< html >< ulo >
< script src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > iskrip >
< iskrip src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
iskrip >
ulo >
< katawan >
< h3 istilo = 'kulay: cadetblue;' > Linux h3 >
< pindutan id = 't' > I-tap pindutan >
< pindutan id = 'dt' > I-double tap pindutan >
< p id = 'target' > Ang Halimbawa ng DoubleTap at Tap Touch na Mga Kaganapan. p >
< iskrip >
$ ( '#t' ) .tap ( function ( ) {
$ ( '#target' ) .tago ( ) ;
} )
$ ( '#dt' ) .doubletap ( function ( ) {
$ ( '#target' ) .palabas ( ) ;
} )
iskrip >
katawan >
html >
Ang paliwanag ng code sa itaas:
-
- Una, ang CDN ' Network ng Paghahatid ng Nilalaman 'para sa jQuery at mga kaganapan sa pagpindot ay ipapasok sa loob ng '
” tag para gawing naa-access ang mga ito. Ang mga CDN ay matatagpuan sa opisyal ng jQuery at sa pamamagitan ng pagbisita sa cdnjs ayon sa pagkakabanggit. - Susunod, dalawang elemento ng button ang nilikha na may id ng “ t 'at' dt ”. Gayundin, lumikha ng ' p 'elemento na may id ng ' target ”. Ang pagkilos sa pamamagitan ng kaganapan ng pagpindot ay isasagawa sa elementong ito.
- Sa loob ng '
- Una, ang CDN ' Network ng Paghahatid ng Nilalaman 'para sa jQuery at mga kaganapan sa pagpindot ay ipapasok sa loob ng '