Мобиле Апп Десигн / Дев Водич за почетнике за јКуери Мобиле

У протеклих 2-3 година смо видели огроман раст подршке за претраживаче и ОС мобилних сајтова. Најупечатљивије су Апплеове иОС и Гоогле Андроид платформе. Али други као што су ПалмОС и Блацкберри су још увијек у миксу. Све до недавно било је веома тешко повезати једну мобилну тему са свим овим платформама.

ЈаваСцрипт је био почетак, али до сада није постојала уистину јединствена библиотека. јКуери Мобиле преузима све најбоље карактеристике јКуери-а и преноси их на мобилни веб-извор. Библиотека је више као оквир који укључује анимације, ефекте транзиције и аутоматске ЦСС стилове за основне ХТМЛ елементе. У овом водичу се надам да ћу вам представити платформу на начин да се осјећате угодно при дизајнирању властитих јКуери мобилних апликација.

Особине и подршка за ОС

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

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

• Аппле иОС 3-5
• Андроид 2.1, 2.2, 2.3
• Виндовс Пхоне 7
• Блацкберри 6.0, Блацкберри 7
• Палм ВебОС 1.4-2.0, 3.0

Ако желите да сазнате више, прочитајте на њиховој званичној страници са документима. Није написан у бесмислицама и заправо се осјећа врло лако слиједити. Сада ћемо се фокусирати на основе писања јКуери мобилне странице и како можемо направити малу апликацију!

Стандардни ХТМЛ шаблон

Да бисте добили своју прву мобилну апликацију која ради, поставите предложак који бисте требали почети. Ово укључује основни код јКуери заједно са мобилним ЈС и ЦСС, све екстерне хостоване из јКуери ЦДН. Погледајте мој пример испод.

Једини страни елементи овдје би требали бити двије мета ознаке. Врх виевпорт ознака ажурира мобилне претраживаче да би користила ефекат зумирања. Подешавање вредности видтх = ширина уређаја постави ширину странице на тачно ширину екрана телефона. И најбоље од свега што не онемогућава функције зума јер јКуери Мобиле може да се прилагоди промени распореда.

Следећи мета таг Кс-УА-Цомпатибле само приморава Интернет Екплорер да прикаже ХТМЛ у својој најновијој итерацији. Старији претраживачи и нарочито мобилни ће покушати да заобиђу непознате грешке у приказивању.

Конструисање садржаја тела

Сада је ово место где јКуери мобиле може бити лукав. Свака ХТМЛ страница није нужно једна страница на мобилној веб-локацији. Оквир користи ХТМЛ5-ове атрибуте података, које можете креирати додавањем података- пре. На сличан начин дата-роле = "паге" може се поставити на више дивова у једној ХТМЛ датотеци, дајући вам више од једне странице.

Затим бисте се кретали између ових страница са везним линковима и јединственим ИД-ом. Ово подешавање је добра идеја за основне, једноставне апликације. Ако вам је потребно само 3-5 страница, зашто их не похранити у једну датотеку? Осим ако немате много писаног садржаја, у том случају покушајте да користите ПХП да бисте уштедели време.

Провјерите примјер кода испод ако сте изгубљени.

 
 
 
Топ титле бар
 
 
 
Прикажи другу страницу??
 
хинт: кликните на дугме испод!
 
О нама
 
  
 
 
 
Овде
 
 
 
само неки додатни садржај.
 
Мислим, можеш вратити се у свако доба.
 
 
   

Погледајте на тренутак везу сидра са индексне странице. Приметио сам да сам додао атрибут дата-роле = "дугме" да бисте поставили везу као дугме. Али уместо да користимо подразумеване стилове које укључимо дата-тхеме = "ц". Ово се пребацује између 1 од 5 (теме а-е) шаблона који се подразумевано пакују као ЦСС стилови унутар јК Мобиле.

Моје дугме такође обухвата целу ширину странице. Да бисте уклонили понашање, морамо поставити елемент од блока до инлине приказа. Атрибут за то је дата-инлине = "труе" које можете додати на било које типко за сидро.

Траке заглавља и подножја

На самом врху и дну апликација требало би да додате садржај заглавља и подножја. Овај стил дизајна се често приписује иОС апликацијама које су постале популарне користећи Аппле Апп Сторе. јК Мобиле користи атрибуте дата-роле за дефинисање заглавља, подножја и садржаја странице. Хајде да погледамо ове крајеве.

Топ Бар Буттонс

По подразумеваној вредности, горња трака подржава скуп од две (2) везе на сличан начин као и друге мобилне апликације. ИОС подразумевано користи а “назад” са леве стране а често и “Опције” или “цонфиг” на десној.

 
 Подешавања 
Овде
 
 

Горњи код се фокусира само на див контејнер за нашу страницу Абоут, заједно са садржајем заглавља. Додатни ХТМЛ атрибут дата-адд-бацк-бтн = "труе" ће радити само када се дода у улогу података странице. Сврха је да се аутоматски укључи дугме за повратак које функционише слично дугмету за повратак вашег претраживача.

Могли смо ручно додати дугме за повратак са сличним кодом као што смо га користили у области садржаја. Али сматрам да је потребно много више времена за постављање посебно на више страница. Све везе за сидрење унутар одељка за заглавље ће подразумевати позиције левог / десног дугмета. Коришћењем цласс = "уи-бтн-ригхт" ово је поново поставило моје дугме за подешавања тако да има слободног простора за дугме за повратак. Такодје користим секундарне стилове тема да бих добио неки додатни спунк!

Навигација подножја

Подручје подножја многи се не осећају веома корисно у почетку. То је место где можете да чувате ствари са ауторским правима и важније везе, али то се може лако додати и на дну области садржаја. Дакле, које је добро користити подножје?

Најбољи пример који сам видео користи простор ногу као навигациони систем где се линкови на табовима појављују за контролу навигације по страницама. Постоји много опција где можете изабрати ефекте целог екрана, додати иконе, прилагодити положај и неколико других атрибута. Али хајде да направимо једноставну навигацију са три тастера да бисмо добили идеју о томе како то функционише.

• Превиев Ливе Демо

Ево неке шифре подножја за одељак о страници. дата-роле = "навбар" треба да се дода на елемент контејнера који има неуређену листу и НЕ УЛ елемент. Сваки линк унутар листе се третира као трака са картицама, која се затим подједнако дели на основу укупног броја веза. Додатна класа уи-боди-б само додаје естетске ефекте док се пребацујемо између неколико доступних стилова.

Ако приметите на првом дугмету, имам атрибут дата-дирецтион = "реверсе". Иако сам могао да користим подешавање дугмета за повратак као и пре да се вратим на почетну страницу, уместо тога сам користио ИД странице #индек. Подразумевано, прозор апликације ће прећи на десно што изгледа прилично лепљиво пошто очекујете да ће се анимација померати уназад. Можете се играти са још више анимираних ефеката ако имате времена. Погледајте страницу са информацијама о прелазима у документацији јКуери.

Ајак & Динамиц Пагес

Први сегмент је заиста отворио кључне тачке за изградњу мобилне апликације са јКуери. Али желим да покренем нову апликацију која учитава податке са спољне странице. Ја ћу користити врло једноставан ПХП скрипт за постизање $ _РЕКУЕСТ [] варијаблу и приказати мали Дрибббле снимак у складу са тим. Доњи екран ће вам дати идеју шта ћемо да направимо.

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

 
 
 
Оцтобер 2011 Схотс
 
 
 
 
Прва слика
 
Друга слика
 
Трећа слика
 
Четврта слика
 
 
  
   

Свака од веза сидра у мом приказу листе показује на исту датотеку - индек.пхп. Али пролазимо кроз параметар имгид као променљива захтева. На имаге.пхп фајлу узимамо ИД и тестирамо га на 4 унапред подешене вредности. Ако се подударају, користимо одговарајући УРЛ слике и наслов, иначе ћемо приказати подразумевани Дрибббле снимак.

Имаге Лоадер Сцрипт

Скрипта имаге.пхп још увек има подразумевани јКуери мобилни шаблон додан у код. Он заправо дели веома сличан заглавље и подножје, осим додатка атрибута бацк линк дата-адд-бацк-бтн = "труе". Обавестите се да ће се ово дугме појавити само ако прво дођемо из индек.хтмл! Покушајте директно учитати имаге.пхп и ништа се неће појавити пошто нема “назад” то мове то.

Мислим да можемо направити мало више смисла кода тако што ћемо прво испитати своју ПХП логику. Ми користимо а прекидач / \ Т случај да бисте проверили 4 различита ИД-а и да бисте додали наслов заглавља, УРЛ слике и изворну везу изворног аутора.

Све изгледа прилично једноставно - чак и почетник ПХП-а треба да може да прати! А ако не разумете, то ионако није важно за јКуери код, зато не брините. Требали бисмо се сада пребацити и погледати предложак који сам направио на овој новој страници. Сав ХТМЛ код се додаје након целог ПХП блока. Користио сам идентификацију “имагес” за контејнер и чак подесите заглавље да се мења са сваком новом фотографијом.

 
 
 
 
 
 Прикажи оригинал
 
 
  
 

Вероватно можете да видите колико је овај демо поједностављен. Али цела сврха је да покаже скалабилност јКуери мобиле. ПХП се лако може додати у мик и можете направити неколико заиста уредних апликација са само неколико сати развоја.

Фанци Десигн витх Тхумбнаилс Лист

Последњи додатан ефекат који можемо да применимо је употреба сличица за оживљавање странице за унос. Такође ћу поделити текст у поље наслова и описа како бих приказао и наслов и име уметника.

Да бисте почели да отварате Пхотосхоп и креирате 80 × 80 пк документ. Брзо ћу преуредити сваку слику и сачувати сличице које одговарају свакој слици. Затим ажурирање ставки приказа листе треба да укључи још неколико елемената.

Погледајте код испод и мој демо пример да видите шта мислим.

[Превиев Ливе Демо]

 
 
  
Вундеркит таскс
 
би Себастиан Сцхеерер
 
  
Цоллеееееееееееееге
 
Сцотт Хилл
 
  
Форум апликација за Фацебоок
 
би Ионут Замфир
 
  
Твиттер
 
би Сам Јонес
 
 
 

За класе уи-ли-заглавље и уи-ли-десц се подразумевано додају у јКуери Мобиле стилесхеет. Ово је слично класи слике уи-ли-тхумб која аутоматски мења сваку траку приказа листе у складу са висином слике. Одавде можете да направите више на фронту са анимацијама, ефектима страница, стиловима, итд.

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

Закључак

Од писања овог чланка, тим јКуери Мобиле је званично објавио РЦ1.0 библиотеке кода. То значи да је већина, ако не и све главне исправке грешака, згњечене и сада се тестери припремају за потпуно издање. Због тога нећете наћи пуно информација на вебу.

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