Posts Tagged ‘jQueryMobile’

Возможности использования библиотеки jQueryMobile

Monday, October 21st, 2013

Так уж получилось, что производители планшетов и  смартфонов не горят желанием унифицировать и вырабатывать стандарты. Вот почему разработчики прикладного ПО постоянно должны иметь дело с огромным количеством разнокалиберныхWeb-браузеров и операционных систем. Чтобы хоть как-то облегчить себе работу, используются каркасы (от английского framework), благодаря которым можно разрабатывать разные приложения, не оглядываясь на особенности каждой отдельной мобильной платформы.

На данный момент есть несколько основных фреймворков для разработки мобильных приложений, которые широко применяются. Наиболее популярными считаются Appcelerator, WebOS и PhoneGap. Команда разработчиков известной библиотеки jQuery представила свету осенью 2010 года frameworkдля разработкиWeb-интерфейсов под названием jQueryMobile. На данный момент существует уже по крайней мере  3 альфа-версии этого приложения, а в ближайшем будущем планируется появление еще нескольких стабильных его версий.

В данной статье описываются возможности использования библиотеки jQueryMobile с целью разработки Web-приложений для мобильных платформ.

Описание jQueryMobile

jQueryMobile является построенным на основе библиотеки jQueryфреймворком. Он предназначен для разработки Web-интерфейсов, которые ориентированы на использовании в мобильном устройстве.

Можно в нескольких словах описать принцип работы фреймворкjQueryMobile: он использует стандартные элементы HTML, в некоторой степени расширенные при помощи дополнительных компонентов, в результате чего создает элементы, которые соответствуют требованиям и стилю мобильных интерфейсов.

В чем преимущества jQueryMobile?

  1. Короткая «кривая обучения» и простота использования;
  2. Небольшой размер (в сжатом виде 12 Кб);
  3. Поддерживает широкий ряд Web-браузеров (мобильных и немобильных);
  4. Поддерживает HTML5;
  5. Изменение стиля (внешнего вида документа);
  6. Открытый исходный код;
  7. Расширенная поддержка HTML-форм.

jQueryMobile: создание HTML-документа

одним из главных преимуществ этого фреймворка является простота применения. Дело в том. Что с его помощью можно выполнить большую часть работы по созданию страниц для мобильных устройств, не используя JavaScript. Мы рассмотрим, как можно использовать jQueryMobile при создании демонстрационного трехстраничного Web-сайта:

- создание главной страницы,

- создание страницы с описанием,

- создание страницы с контактной информацией.

Далее приведем отрывокHTML-документа, в котором происходит подключение jQueryMobile.

Листинг 1. Подключение.

	

Объявление типа док-та объявляет о том, что для его создания используется HTML 5. Затем идет подключение jQueryMobile, для использования которого придется подключить саму библиотеку jQuery.

Далее определим содержимое документа. Благодаря jQueryMobile в одном документе можно разместить несколько логичных страниц, которые отмечены data-role с присущим значением page. В основе создания каждой станицы лежат 3 фрагмента, которые тоже отмечены data-role.

Листинг 2. Определение содержимого док-та.


Main page header

Presentation text About Contact
© 2011, Somecompany

Если документ состоит  из нескольких страниц, то та страница, которая была объявлена первой, по умолчанию станет заглавной в целом наборе страниц.

Использование дополнительных атрибутов.

В стандарте языка разметки HTML5 ввели новую функциональность, которая позволяет использовать дополнительные атрибуты, например, data-*. При этом вместо знака “*” можно применять латинские символы в любой последовательности. В результате находится эффективное и простое решение проблемы «прозрачного» расширения семантики документа. На предыдущем примере (Листинг 2) атрибут data-roleимеет значения, которые определяют страницу, а также ее фрагменты.

Данный атрибут широко используется для создания документов при применении jQueryMobile. Если хорошо знать определенные в jQueryMobile атрибуты и значения, которые им соответствуют, то владение данной библиотекой может стать залогом успеха.

Далее в документе идет добавление еще 2-х страниц.