jQuery Mobile 1.0

Недавно был объявлен официальный выпуск jQuery Mobile 1.0, и этот урок предоставит вам обзор того, как эта популярная среда может помочь вам в разработке кроссплатформенных и веб-приложений!

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

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

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

Создайте свою страницу

Прежде чем мы начнем, мы должны убедиться, что у нас есть пара вещей в нужном месте. Во-первых, нам нужно убедиться, что мы устанавливаем область просмотра для нашего устройства, используя meta .

Затем, чтобы мы могли использовать это как домашнюю страницу на iOS, мы можем установить метатег для поддержки app-capable .

Вышеуказанные метатеги не являются строго необходимыми, но я думаю, что они часто являются хорошей идеей.

Далее нам нужно включить CSS и Javascript для jQuery Mobile. В данный момент мы будем использовать CSS по умолчанию, хотя позже мы обсудим отделение структуры от стиля. Для JavaScript нам нужно убедиться, что мы включили версии 1.6.4 jQuery и jQuery mobile 1.0. jQuery является зависимостью от jQuery Mobile, поэтому сначала необходимо включить базовую библиотеку. На момент написания этой статьи последняя версия jQuery Core была 1.7, но в настоящее время jQuery Mobile поддерживает только 1.6.4. Однако, по словам команды, стоящей за проектом, поддержка версии 1.7 скоро появится!

Теперь мы можем перейти в тело документа и создать типичную структуру страницы. jQuery Mobile использует атрибут data- HTML5, чтобы назначать элементам определенное поведение, причем data-role является наиболее популярной, поскольку она определяет роль элементов в приложении. Добавьте атрибут data-role="page" к первому элементу на странице.

Это не обязательно должен быть div, это может быть раздел, если предпочтительнее, но конечный результат тот же — вы создали свою первую страницу с помощью jQuery Mobile.

На данный момент вы можете создать свою страницу, используя только атрибуты data-role . Вы можете использовать data-role="header" и data-role="footer" для верхнего и нижнего колонтитула соответственно, а data-role="content" для основного содержимого тела.

Ваше приложение должно теперь выглядеть следующим образом.

И полный код этого ниже:

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

Создание нескольких страниц

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

Вы можете добавить два дополнительных контейнера div после закрывающего тега div с data-role="content" и data-role="page" , но для data-role страницы атрибут id должен иметь значение «two» и «three». соответственно. Я уверен, что вы понимаете, к чему мы идем, поэтому добавьте идентификатор «один» и на нашу первую страницу. Добавьте заголовки, содержимое и нижние колонтитулы на дополнительные страницы по желанию.

Дополнительный код должен выглядеть примерно так:

Если вы проверите свое приложение сейчас, вы не увидите никакой разницы. Это потому, что нам нужно идти вперед и ссылаться на эти страницы с первой страницы, прежде чем они будут отображаться. Добавьте несколько произвольных ссылок на первой странице, например так:

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

Теперь все должно быть красиво перемещаться взад и вперед. Сладкий!

Кнопки

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

Если вы добавите атрибут data-role="button" к ссылкам на каждой из страниц и обновите свое приложение, у вас теперь должны быть красивые кнопки.

Темы

На данный момент рендеринг нашей страницы в порядке, и мы можем перемещаться по паре страниц, но все это выглядит немного скучно. К счастью, jQuery Mobile поставляется с темами. Эти темы позволяют разработчику быстро менять цвета и общий вид приложения. Это делается атрибутом data-theme . Идем дальше и добавляем data-theme="a" , data-theme="b" и data-theme="a" к каждому элементу div страницы, который мы создали выше. Обновите свое приложение, и вы увидите, что случилось. Каждая из ваших страниц должна выглядеть немного иначе!

До недавнего времени единственный способ развернуть собственную тему — добавить дополнительную таблицу стилей и переопределить CSS, импортированный с помощью jQuery CSS. К счастью, когда в октябре вышел второй Release Candidate для jQuery Mobile, таблица стилей была разделена на две отдельные области, освободив место для недавно выпущенного ThemeRoller . Первая таблица стилей имеет дело со структурой приложения, а вторая будет обрабатывать все темы для приложения.

Перейдите на страницу Theme Roller, и вы увидите экран ниже:

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

Когда вы загрузите ZIP-файл и распакуете его содержимое, у вас будет файл index.html содержащий некоторые основные стили и подтверждение того, что ваша таблица стилей была загружена правильно. После этого у вас будет папка с темами, а внутри вы найдете папку с изображениями и две таблицы стилей, названные по имени, которое вы дали теме при экспорте. Существует ограниченная версия для производства или полная версия для любых изменений, которые вы можете захотеть сделать.

Теперь, когда вы начинаете свой мобильный проект, просто включите эту таблицу стилей Theme Roller, а не тему CSS по умолчанию.

Теперь, когда вы обращаетесь к образцам, которые вы создали обычным способом с помощью jQuery Mobile, указав выше атрибут data-theme , вы будете ссылаться на CSS Theme Roller, который вы создали, вместо значений по умолчанию.

Вы можете добавить атрибут data-theme к любому элементу на странице. Если вы добавите его в div с элементом data-role="page" , тогда этот образец темы будет применен ко всем элементам на этой странице. Вероятно, вы не пройдете весь путь до 26 различных образцов, но вы, скорее всего, будете использовать 3 или 4 различных образца, чтобы получить хорошее сочетание разных цветов в вашем приложении. Поиграйте с ThemeRoller, есть гораздо больше возможностей, чем просто перетаскивание цветов по умолчанию! Вы можете настроить градиенты, тени и даже изменить яркость и насыщенность цветов.

jQuery Mobile 1.0 Дополнения

За последние три релиза RC были некоторые существенные дополнения к фреймворку, поэтому, если вы все еще используете один из бета-релизов или просто не знаете, что RC1, RC2 или RC3 были выпущены, ниже наверстать упущенное.

Выпуск Кандидат 1

RC1 представил некоторые конструктивные изменения в Collapsibles, убрав дополнительный стиль кнопки вокруг значка +/- и добавив возможность в складной контейнер контента. Добавление атрибута data-content-theme к складному контейнеру также выровняло углы заголовка внизу, придавая контейнеру более эстетичный вид.

Если вы хотите начать работу со сборными таблицами, вот основной код. Следующее даст вам один складной контейнер:

Если вы хотите сгруппировать несколько разборных контейнеров вместе и добиться популярного эффекта аккордона, все, что вам нужно сделать, это обернуть группу collapsible-set контейнеров в div обертку с ролью данных collapsible-set складывания.

Варианты фиксированного положения iOS 5 были улучшены с бета-версии с этим RC, но они по-прежнему были отключены по умолчанию. Чтобы использовать эту функцию, вы должны будете применить переопределение при mobileinit события mobileinit . По умолчанию jQuery Mobile применяет некоторые улучшения разметки, когда загружается и загружается до запуска document.ready . К счастью, одной из замечательных особенностей jQuery Mobile является то, что параметры легко настраиваются с помощью метода $.extend jQuery и привязки к событию mobileinit . Убедитесь, что файл сценария, содержащий ваши параметры, включен после jQuery, но до jQuery Mobile. Для этого ваш код будет выглядеть примерно так:

Существует целый ряд настраиваемых параметров, о которых вы можете прочитать здесь . Некоторые из тех, которые я использовал регулярно:

• loadingMessage который является строкой и по умолчанию установлен на «loading».
• pageLoadErrorMessage снова является строкой, и по умолчанию она имеет значение «Ошибка загрузки страницы».
• defaultPageTransition является строкой, и по умолчанию она установлена ​​на «слайд».

Выпуск Кандидат 2

RC2 был передан в середине октября и куплен с некоторыми хорошими ключевыми изменениями. Были добавлены дополнения к поддержке HTML5 для типов ввода, включая time , date и color . Это просто гарантировало, что эти элементы были стилизованы при появлении на странице. Была введена возможность иметь пользовательские выборки как часть группы — чтобы они выглядели более интегрированными. Если вы поместите свой набор полей в div с атрибутом data-role="controlgroup" , ваши поля будут сгруппированы в одном модуле. Добавление data-type="horizontal" сгруппирует их по горизонтали.

Одним из самых больших изменений в последнем выпуске стало разделение таблиц стилей на темы и структуру. Раньше вы включали одну таблицу стилей из jQuery, которая включала весь структурированный CSS и стили для разных тем. Если вы хотите добавить настройку в CSS, вы должны иметь свой собственный лист стилей, который переопределяет все, что уже установлено. Конечно, поскольку мы разрабатываем для мобильных устройств, а пропускная способность важна, таблицы стилей структуры и темы теперь разделены.

Были и другие дополнения и исправления ошибок, в том числе создание по умолчанию формы шириной 100%, диалоговые окна с максимальной шириной и новый вспомогательный класс для скрытия элементов таким образом, чтобы к ним по-прежнему можно было получить доступ с помощью вспомогательных технологий, таких как программы чтения с экрана. Ознакомьтесь с примечаниями к выпуску и журналом изменений для всех деталей.

Выпуск Кандидат 3 / 1.0 Финал

Выпуск RC3 стал шоком для некоторых 13 ноября, так как команда сказала, что официальный релиз 1.0 придет сразу после RC2. RC3 того стоил, так как было сделано множество улучшений производительности, команда просто хотела убедиться, что код работает хорошо, прежде чем выпускать финальную версию. Вы можете прочитать о выпуске RC3 здесь , и первое, что вы заметите, это улучшение производительности. Также появилось несколько новых дополнений:

Теперь вы можете установить для linkBindingEnabled значение false (по умолчанию true), если вы хотите обрабатывать все события щелчка с помощью другой библиотеки или с помощью некоторого пользовательского кода. Вы также можете стилизовать наложение, отображаемое в диалоговом окне, установив data-overlay-theme либо в оболочке наложенной страницы, либо в модуле select.

Наконец, документация была полностью пересмотрена и была обновлена ​​с демонстрацией всех функций, некоторыми советами по началу работы и несколькими советами по созданию приложений jQuery вместе с Phonegap, которые можно найти здесь .

Последние мысли

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

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

Мы обязательно будем держать вас в курсе событий Mobiletuts + по мере развития jQuery Mobile, но если вы хотите увидеть больше советов и руководств по jQuery Mobile, сообщите нам об этом в комментариях!