Mobile App Design / Dev Ръководство за начинаещи на jQuery Mobile
През последните 2-3 години се наблюдава огромен ръст в поддръжката на браузъри и операционни системи за мобилни сайтове. Най-забележимо е, че Apple iOS и платформите за Android на Google идват на ум. Но други като PalmOS и Blackberry са все още в микса. Доскоро беше много трудно да се съчетае една мобилна тема във всички тези платформи.
JavaScript беше начало, но досега не е имало никаква наистина обединена библиотека. jQuery Mobile взима всички най-добри функции на jQuery и ги пренася до мобилен уеб-източник. Библиотеката е по-скоро рамка, която включва анимации, ефекти на прехода и автоматични CSS стилове за основни HTML елементи. В това ръководство се надявам да представя платформата по такъв начин, че да се чувствате комфортно при проектирането на вашите собствени jQuery мобилни приложения.
Функции и поддръжка на OS
Причината, поради която ви предлагам да научите jQuery Mobile над всички други рамки, е простотата. Кодът е изграден върху ядрото jQuery и има активен екип от разработчици, които пишат скриптове и редактират бъгове. От многото функции включват поддръжка на HTML5, навигационни връзки, задвижвани от Ajax, и манипулатори на събития с докосване / неточен удар.
Поддръжката варира между телефони и е разделена на таблица от 3 категории от A-C. А е най-високото ниво, което може да се похвали с пълна поддръжка на jQuery Mobile, B има всичко, с изключение на Ajax, докато C е основен HTML с малко до JavaScript. За щастие повечето от популярните операционни системи се поддържат напълно - добавих списък по-долу само с няколко примера.
- Apple iOS 3-5
- Android 2.1, 2.2, 2.3
- Windows Phone 7
- Blackberry 6.0, Blackberry 7
- Palm WebOS 1.4-2.0, 3.0
Ако искате да научите повече, опитайте да прочетете на официалната им страница с документи. Тя не е написана на безсмислици и всъщност се чувства много лесно да се следва. Сега нека се съсредоточим върху основите на писане на jQuery мобилна страница и как можем да изградим малка програма!
Стандартният HTML шаблон
За да получите първото си мобилно приложение, трябва да зададете шаблон, с който да започнете. Това включва базовия код jQuery заедно с мобилните JS и CSS, всички външни хоствани от jQuery CDN. Вижте примерния ми код по-долу.
Основно мобилно приложение
Единствените чужди елементи тук трябва да бъдат двата мета тагове. Върха Прозорецът маркира актуализациите на мобилните браузъри, за да използва пълен ефект на мащабиране. Задаване на стойността ширина = устройство ширина ще зададе ширината на страницата точно по ширината на екрана на телефона. И най-доброто от всичко това не изключва функциите за мащабиране, тъй като jQuery Mobile може да се адаптира към промените в оформлението.
Следващият мета маркер X-UA-съвместим просто принуждава Internet Explorer да визуализира HTML в най-новата й итерация. По-старите браузъри и особено мобилните ще се опитат да заобиколят непознати бъгове.
Изграждане на съдържанието на тялото
Сега това е мястото, където jQuery mobile може да стане трудно. Всяка HTML страница не е задължително 1 страница в мобилния сайт. Рамката използва HTML5 атрибутите за данни, които можете да създадете с прищявка чрез добавяне данни- предварително. По подобен начин данни роля = "страница" може да се настрои на няколко divs в един HTML файл, което ви дава повече от една страница.
След това ще преминете между тези страници с котви връзки и уникален идентификатор. Тази настройка е добра идея за основни, прости приложения. Ако имате нужда само от 3-5 страници, тогава защо не съхранявате всичко в един файл? Освен ако нямате много писмено съдържание, в този случай опитайте да използвате PHP, за да спестите време.
Проверете примера по-долу, ако сте загубени.
Горна заглавна лента
Page 2 Тук
само малко допълнително съдържание.
Искам да кажа, можете Върни се по всяко време.