Създавайте приложения с jQuery Mobile

Съдържание

jQuery Mobile е плъгин на оригиналния jQuery и изисква последният да бъде предварително инсталиран за да може да функционира.
Веднъж активен, jQuery Mobile прави две неща:

Първо, той оптимизира родните функции, за да подобри тяхната производителност на мобилни устройства.
Второ, той променя HTML и генерира оформление с поредица от предварително дефинирани графични елементи, което значително ускорява производствената скорост.


Инсталирайте jQuery Mobile
Въпреки че е възможно и много често срещана техника на уебсайтовете да инсталирате jQuery Mobile чрез директно свързване към файлове, съхранявани в облака, силно се препоръчва да не се прилага тази техника за приложения PhoneGap. Много често вашето приложение ще се използва без никаква интернет връзка или с прекъсваща връзка. Ако jQuery файловете са свързани с облачни документи, приложението вероятно ще стане неизползваемо.
За да инсталирате тази рамка, първото нещо, което трябва да направите, е да изтеглите jQuery от официалната й страница:
http://docs.jQuery.com/Downloading_jQuery#Current_Release

След като jQuery бъде изтеглен, трябва да изтеглите приставката jQuery Mobile от официалния му уебсайт:
http://jquerymobile.com/download/

Ще започнем пример, който ни позволява да разберем програмирането и структурата на приложението.
Ще създадем html файл със следния код
 Мобилно приложение Jquery 

jQuery Mobile ни позволява да създаваме удобни за мобилни устройства интерфейси много бързо и със сравнително малко усилия.
Начинът, по който работи, е чрез пренаписване на оригиналния код на документа и генериране на нов, по -сложен, според характеристиките и исканите аргументи.
Интересна особеност на jQuery Mobile е, че за разлика от уебсайт, който преминава от един HTML документ в друг за показване на информация, страниците или екраните на приложение се обработват от един HTML документ.
Страниците или екраните са в един файл, jQuery Mobile ги управлява да показват само частта от документа, съответстваща на всеки екран, докато останалата част остава скрита. По този начин зареждането на страници се ускорява значително, също така позволява управление на събития и анимации между един екран и друг.
jQuery Mobile се възползва изцяло от новите елементи на HTML5 и използва широко персонализирани атрибути, които са дефинирани с префикса "данни-"
Например роля на данни, един от най -използваните атрибути в jQuery Mobile, ви позволява да дефинирате ролята на ниво функционалност и външен вид на елемента, който я съдържа. Чрез определяне на ролята на елемент, този атрибут ви позволява да създавате страници, бутони, менюта и много други елементи.
Чрез вмъкване на атрибута data-role във всеки маркер го правим интерфейсен елемент. Не е необходимо да добавяте допълнителен код jQuery добавете всички графични елементи, класове и дори анимации, необходими за работата на този конкретен елемент.
Например, за да създадете страница, използвайте атрибута data-role = ”страница” по този начин:
  • Екран 1
  • Екран 2
Да върна

Примерната връзка не само ви позволява да отидете на екран 2, jQuery Mobile автоматично включваше анимация за преход, за да придаде вид, подобен на този на родното приложение.
Нека вземем линка, който току-що създадохме, малко по-нататък и добавете атрибута jQuery Mobile data-role = ”button”, така че тази връзка да се държи като бутон:
За да се върнете към главната страница, можете да приложите предишната техника за свързване на връзка към идентификатора на главната страница или дори по-просто, можете да използвате атрибута data-rel = ”назад”, който връща приложението към непосредствения предишен екран .Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка

Така ще помогнете за развитието на сайта, сподели с приятелите си

wave wave wave wave wave