У креирању веб локација са динамичким одзивом, програмер треба да рукује покретима за мобилне уређаје као што су штипање, тапкање и превлачење. Овим покретима рукују језици за развој мобилних уређаја попут „ лепршати ” или “ реаговати нативе ” и ЈаваСцрипт. Друго веб програмирање не обрађује ову врсту догађаја. Срећом! Уз помоћ јКуери-ја „ додирни догађај ” додатак, ови догађаји или покрети такође могу да се обрађују.
Овај блог ће илустровати процес коришћења јКуери тоуцх додатка за догађаје за мобилне уређаје.
Како користити додатак јКуери Тоуцх Евентс за мобилне уређаје?
јКуери апстрахује разлике између догађаја додира и мобилних догађаја да би користио доследне АПИ-је или додатке као што су „ додирни догађај ”. Постоји неколико догађаја које пружа овај додатак који су наведени у наставку у табели:
| шибање патке | Позива одређену функцију на крају преласка преко елемента. |
| сцроллстарт | Позива одређену функцију на почетку померања на изабраном елементу. |
| сцролленд | Позива одређену функцију на крају померања елемента. |
| ориентатионцханге | Покреће функцију када се оријентација уређаја или мобилног телефона промени као померање портрета из пејзажног распореда. |
Синтакса
Синтакса за јКуери додирне догађаје је наведена у наставку:
$ ( 'ово' ) .тоуцхЕвент ( фунц ( ) {
// ваш код
} )
У горњој синтакси:
-
- „ ово ” је селектор који је радња као позивалац акције или изабрани елемент.
- „ тоуцхЕвент ” је специфично име догађаја који се користи, може се десити из горе наведене табеле.
- „ фунц() ” је прилагођена функција коју ће извршити наведени догађај додира.
Сада, хајде да посетимо неколико примера за боље разумевање додирних догађаја.
Пример 1: Употреба Тап и ДоублеТап
У овом примеру, „ тоуцхЕвент “догађај” славина ' и ' доублетап ” ће се користити за позивање или обављање неке функције над изабраним елементом:
< хтмл >< глава >
< сцрипт срц = '169ФА1ФЕ82768018ФАА3Ф4БЕ75АФ6Е3ЕЦЦ6ФЕ9АЕ' > скрипта >
< скрипта срц = '8ЦЦ81ФБ3А40АДА91ЦД44А1А66855791496ЦФ828Ц' >
скрипта >
глава >
< тело >
< х3 стил = 'боја: кадетско плава;' > Линук х3 >
< дугме ид = 'т' > Славина дугме >
< дугме ид = 'дт' > Двапут додирните дугме >
< стр ид = 'циља' > Пример догађаја ДоублеТап анд Тап Тоуцх. стр >
< скрипта >
$ ( '#т' ) .славина ( функција ( ) {
$ ( '#таргет' ) .сакрити ( ) ;
} )
$ ( '#дт' ) .доублетап ( функција ( ) {
$ ( '#таргет' ) .Прикажи ( ) ;
} )
скрипта >
тело >
хтмл >
Објашњење горњег кода:
-
- Прво, ЦДН “ Мрежа за испоруку садржаја ” за јКуери и додирне догађаје ће бити уметнуто унутар „ <хеад> ” да бисте им учинили доступним. ЦДН-ови се могу наћи на службеној страници јКуери-ја и путем посете цдњс редом.
- Затим се креирају два елемента дугмета са ИД-ом „ т ' и ' дт ”. Такође, креирајте „ стр ” елемент са ИД-ом „ циљ ”. Акција додирног догађаја ће се извршити на овом елементу.
- Унутар ' <сцрипт> “, изаберите елемент са ИД-ом “ т “ и приложите „ славина ” додирнути догађај са њим. Овај догађај бира други хтмл елемент са ИД-ом „ циљ ” и примењује „ сакрити() ” метод на њему.
- Штавише, изаберите „ дт ” елемент и примените „ доублетап ” додирните догађај и на исти начин примените „ Прикажи() ” метод на „ циљ ” ид елемент.
Излаз генерисан након компилације кода је приказан у наставку:
Горњи излаз показује да су радње извршене на догађајима додира „тап“ и „доублеп“.
Пример 2: Коришћење догађаја превлачења и додира
У овом примеру, имплементација „ превуците прстом ' и ' шибање патке ” ће бити демонстрирани догађаји на додир:
< скрипта >$ ( '#т' ) .свипе ( функција ( ) {
$ ( '#таргет' ) .сакрити ( ) ;
} )
$ ( '#т' ) .свипинг патка ( функција ( ) {
$ ( '#таргет' ) .сакрити ( ) ;
} )
скрипта >
Опис горњег јКуери кода је следећи:
-
- Прво, изабрани елемент се бира преко његовог ИД-а “ т ” и „ превуците прстом ” догађај је приложен уз њега. Овај догађај покреће функцију и активирана функција бира циљани елемент преко ид-а „ циљ ” и примењује „ сакрити() ” на њему како би његов садржај учинио невидљивим.
- Затим, „ шибање патке ” догађај се примењује на исти елемент и његова функција примењује „ Прикажи() ” метод преко изабраног елемента са ИД-ом „ циљ ” да би садржај био видљив када се догађај превлачења заврши.
Излаз за горњи код се генерише као:
Излаз показује да се садржај циљаног елемента сакрива у време превлачења и појављује се када се догађај превлачења заврши.
Пример 3: Коришћење Сцроллстарт и Сцролленд додирних догађаја
У овом случају, „ сцроллстарт ' и ' сцролленд ” ће се имплементирати додирни догађаји:
< скрипта >$ ( '#т' ) .сцроллстарт ( функција ( ) {
$ ( '#таргет' ) .сакрити ( ) ;
} )
$ ( '#т' ) .сцролленд ( функција ( ) {
$ ( '#таргет' ) .Прикажи ( ) ;
} )
скрипта >
Објашњење за горњи код је наведено као:
-
- Једина промена у овом примеру је употреба „ сцроллстарт ' и ' сцролленд „догађаји за извођење“ сакрити() ' и ' Прикажи() ” методе над елементом и остатак кода ће остати исти као у горњем примеру.
- Циљани текст се сакрива на почетку или током померања и постаје видљив када се скроловање заврши.
Излаз генерисан након компилације горњег кода је приказан у наставку:
Излаз показује да је садржај елемента скривен у време померања и да постаје видљив када се скроловање заврши.
Овај блог је објаснио јКуери тоуцх додатке за догађаје за мобилне уређаје.
Закључак
јКуери “ додирни догађај ” додатак за мобилне уређаје, омогућава јКуери-ју да додаје догађаје који посебно управљају догађајима који се дешавају на мобилним уређајима са додиром попут превлачења, тапкања, промене оријентације, итд. Догађаји које обезбеђује овај додатак имплементирају се као традиционални „ онцлицк ” или друге догађаје. Коришћењем овог додатка, програмер може лако да примени одређене функције у складу са интеракцијом корисника са мобилним уређајем. Овај блог је објаснио прикључивање јКуери тоуцх догађаја за мобилне уређаје.