Дизайн мобильного приложения / Руководство для начинающих по jQuery Mobile

За последние 2-3 года мы наблюдаем огромный рост поддержки браузеров и ОС для мобильных веб-сайтов. В первую очередь на ум приходят платформы Apple iOS и Google Android. Но другие, такие как PalmOS и Blackberry, все еще находятся в смеси. До недавнего времени было очень трудно сопоставить одну мобильную тему со всеми этими платформами..

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

Особенности и поддержка ОС

Причина, по которой я предлагаю изучать jQuery Mobile через любые другие фреймворки, заключается в простоте. Код был построен на ядре jQuery и имеет активную команду разработчиков, пишущих скрипты и исправляющих ошибки. В число многих функций входит поддержка HTML5, навигационные ссылки на основе Ajax и обработчики событий touch / swipe.

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

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Ежевика 6.0, Ежевика 7
• Palm WebOS 1.4-2.0, 3.0

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

Стандартный HTML-шаблон

Чтобы ваше первое мобильное приложение работало, есть набор шаблонов, с которого вы должны начать. Это включает в себя базовый код jQuery, а также мобильный JS и CSS, причем все внешние размещаются на CDN jQuery. Проверьте мой пример кода ниже.

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

Следующий метатег X-UA-Compatible просто заставляет Internet Explorer отображать HTML в самой последней итерации. Старые браузеры и особенно мобильные будут пытаться обойти незнакомые ошибки рендеринга.

Построение содержимого тела

Теперь вот где JQuery Mobile может быть сложно. Каждая страница HTML не обязательно 1 страница на мобильном сайте. Фреймворк использует атрибуты данных HTML5, которые вы можете создать по своему усмотрению, добавив данные- заранее. Похожим образом данные роли = «страница» может быть установлен на несколько div в одном файле HTML, давая вам более одной страницы.

Затем вы будете перемещаться между этими страницами с помощью якорных ссылок и уникального идентификатора. Эта установка - хорошая идея для простых, простых приложений. Если вам нужно всего 3-5 страниц, то почему бы не сохранить все это в одном файле? Если у вас нет много письменного контента, в этом случае попробуйте использовать PHP включает, чтобы сэкономить время.

Проверьте пример кода ниже, если вы потерялись.

 
 
 
Верхняя строка заголовка
 
 
 
Показать другую страницу??
 
подсказка: нажмите на кнопку ниже!
 
О нас
 
  
 
 
 
Страница 2 Здесь
 
 
 
просто дополнительный контент.
 
Я имею в виду, вы можете вернитесь в любое время.
 
 
   

Посмотрите на якорную ссылку со страницы индекса на мгновение. Обратите внимание, что я добавил атрибут данная роль «Кнопка» = установить ссылку в виде кнопки. Но вместо использования стилей по умолчанию мы включаем данные тема = «C». Это позволяет переключаться между шаблонами 1 из 5 (themes a-e), которые по умолчанию упакованы как стили CSS в jQ Mobile..

Моя кнопка также охватывает всю ширину страницы. Чтобы убрать поведение, нам нужно установить элемент из блока во встроенное отображение. Атрибут для этого данные рядного = «истина» который вы можете добавить на любую кнопку привязки.

Верхний и нижний колонтитулы

В верхней и нижней части ваших приложений вы должны добавлять содержимое верхнего и нижнего колонтитула. Этот стиль дизайна часто связывают с приложениями для iOS, которые впервые стали популярными в Apple App Store для мобильных устройств. jQ Mobile использует атрибуты data-role для определения верхнего, нижнего колонтитула и содержимого страницы. Давайте кратко рассмотрим эти области.

Кнопки верхней панели

По умолчанию верхняя панель поддерживает набор из двух (2) ссылок аналогично другим мобильным приложениям. iOS по умолчанию использует “назад” Кнопка слева и часто “опции” или же “конфиг” справа.

 
 настройки 
Страница 2 Здесь
 
 

Приведенный выше код просто фокусируется на контейнере div для нашей страницы About и содержимом заголовка. Дополнительный атрибут HTML данная надстройка обратно БТНО = «истина» будет работать только при добавлении к роли данных страницы. Цель состоит в том, чтобы автоматически включить кнопку «Назад», которая работает аналогично кнопке «Назад» вашего браузера..

Мы могли бы вручную добавить кнопку «Назад» с таким же кодом, который мы использовали в области содержимого. Но я чувствую, что это займет намного больше времени, особенно на нескольких страницах. Все якорные ссылки в разделе заголовка по умолчанию будут размещены в левой / правой кнопках. Используя класс = «щ-БТН-право» это переместило мою кнопку настроек, так что есть свободное место для кнопки возврата. Также я использую второстепенные стили темы, чтобы придать ей дополнительный эффект!

Нижний колонтитул

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

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

• Предварительный просмотр Live Demo

Итак, вот код нижнего колонтитула для раздела о странице. данные роли = «NavBar» должен быть добавлен к элементу контейнера, содержащему неупорядоченный список, а НЕ сам элемент UL. Каждая ссылка в списке рассматривается как панель вкладок, которая затем делится поровну на основе общего количества ссылок. Дополнительный класс щий тела-б просто добавляет эстетические эффекты при переключении между несколькими доступными стилями.

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

Ajax & Dynamic Pages

Первый сегмент действительно открыл ключевые моменты для создания мобильного приложения с помощью jQuery. Но я хочу запустить новое приложение, которое загружает данные с внешней страницы. Я буду использовать очень простой скрипт PHP для достижения $ _REQUEST [] переменная и отображать небольшой выстрел Dribbble соответственно. Скриншот ниже должен дать вам представление о том, что мы собираемся построить.

Сначала я создам страницу index.html для шаблона по умолчанию. Для этого домашнего экрана я использую настройку представления списка для отображения каждой ссылки по порядку. Это делается в области содержимого с помощью данные роли = «ListView» атрибут в списке контейнера. Вырезав те же заголовки, что и раньше, я добавил весь свой код с этой новой страницы индекса ниже.

 
 
 
Октябрь 2011 выстрелы
 
 
 
 
Первое изображение
 
Второе изображение
 
Третье изображение
 
Четвертое изображение
 
 
  
   

Каждая из якорных ссылок в моем списке просмотра указывает на один и тот же файл - index.php. Но мы передаем в параметре imgid в качестве переменной запроса. В файле image.php мы берем идентификатор и проверяем его на 4 предустановленных значениях. Если они совпадают, мы используем соответствующий URL-адрес изображения и заголовок, в противном случае мы просто отображаем снимок по умолчанию.

Скрипт загрузчика изображений

Сценарий image.php по-прежнему имеет мобильный шаблон jQuery по умолчанию, добавленный в код. На самом деле он имеет очень похожие верхний и нижний колонтитулы, за исключением добавления нашего атрибута обратной ссылки данная надстройка обратно БТНО = «истина». Обратите внимание, что эта кнопка появится только в том случае, если мы сначала пришли из index.html! Попробуйте напрямую загрузить image.php и ничего не появится, так как там нет “назад” перейти к.

Я думаю, что мы можем немного лучше разобраться в коде, сначала проверив мою логику PHP. Мы используем переключатель / дело метод проверки по 4 различным идентификаторам и предоставления заголовка, URL изображения и исходной ссылки на исполнителя.

Все кажется довольно простым - даже новичок PHP должен быть в состоянии следовать за ним! И если вы не понимаете, это не важно для кода jQuery, так что не волнуйтесь. Мы должны сейчас переключиться и взглянуть на шаблон, который я построил на этой новой странице. Весь код HTML добавляется после всего этого блока PHP выше. Я использовал ID “изображений” для контейнера и даже настроить заголовок, чтобы измениться с каждой новой фотографией.

 
 
 
 
 
 Просмотреть оригинал
 
 
  
 

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

Необычный дизайн с миниатюрами списка

Последний добавленный эффект, который мы можем реализовать - это использование миниатюр для оживления страницы со списком. Я также собираюсь разбить текст на поле заголовка и описания, чтобы отобразить как название произведения, так и имя исполнителя..

Для начала откройте Photoshop и создайте документ размером 80 × 80 пикселей. Я собираюсь быстро изменить размер каждого изображения и сохранить миниатюры, чтобы соответствовать каждому. Затем, обновляя элементы списка, мы должны добавить еще несколько элементов..

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

[Предварительный просмотр Live Demo]

 
 
  
Вундеркит задачи
 
Себастьян Шерер
 
  
Colleeeeeeeeeeeeege
 
Скотт Хилл
 
  
Форум приложение для Facebook
 
Ионут Замфир
 
  
щебет
 
Сэм Джонс
 
 
 

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

Или же вы можете начать создавать бэкэнд-систему для загрузки новых изображений и автоматически обрезать миниатюры для включения в список. С jQuery Mobile такая гибкость, что вы почти не можете пометить его как библиотеку JavaScript. Это скорее целая платформа HTML5 / CSS / jQuery для создания быстрых и масштабируемых мобильных приложений.

Заключение

На момент написания этой статьи команда jQuery Mobile официально выпустила RC1.0 библиотеки кода. Это означает, что большинство, если не все основные исправления ошибок были исправлены, и теперь тестировщики готовятся к полной версии. Из-за этого вы не найдете много информации в Интернете..

Но по мере того, как месяцы продвигаются вперед, веб-разработчики наверняка поймут тенденцию. Мобильные приложения и даже мобильные веб-макеты становятся все более популярными благодаря огромному росту числа смартфонов. У веб-разработчиков нет времени выучить полный язык программирования для создания приложений для Android / iOS. Таким образом, jQuery Mobile - это тонкая альтернатива, включающая поддержку большинства программного обеспечения мобильной индустрии и продолжающая расти с каждым днем ​​в активном сообществе разработчиков..