Главная > Руководства, Фреймворки и Платформы > Разработка веб-приложений на jQuery Mobile: руководство для новичка

Разработка веб-приложений на jQuery Mobile: руководство для новичка


27 января 2012, 13:50. Разместил: Design FactoRy
За последние годы популярность библиотеки jQuery возросла до небывалых высот. С помощью доступных ресурсов типа Git и Github веб-разработчики разрабатывают многочисленные плагины. Некоторые участники команды решили преобразовать этот код и в мобильную платформу.

Разработка веб-приложений на jQuery Mobile: руководство для новичка

Сегодня мы хотим рассказать вам о платформе jQuery Mobile. Материала слишком много, чтобы охватить его весь, поэтому мы выделим только самое важное. К тому же, следует отметить, что команда постаралась максимально облегчить ваш рабочий процесс, подкрепив платформу подробной документацией. Если вам нужны будут ответы на какие-либо вопросы, посетите форум разработчиков или зайдите на официальный веб-сайт.

Основной шаблон

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

Лично нам показалось, что jQuery Mobile точно не направлен на разработку веб-сайтов, которые значительно меньше веб-приложений. Рынок браузеров в прошлом был очень привередливым, но сегодня мы достигли того момента, когда большинство браузеров без проблем поддерживают приложения, разработанные в jQuery Mobile.

Разработка веб-приложений на jQuery Mobile: руководство для новичка

Давайте ради примера рассмотрим код, приведенный ниже. Это даст нам полностью пустую страницу с простеньким заголовком, но здесь также будут включены 3 дополнительных внешних документа, которые по умолчанию сопровождают любое приложение jQuery Mobile. Здесь у нас самая свежая версия jQuery в javascript, jQuery Mobile, а также CSS-стили по умолчанию, предназначенные для jQuery Mobile.

<!DOCTYPE html>
<html>
<head>
<title>Standard jQM Template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>

<body>

</body>
</html>

* Посмотреть демо

Конечно же, это самый-самый простой пример. Та же семантика будет применима в случаях, когда вся ваша страница будет под завязку забита тэгами HTML. Но jQuery Mobile на самом деле дает вам возможность разрабатывать код нескольких HTML-страниц в одном документе HTML. Сначала это может немного запутать вас, так что давайте пока опустим этот момент.

Наверное, стоило бы сохранить вышеприведенный шаблон в новый файл index.html. Теперь, в рамках данного единого файла, вы можете использовать data-roles для создания нескольких страниц. Когда ваше приложение впервые загружается, верхняя часть будет служить главной страницей, то есть index. Затем вы можете связать данные страницы путем указания атрибута ID. Раздел «анатомии» страницы дает вам возможность видеть все дополнительные элементы, которые можно добавить н страницу (формы, поля ввода, заголовки, списки и даже элементы подвала).

Связка между страницами

Ниже мы привели еще несколько примеров ссылок между демонстрационными страницами. Вы можете добавить это в body вашего приложения, либо немного изменить контент, подогнать его под вашу связку. Здесь важно помнить об уникальных ID для каждого элемента и о том, как якорные ссылки ведут на новую страницу.

<div data-role="page" id="home">
<div data-role="header">
<h1>Here is the index page.</h1>
</div>

<div data-role="content">
<p><center>Below you may transition to our other pages.</center></p>

<a href="#about" data-role="button" data-inline="true">About Me</a>
</div>
</div>

<div data-role="page" id="about">
<div data-role="header">
<h1>About Us</h1>
</div>

<div data-role="content">
<a href="#home" data-rel="back" data-role="button" data-inline="true">&laquo; Back Home</a>
</div>
</div>

* Посмотреть демо

В каждой якорной ссылке мы стараемся использовать гораздо больше преимуществ атрибутов данных в HTML. data-role используется для изменения стиля ссылки с простого текста в кнопку с закругленными углами. Примерно также атрибут inline отображает кнопку в виде маленького блока с ограниченной шириной. В противном случае можно получить ссылки, которые заполнят весь экран, и выглядеть это будет ужасно!

На странице «About» мы добавили ссылку с data-rel=”back”, с которой вам следовало бы близко познакомиться. jQM поддерживает историю браузера, и вы, таким образом, можете имитировать функционал кнопки «Назад». Мы выставили значение href таким же, как и ID домашней страницы, но можно было использовать и href=”#pork”, и это также вернуло бы вас на шаг назад. Здесь, ввиду того, что data-rel переписывает атрибут href, не суть важно, какое значение будет введено.

Структура мобильных страниц

После того как вы увидите, каким образом мобильные приложения конструируются, jQM станет для вас больше платформой, нежели простой JS-библиотекой. И внутри данной платформы нам нужно работать в пределах определенных правил, сопоставимых с правилами при разработке обычного веб-дизайна. Главная проблема заключается в том, как различные мобильные браузеры будут отображать один и тот же код.

Разработка веб-приложений на jQuery Mobile: руководство для новичка

Мета-тэг viewport может быть внесен в шапку страницы для того, чтобы все браузеры подгружали страницу в 100%-м масштабе. Это проблема в основном касается браузера Mobile Safari, так как он стремится масштабировать все страницы так, чтобы они уместились в окно просмотра. Но добавив соответствующий тэг в шапку страницы, вы можете избежать данной нестыковки, и страницы будут отображаться в правильном масштабе.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

Лучшее здесь заключается в том, что вы можете определить, как пользователи будут видеть ваши приложения. Например, в коде, приведенном выше, пользователь может изменить масштаб по желанию, но загружаться страница будет всегда в 100%-м масштабе. Путем добавления в список команд параметра user-scalable=no, вы можете запретить масштабирование в своем приложении.

Также сложно управлять изображениями. Вы, как веб-дизайнеры, можете выбирать любые способы масштабирования изображений. Мы же рекомендуем не использовать изображения больше 450 пикселей в ширину, и при этом всегда экспериментировать на предмет того, как будет лучше. По умолчанию посетители имеют возможность пролистывать страницу, чтобы рассмотреть все изображение, не умещающееся в пределы видимой области. Но вы можете выставить 100% отображения по ширине с помощью самых основных стилей CSS.

Отключение сообщения о загрузке

Еще одна беда заключается в надоедливом оповещении о загрузке при переходе по страницам. jQuery Mobile по умолчанию запускает данную функцию, и это не лучшая сторона платформы. Это происходит даже тогда, когда вы переходите по страницам, находящимся в одном и том же файле.

Для того чтобы исправить этот недуг, мы воспользуемся javascript. Хотя данная процедура и основана на командах jQuery, ее нужно запустить прежде, чем будет инициализирована библиотека jQuery Mobile. По этой причине, следует внедрить этот код где-то между двумя документами в области шапки страницы. Вы можете ознакомиться с нашим приведенным демо.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = false;
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>

* Посмотреть демо

Метод mobileinit запускается сразу же после загрузки jQuery Mobile. Мы закрепляем управление событиями к данному методу и вызываем нашу собственную функции в виде ответа. Параметром для $.mobile.loadingMessage является строка текста, которая появляется в диалоговом окне загрузки при переходе между страницами. Но если параметр установить на false, то вся функция немедленно выключается. Вы можете почитать об этом более подробно в онлайн-документации о jQM.

Заключение

В данном беглом руководстве мы охватили самые азы приложения jQuery Mobile. Рассказали вам об основном шаблоне и о необходимых для любой стандартной страницы элементах. После данного текста вам наверняка станет гораздо удобнее иметь дело с платформой, с процессом разработки и даже с исправлением ошибок. Но не забывайте как можно чаще обращаться к онлайн-документации.

Если вы разработали собственный шаблон или дизайн, нам бы хотелось увидеть его. Текущий релиз платформы (1.0) вполне стабилен, но это не исключает дальнейшей «работы над ошибками». Расскажите нам, что вы думаете, посредством поля комментариев, представленного ниже.
Вернуться назад