Мобиле Апп Десигн / Дев Буилдинг Навигатион са јКуери

Паметни телефони су сада опремљени неким веома ефикасним веб претраживачима. ЈаваСцрипт је моћнији него икада раније и може се проширити помоћу библиотека кода као што је јКуери. Када додате најновију спецификацију ХТМЛ5 / ЦСС3, могуће је направити веома брзе мобилне веб апликације са неким основним кодом за фронтенд.

У овом водичу ћу вам показати како можете да направите веб сајт / вебапп који се заснива на мобилним уређајима. Користићемо ЦСС3 медијске упите за циљање одређених уређаја и резолуције екрана. Плус јКуери помаже у анимирању менија и учитавању садржаја екстерних страница помоћу Ајак позива. Чак и боље, изглед се може чак и проширити да би се правилно приказао у обичним прегледницима радне површине као што су Цхроме или Фирефок.

Ливе Демо
Изворни код

Дефинисање структуре странице

Почнимо прво прелазећи преко ХТМЛ странице и стилизирајући је помоћу неких ЦСС правила. Прескочићу већину неуобичајених мета ознака у заглављу јер не утичу директно на веб апликацију. Међутим, има неколико које бих требао споменути, наиме, из исечка испод:

Кс-УА-Цомпатибле користи се за описивање начина на који би се документ требао приказивати у одређеним прегледачима. То је занимљив сценарио када се кодира у ХТМЛ5, тако да не бих превише бринуо о томе. Међутим, мета виевпорт таг је веома важан. Он поставља прозор мобилног претраживача на 100% уместо стандардног зумираног ефекта.

Такође је могуће онемогућити зумирање корисника са вредношћу садржаја усер-сцалабле = не. Али у овом случају ми само желимо да поставимо ширину пуног екрана да буде иста као и ширина нашег уређаја. Ознаке Аппле веб апликација ће омогућити да веб локација буде сачувана као икона почетног екрана на ваш иПхоне или иПод Тоуцх. Није потпуно неопходно, али свакако вреди имати.

Садржај унутрашњег тела

Унутар ознаке тијела поставила сам дивовски омотач с ИД-ом #в. Унутра сам разбио распоред у још два див-а користећи ИД-ове #пагебоди и #навмену. Целокупна ширина странице је ограничена на 640пк по избору, тако да се распоред мења на стриктан број.

   ХК Мобиле
 
  Добродошли на мобилну страницу!
 
 
   Мену Линкс
 
  Кућа
 О нама
 Адвертисе
 Пишите нам
 Контакти
 Правила о приватности

Навигацијском изборнику се даје нижа вриједност з-индекса тако да #пагебоди је увек на врху. Ово је од кључног значаја јер ће ЈаваСцрипт код прећи преко тела странице одређени број пиксела да би открио навигацију испод.

Користио сам хеш симбол (#) испред сваке .хтмл странице да бих зауставио неко лоше понашање у Мобиле Сафари-ју. Кад год кликнете на везу, појављује се УРЛ бар и гура садржај. Али када референцирате ИД, ништа се не учитава осим кроз ЈаваСцрипт позиве.

ЦСС позиционирање

У нашем ЦСС коду нема много збуњујућег садржаја. Већина позиционирања се обавља ручно, а затим манипулира кроз јКуери. Али у нашем документу постоји неколико интересантних делова.

/ ** @гроуп основно тело ** / #в #пагебоди поситион: релативе; лево: 0; мак-видтх: 640пк; мин-видтх: 320пк; з-индекс: 99999;  #в #навмену бацкгроунд: # 475566; висина: 100%; дисплеј блок; позиција: фиксна; видтх: 300пк; лево: 0пк; топ: 0пк; з-индекс: 0;

Овај највиши сегмент дефинише стилове за оба дела странице. Наш навигациони мени је широк само 300 пиксела, тако да ово оставља мало простора да се садржај странице и даље види. Дугме менија за отварање / затварање такође се налази директно са леве стране и увек је доступно. Важан део овде је вредност својства з-индекса и употреба позиција: фиксна; на нашем навмену.

Горњи заглавље алатне траке је такође занимљива секција. Ово је постављено на фиксну позицију тако да ће се померати са садржајем странице. Ово реплицира сличан ефекат као што бисте га пронашли у било којој насловној траци апликације за иОС.

/ ** @гроуп хеадер ** / #в #пагебоди хеадер # тоолбарнав дисплаи: блоцк; позиција: фиксна; лево: 0пк; топ: 0пк; з-индекс: 9999; бацкгроунд: # 0б1851 урл ('имг / таббар-солид-бг.пнг') лево не понављам; бордер-радиус: 5пк; -моз-бордер-радиус: 5пк; -вебкит-бордер-радиус: 5пк; -о-бордер-радиус: 5пк; бордер-боттом-ригхт-радиус: 0; -моз-бордер-радиус-боттомригхт: 0; -вебкит-бордер-боттом-ригхт-радиус: 0; бордер-боттом-лефт-радиус: 0; -моз-бордер-радиус-боттомлефт: 0; -вебкит-бордер-боттом-лефт-радиус: 0; хеигхт: 44пк; ширина: 100%; мак-видтх: 640пк;  #в #пагебоди хеадер # тоолбарнав х1 тект-алигн: центер; паддинг-топ: 10пк; паддинг-ригхт: 40пк; боја: # е6е8ф2; фонт-веигхт: болд; фонт-сизе: 2.1ем; текст-сенка: 1пк 1пк 0пк # 313131;

Мобиле Рулес

Лако је приметити да користим и позадинску слику за плаву текстуру заглавља. То је величине 640 × 44 пиксела да би се одржала конзистентна структура распореда. Али ја сам такође развио слику @ 2к за иПхоне / иПад ретина дисплеје. Можете видјети обје слике испод, или их зграбити из мог демо изворног кода.

Систем/демо/имг/таббар-солид-бг@2к.пнг
Систем/демо/имг/таббар-солид-бг@2к.пнг

Поставио сам мобилни ЦСС за ову функционалност у другој датотеци под називом респонсиве.цсс. Садржи два упита за медије који замењују насловну траку бг и икону дугмета менија за мрежне уређаје.

/ ** ретина дисплаи ** / @медиа онли сцреен и (-вебкит-мин-девице-пикел-ратио: 2), само екран и (мин - моз-девице-пикел-ратио: 1.5), само екран и ( омјер мин-уређаја-пиксела: 1.5) #в #пагебоди хеадер бацкгроунд: # 0б1851 урл ('имг/таббар-солид-бг@2к.пнг ') горе лијево без понављања; бацкгроунд-сизе: 640пк 44пк;  #в #пагебоди хеадер # мену-бтн бацкгроунд: урл ('имг/нав-бтн@2к.пнг ') но-репеат; бацкгроунд-сизе: 53пк 30пк;

Десигнинг Мену Арровс

У навигацијском подручју сам такођер укључио малу икону са стрелицом на десну страну сваке везе изборника. Ово се лако може заменити сликом из било ког уметничког дела. Али углавном сви љубитељи ЦСС3 ће волети да тестирају овај метод.

#в #навмену ул ли а :: афтер цонтент: "; дисплаи: блоцк; видтх: 6пк; хеигхт: 6пк; бордер-ригхт: 3пк солид # д0д0д8; бордер-топ: 3пк солид # д0д0д8; поситион: абсолуте; ригхт : 30пк; топ: 45%; -вебкит-трансформ: ротате (45дег); -моз-трансформ: ротате (45дег); -о-трансформ: ротате (45дег); трансформ: ротате (45дег); #в #навмену ул ли а: ховер :: афтер бордер-цолор: # цад0е6;

Ми користимо трансформисати власништво за стварање мале границе након садржаја. Такође сам поставио позиција: апсолутна; тако да можемо слободно померати те границе око унутрашње везе. Лако је променити боју обруба на лебдећем стању, што пружа динамичнији осећај. Прилично је невероватно шта можете постићи само коришћењем основних правила ХТМЛ5 и ЦСС3.

Али сада пређимо на битове и делове ЈаваСцрипт кода. Запамтите да ово захтева укључивање у јКуери библиотеку да би мој код правилно функционисао.

јКуери Аниматед

Пишући ове прилагођене кодове, креирао сам потпуно нови документ под називом сцрипт.јс. Слободно их напишите директно > или преузмите мој примјер из демо изворног кода.

 $ (доцумент) .реади (фунцтион () вар пагебоди = $ ("# пагебоди"); вар тхеену = $ ("# навмену"); вар топбар = $ ("# тоолбарнав"); вар цонтент = $ (" #цонтент "); вар виевпорт = ширина: $ (прозор) .видтх (), хеигхт: $ (виндов) .хеигхт (); // дохвати варијабле као // виевпорт.видтх / виевпорт.хеигхт 
 За почетак постављам неке варијабле страница гдје можемо референцирати елементе у документу много брже. Вредност приказа се никада не користи, али може бити корисна ако желите да прилагодите фазе анимације. На пример, можете проверити тренутну ширину претраживача и отворити одговарајући мени мањи или шири.
 фунцтион опенме () $ (фунцтион () топбар.анимате (лефт: "290пк", дуратион: 300, куеуе: фалсе); пагебоди.анимате (лефт: "290пк", дуратион: 300 , куеуе: фалсе););  фунцтион цлосеме () вар цлосеме = $ (фунцтион () топбар.анимате (лево: "0пк", трајање: 180, ред: фалсе); пагебоди.анимате (лево: "0пк", дуратион: 180, куеуе: фалсе);); 
 Даље сам дефинисао две важне функције за отварање и затварање менија. Ово је могло бити урађено у једној функцији и прекидачу за повратни позив - осим што заиста морамо да анимирамо два различита елемента у исто време. Нажалост, ово није подразумевано понашање за јКуери, тако да морамо прибјећи алтернативној синтакси.
 Названа су два елемента на које циљамо топбар и пагебоди. Унутрашња садржајна област са белом позадином је пуна страница; међутим, позиција насловне траке је фиксирана на врху странице. То значи да се природно не анимира са страницом и морамо користити посебан позив. Отварање је подешено тако да притисне 290пк лево (скоро 300пк нав ширина) и функција затварања је повлачи.
 Учитавање динамичког садржаја
 Горњи код је довољно лак за бригу о анимацији. И теоретски, то је све што вам је потребно за тако једноставан мобилни веб сајт - али желим додати још мало.
 Сваки пут када корисник кликне на линк менија желимо да затворимо тренутну навигацију и прикажемо гиф за учитавање док тражимо садржај странице. Након тога, када завршимо уклањамо ГИФ слику и учитавамо је унутра. Ово је фантастично јер можемо чак користити статичне .хтмл странице за садржај. Без ПХП-а или Руби-а или Перл-а или било којих позадинских језика да би ствари биле неуредне.
 Управљање кликовима
 Прво желимо да тестирамо када наши корисници кликну на навигационе тастере. Ово ће зауставити нормално хреф вредност од учитавања и уместо тога можемо користити сопствене функције за приказивање екстерног садржаја.
 // учитавање садржаја странице за навигацију $ ("а.навлинк"). ливе ("клик", функција (е) е.превентДефаулт (); вар линкурл = $ (тхис) .аттр ("хреф"); вар линкхтмлурл = линкурл.субстринг (1, линкурл.ленгтх); вар имглоадер = ''; 
 Сада отварамо селектор за било које сидро са класом навлинк. Кад год корисник кликне на један од ових веза, заустављамо га од учитавања и постављања варијабле за пуну УРЛ адресу. Такође сам подесио променљиву за садржај ХТМЛ како би укључио стандардни учитавач слика. Ако желите да прилагодите сопствени, препоручујем Ајаклоад.
 Ајак .лоад ()
 У том смислу постоје два различита дела која сам уредно разбила. Доњи код је наш први бит који затвара мени за навигацију и помера цео прозор документа до врха. Желимо да заменимо садржај унутрашњег тела малом анимацијом за учитавање, а корисници то не могу видети ако гледају на дну странице.
 цлосеме (); $ (фунцтион () топбар.цсс ("топ", "0пк"); виндов.сцроллТо (0, 1););
 Сада коначно желимо да заменимо садржај унутрашњег тела нашом сликом и дохватимо спољашњу страницу за учитавање. Обично ће то потрајати само неколико стотина милисекунди или чак и брже, тако да сам поставио временску функцију.
 цонтент.хтмл (имглоадер); сетТимеоут (фунцтион () цонтент.лоад (линкхтмлурл, фунцтион () / * но цаллбацк * /), 1200);
 Ово ће паузирати 1200 милисекунди пре учитавања новог садржаја. За мој демо ово изгледа много боље и даје вам предоџбу о томе како би се апликација понашала на споријим интернетским везама.
 
 Закључак
 Охрабрујем све веб програмере да преузму изворни код туториала и сами се играју. Ово је основни пример онога што се може постићи са ХТМЛ / ЦСС3 и додиром ЈаваСцрипт ефеката. Израда мобилних екрана је лакша него икада са медијским упитима и проширивим веб претраживачима.
 Погледајте да ли можете примијенити било који од ових кодова у вашим будућим веб пројектима. Изградња мобилних апликација је умјетност, слична веб дизајну, и захтијева пуно посвећености и праксе. Надам се да ће овај водич бити добра полазна тачка за само неколико ентузијаста. Ако имате питања или мисли о коду, слободно подијелите с нама у пост-дискусијском подручју.