டைனமிக் ரெஸ்பான்சிவ் இணையதளங்களை உருவாக்குவதில், டெவலப்பர் மொபைல் சைகைகளையும், கிள்ளுதல், தட்டுதல் மற்றும் ஸ்வைப் செய்தல் போன்றவற்றையும் கையாள வேண்டும். இந்த சைகைகள் மொபைல் மேம்பாட்டு மொழிகளால் கையாளப்படுகின்றன ' படபடப்பு ' அல்லது ' வினைபுரியும் ” மற்றும் ஜாவாஸ்கிரிப்ட். பிற வலை நிரலாக்கங்கள் இந்த வகையான நிகழ்வைக் கையாளாது. அதிர்ஷ்டவசமாக! jQuery இன் உதவியுடன் ' தொடுதல் நிகழ்வு ” சொருகி, இந்த நிகழ்வுகள் அல்லது சைகைகளையும் கையாளலாம்.
மொபைல்களுக்கான jQuery டச் நிகழ்வு செருகுநிரலைப் பயன்படுத்துவதற்கான செயல்முறையை இந்த வலைப்பதிவு விளக்குகிறது.
மொபைல்களுக்கான jQuery Touch Events செருகுநிரலை எவ்வாறு பயன்படுத்துவது?
நிலையான APIகள் அல்லது செருகுநிரல்களைப் பயன்படுத்த, தொடு நிகழ்வுகள் மற்றும் மொபைல் நிகழ்வுகளுக்கு இடையிலான வேறுபாடுகளை jQuery சுருக்கமாகக் கூறுகிறது ' தொடுதல் நிகழ்வு ”. இந்த செருகுநிரல் வழங்கும் பல நிகழ்வுகள் அட்டவணை வடிவத்தில் கீழே கொடுக்கப்பட்டுள்ளன:
| சாட்டையடி வாத்து | ஒரு உறுப்பு மீது ஸ்வைப் செய்யும் முடிவில் ஒரு குறிப்பிட்ட செயல்பாட்டைத் தூண்டுகிறது. |
| ஸ்க்ரோல்ஸ்டார்ட் | தேர்ந்தெடுக்கப்பட்ட உறுப்பு மீது ஸ்க்ரோலிங் தொடக்கத்தில் ஒரு குறிப்பிட்ட செயல்பாட்டை செயல்படுத்துகிறது. |
| சுருள் | உறுப்பு மீது ஸ்க்ரோலிங் முடிவில் ஒரு குறிப்பிட்ட செயல்பாட்டை செயல்படுத்துகிறது. |
| நோக்குநிலை மாற்றம் | சாதனம் அல்லது மொபைலின் நோக்குநிலையானது நிலப்பரப்பு தளவமைப்பிலிருந்து உருவப்படத்தை நகர்த்துவது போன்ற ஒரு செயல்பாட்டைச் செயல்படுத்துகிறது. |
தொடரியல்
jQuery டச் நிகழ்வுகளுக்கான தொடரியல் கீழே கூறப்பட்டுள்ளது:
$ ( 'இது' ) .தொடுதல் நிகழ்வு ( செயல்பாடு ( ) {
// உங்கள் குறியீடு
} )
மேலே உள்ள தொடரியல்:
-
- ' இது ” என்பது தேர்வாளர், இது ஒரு செயல் அழைப்பாளராக அல்லது தேர்ந்தெடுக்கப்பட்ட உறுப்பு.
- ' தொடுதல் நிகழ்வு ” என்பது பயன்படுத்தப்படும் குறிப்பிட்ட நிகழ்வின் பெயர், இது மேலே கூறப்பட்ட அட்டவணையில் இருந்து நிகழ்வது.
- ' func() ” என்பது வழங்கப்பட்ட தொடு நிகழ்வின் மூலம் செயல்படுத்தப்படும் தனிப்பயன் செயல்பாடாகும்.
இப்போது, தொடுதல் நிகழ்வுகளைப் பற்றி நன்றாகப் புரிந்துகொள்ள இரண்டு உதாரணங்களைப் பார்ப்போம்.
எடுத்துக்காட்டு 1: தட்டுதல் மற்றும் இருமுறை தட்டுதல் ஆகியவற்றைப் பயன்படுத்துதல்
இந்த எடுத்துக்காட்டில், ' தொடுதல் நிகழ்வு ' நிகழ்வு ' தட்டவும் 'மற்றும்' இரட்டை குழாய் 'தேர்ந்தெடுக்கப்பட்ட உறுப்பின் மீது சில செயல்பாடுகளைச் செய்ய அல்லது செயல்படுத்தப் பயன்படும்:
< html >< தலை >
< ஸ்கிரிப்ட் எஸ்ஆர்சி = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > கையால் எழுதப்பட்ட தாள் >
< கையால் எழுதப்பட்ட தாள் src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
கையால் எழுதப்பட்ட தாள் >
தலை >
< உடல் >
< h3 பாணி = 'நிறம்: கேடட்ப்ளூ;' > லினக்ஸ் h3 >
< பொத்தானை ஐடி = 'டி' > தட்டவும் பொத்தானை >
< பொத்தானை ஐடி = 'dt' > இரட்டை குழாய் பொத்தானை >
< ப ஐடி = 'இலக்கு' > DoubleTap மற்றும் Tap Touch Events உதாரணம். ப >
< கையால் எழுதப்பட்ட தாள் >
$ ( '#t' ) .தட்டவும் ( செயல்பாடு ( ) {
$ ( '#இலக்கு' ) .மறை ( ) ;
} )
$ ( '#dt' ) .இரட்டை குழாய் ( செயல்பாடு ( ) {
$ ( '#இலக்கு' ) .காண்பிக்க ( ) ;
} )
கையால் எழுதப்பட்ட தாள் >
உடல் >
html >
மேலே உள்ள குறியீட்டின் விளக்கம்:
-
- முதலில், CDN ' உள்ளடக்க விநியோக நெட்வொர்க் 'jQuery மற்றும் டச் நிகழ்வுகளுக்கு' உள்ளே செருகப்படும் <தலை> ” என்ற குறிச்சொல்லை அணுகுவதற்கு. CDNகளை அதிகாரியில் காணலாம் jQuery மற்றும் cdnjs ஐ பார்வையிடுவதன் மூலம் முறையே.
- அடுத்து, ' என்ற ஐடியுடன் இரண்டு பொத்தான் கூறுகள் உருவாக்கப்படுகின்றன. டி 'மற்றும்' dt ”. மேலும், ஒரு ' ப '' என்ற அடையாளத்துடன் கூடிய உறுப்பு இலக்கு ”. தொடுதல் நிகழ்வின் செயல் இந்த உறுப்பில் செய்யப்பட உள்ளது.
- உள்ளே '