డైనమిక్ రెస్పాన్సివ్ వెబ్‌సైట్‌ల సృష్టిలో, డెవలపర్ మొబైల్ సంజ్ఞలను అలాగే పించ్ చేయడం, ట్యాప్ చేయడం మరియు స్వైప్ చేయడం వంటివి నిర్వహించాల్సి ఉంటుంది. ఈ సంజ్ఞలు మొబైల్ డెవలప్‌మెంట్ భాషల ద్వారా నిర్వహించబడతాయి ' అల్లాడు 'లేదా' స్థానికంగా స్పందించండి ” మరియు జావాస్క్రిప్ట్. ఇతర వెబ్ ప్రోగ్రామింగ్ ఈ విధమైన ఈవెంట్‌ను నిర్వహించదు. అదృష్టవశాత్తూ! j క్వెరీ సహాయంతో ' టచ్ ఈవెంట్ ” ప్లగ్ఇన్, ఈ ఈవెంట్‌లు లేదా సంజ్ఞలు కూడా నిర్వహించబడతాయి.
ఈ బ్లాగ్ మొబైల్‌ల కోసం j క్వెరీ టచ్ ఈవెంట్ ప్లగ్ఇన్ని ఉపయోగించే ప్రక్రియను వివరిస్తుంది.
మొబైల్‌ల కోసం j క్వెరీ టచ్ ఈవెంట్స్ ప్లగిన్‌ని ఎలా ఉపయోగించాలి?
స్థిరమైన APIలు లేదా ప్లగిన్‌లను ఉపయోగించడానికి టచ్ ఈవెంట్‌లు మరియు మొబైల్ ఈవెంట్‌ల మధ్య తేడాలను j క్వెరీ సంగ్రహిస్తుంది “ టచ్ ఈవెంట్ ”. ఈ ప్లగ్ఇన్ అందించిన అనేక ఈవెంట్‌లు పట్టిక రూపంలో క్రింద పేర్కొనబడ్డాయి:
| కొరడా బాతు | మూలకంపై స్వైప్ చివరిలో నిర్దిష్ట ఫంక్షన్‌ను ప్రేరేపిస్తుంది. |
| స్క్రోల్‌స్టార్ట్ | ఎంచుకున్న ఎలిమెంట్‌పై స్క్రోలింగ్ ప్రారంభంలో నిర్దిష్ట ఫంక్షన్‌ను ప్రేరేపిస్తుంది. |
| స్క్రోలెండ్ | మూలకంపై స్క్రోలింగ్ చివరిలో నిర్దిష్ట ఫంక్షన్‌ను ప్రేరేపిస్తుంది. |
| ధోరణి మార్పు | ల్యాండ్‌స్కేప్ లేఅవుట్ నుండి పోర్ట్రెయిట్‌లో కదలడం వంటి పరికరం లేదా మొబైల్ యొక్క ఓరియంటేషన్ మారినప్పుడు ఫంక్షన్‌ను అమలు చేస్తుంది. |
వాక్యనిర్మాణం
j క్వెరీ టచ్ ఈవెంట్‌ల సింటాక్స్ క్రింద పేర్కొనబడింది:
$ ( 'ఇది' ) .టచ్ ఈవెంట్ ( ఫంక్ ( ) {
// మీ కోడ్
} )
పై వాక్యనిర్మాణంలో:
-
- ది ' ఇది ” అనేది సెలెక్టర్, ఇది చర్య కాలర్ లేదా ఎంచుకున్న మూలకం వలె చర్య.
- ది ' టచ్ ఈవెంట్ ” అనేది ఉపయోగించబడుతున్న నిర్దిష్ట ఈవెంట్ పేరు, ఇది పైన పేర్కొన్న పట్టిక నుండి ఈవెంట్ చేయవచ్చు.
- ది ' ఫంక్ () ” అనేది అందించబడిన టచ్ ఈవెంట్ ద్వారా అమలు చేయబడే అనుకూల ఫంక్షన్.
ఇప్పుడు, టచ్ ఈవెంట్‌లను బాగా అర్థం చేసుకోవడానికి కొన్ని ఉదాహరణలను సందర్శిద్దాం.
ఉదాహరణ 1: ట్యాప్ మరియు డబుల్ ట్యాప్ ఉపయోగించడం
ఈ ఉదాహరణలో, ' టచ్ ఈవెంట్ 'సంఘటన' నొక్కండి 'మరియు' డబుల్ ట్యాప్ ఎంచుకున్న మూలకంపై కొంత ఫంక్షన్‌ని అమలు చేయడానికి లేదా నిర్వహించడానికి ” ఉపయోగించబడుతోంది:
< html >< తల >
< స్క్రిప్ట్ src = '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 శైలి = 'రంగు: కాడెట్బ్లూ;' > Linux h3 >
< బటన్ id = 't' > నొక్కండి బటన్ >
< బటన్ id = 'dt' > రెండుసార్లు నొక్కండి బటన్ >
< p id = 'లక్ష్యం' > డబుల్ ట్యాప్ మరియు ట్యాప్ టచ్ ఈవెంట్‌ల ఉదాహరణ. p >
< స్క్రిప్ట్ >
$ ( '#t' ) .ట్యాప్ ( ఫంక్షన్ ( ) {
$ ( '#లక్ష్యం' ) .దాచు ( ) ;
} )
$ ( '#dt' ) .డబుల్టాప్ ( ఫంక్షన్ ( ) {
$ ( '#లక్ష్యం' ) .చూపండి ( ) ;
} )
స్క్రిప్ట్ >
శరీరం >
html >
పై కోడ్ యొక్క వివరణ:
-
- మొదట, CDN ' కంటెంట్ డెలివరీ నెట్‌వర్క్ ' j క్వెరీ మరియు టచ్ ఈవెంట్‌ల కోసం ' లోపల చేర్చబడుతుంది <తల> ” ట్యాగ్ వాటిని యాక్సెస్ చేయడానికి. CDNలను అధికారికంగా కనుగొనవచ్చు j క్వెరీ మరియు cdnjs సందర్శించడం ద్వారా వరుసగా.
- తర్వాత, '' యొక్క idతో రెండు బటన్ మూలకాలు సృష్టించబడతాయి t 'మరియు' dt ”. అలాగే, 'ని సృష్టించండి p '' అనే ఐడితో మూలకం లక్ష్యం ”. టచ్ ఈవెంట్ ద్వారా చర్య ఈ మూలకంపై ప్రదర్శించబడుతుంది.
- లోపల ' <స్క్రిప్ట్> 'ట్యాగ్, ' అనే ఐడితో మూలకాన్ని ఎంచుకోండి t 'మరియు జతచేయి' నొక్కండి ” దానితో టచ్ ఈవెంట్. ఈ ఈవెంట్ ' అనే ఐడితో మరొక html మూలకాన్ని ఎంచుకుంటుంది లక్ష్యం 'మరియు వర్తిస్తుంది' దాచు() ” దానిపై పద్ధతి.
- అంతేకాకుండా, 'ని ఎంచుకోండి dt 'మూలకం మరియు వర్తించు' డబుల్ ట్యాప్ 'టచ్ ఈవెంట్ మరియు అదే పద్ధతిలో వర్తించు' షో() 'పై పద్ధతి' లక్ష్యం ” id మూలకం.
కోడ్ సంకలనం తర్వాత ఉత్పత్తి చేయబడిన అవుట్‌పుట్ క్రింద చూపబడింది:
'ట్యాప్' మరియు 'డబుల్టాప్' టచ్ ఈవెంట్‌లలో చర్యలు జరిగాయని పై అవుట్‌పుట్ చూపిస్తుంది.
ఉదాహరణ 2: స్వైప్ మరియు స్వైపీండ్ టచ్ ఈవెంట్‌ల ఉపయోగం
ఈ ఉదాహరణలో, 'ని అమలు చేయడం స్వైప్ 'మరియు' కొరడా బాతు ” టచ్ ఈవెంట్‌లు ప్రదర్శించబడతాయి:
< స్క్రిప్ట్ >$ ( '#t' ) .స్వైప్ చేయండి ( ఫంక్షన్ ( ) {
$ ( '#లక్ష్యం' ) .దాచు ( ) ;
} )
$ ( '#t' ) .స్వైపింగ్ బాతు ( ఫంక్షన్ ( ) {
$ ( '#లక్ష్యం' ) .దాచు ( ) ;
} )
స్క్రిప్ట్ >
పై j క్వెరీ కోడ్ యొక్క వివరణ క్రింది విధంగా ఉంది:
-
- మొదట, ఎంచుకున్న మూలకం దాని ఐడి ద్వారా ఎంపిక చేయబడుతుంది ' t ' ఇంకా ' స్వైప్ ” ఈవెంట్ దానికి జోడించబడింది. ఈ ఈవెంట్ ఒక ఫంక్షన్‌ను కాల్చివేస్తుంది మరియు ఫైర్డ్ ఫంక్షన్ ఐడి ద్వారా టార్గెటెడ్ ఎలిమెంట్‌ను ఎంచుకుంటుంది “ లక్ష్యం 'మరియు వర్తిస్తుంది' దాచు() ” దాని కంటెంట్ కనిపించకుండా చేయడానికి దానిపై పద్ధతి.
- తరువాత, ' కొరడా బాతు 'ఈవెంట్ అదే మూలకంపై వర్తించబడుతుంది మరియు దాని ఫంక్షన్ వర్తించబడుతుంది' షో() 'ఐడితో ఎంచుకున్న మూలకంపై పద్ధతి' లక్ష్యం ” స్వైప్ ఈవెంట్ ముగిసినప్పుడు కంటెంట్ కనిపించేలా చేయడానికి.
పై కోడ్ కోసం అవుట్‌పుట్ ఇలా ఉత్పత్తి అవుతుంది:
టార్గెటెడ్ ఎలిమెంట్ కంటెంట్ స్వైప్ చేసే సమయంలో దాచబడిందని మరియు స్వైప్ ఈవెంట్ ముగిసినప్పుడు కనిపిస్తుంది అని అవుట్‌పుట్ చూపిస్తుంది.
ఉదాహరణ 3: స్క్రోల్‌స్టార్ట్ మరియు స్క్రోలెండ్ టచ్ ఈవెంట్‌ల ఉపయోగం
ఈ సందర్భంలో, ' స్క్రోల్‌స్టార్ట్ 'మరియు' స్క్రోలెండ్ ”టచ్ ఈవెంట్‌లు అమలు చేయబోతున్నాయి:
< స్క్రిప్ట్ >$ ( '#t' ) .స్క్రోల్‌స్టార్ట్ ( ఫంక్షన్ ( ) {
$ ( '#లక్ష్యం' ) .దాచు ( ) ;
} )
$ ( '#t' ) .స్క్రోలెండ్ ( ఫంక్షన్ ( ) {
$ ( '#లక్ష్యం' ) .చూపండి ( ) ;
} )
స్క్రిప్ట్ >
పై కోడ్ యొక్క వివరణ ఇలా పేర్కొనబడింది:
-
- ఈ ఉదాహరణలో ఉన్న ఏకైక మార్పు “ స్క్రోల్‌స్టార్ట్ 'మరియు' స్క్రోలెండ్ 'ప్రదర్శన చేయవలసిన సంఘటనలు' దాచు() 'మరియు' షో() ”ఒక మూలకంపై పద్ధతులు మరియు మిగిలిన కోడ్‌లు పై ఉదాహరణలో వలెనే ఉంటాయి.
- లక్ష్య వచనం ప్రారంభంలో లేదా స్క్రోలింగ్ సమయంలో దాచబడుతుంది మరియు స్క్రోలింగ్ ముగిసినప్పుడు అది కనిపిస్తుంది.
పై కోడ్ యొక్క సంకలనం తర్వాత ఉత్పత్తి చేయబడిన అవుట్‌పుట్ క్రింద చూపబడింది:
స్క్రోలింగ్ సమయంలో ఎలిమెంట్ కంటెంట్ దాచబడిందని అవుట్‌పుట్ చూపిస్తుంది మరియు స్క్రోలింగ్ ముగిసినప్పుడు అది కనిపిస్తుంది.
ఈ బ్లాగ్ మొబైల్ పరికరాల కోసం j క్వెరీ టచ్ ఈవెంట్ ప్లగిన్‌లను వివరించింది.
ముగింపు
j క్వెరీ ' టచ్ ఈవెంట్ ” మొబైల్ కోసం ప్లగ్ఇన్, స్వైపింగ్, ట్యాపింగ్, ఓరియంటేషన్ మార్పు మొదలైన టచ్ మొబైల్‌లలో జరిగే ఈవెంట్‌లను ప్రత్యేకంగా నిర్వహించే ఈవెంట్‌లను జోడించడానికి j క్వెరీని అనుమతిస్తుంది. ఈ ప్లగ్ఇన్ అందించిన ఈవెంట్‌లు సాంప్రదాయం వలె అమలు చేయబడతాయి “ క్లిక్ చేయండి ”లేదా ఇతర సంఘటనలు. ఈ ప్లగ్ఇన్ని ఉపయోగించడం ద్వారా, డెవలపర్ మొబైల్‌తో వినియోగదారు పరస్పర చర్యకు అనుగుణంగా నిర్దిష్ట ఫంక్షన్‌లను సులభంగా వర్తింపజేయవచ్చు. ఈ బ్లాగ్ మొబైల్ కోసం j క్వెరీ టచ్ ఈవెంట్ ప్లగ్గింగ్ గురించి వివరించింది.