Разработка адаптивного дизайна с помощью jQuery Mobile и CSS3

Создание макетов Web-страниц, учитывающих разрешение экрана мобильных устройств

Comments

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

Мобильные и планшетные устройства распространяются с неимоверной скоростью, а библиотека jQuery Mobile позволяет разработчикам идти в ногу с постоянно растущими требованиями к разработке Web-решений. Внедрение новых возможностей в Web-разработки требует наличия новых знаний и опыта у разработчиков и дизайнеров. По прогнозам Web-сайта Nielsen, предполагалось, что в 2011 году каждый второй американец будет являться обладателем смартфона (ссылка на этот блог приведена в разделе Ресурсы); эта цифра существенно отличается от показателей 2008 года, где доля обладателей смартфонов составляла всего 10% от общего числа пользователей мобильных телефонов; согласно прогнозам AMI-Partners, "количество планшетных устройств, используемых в фирмах с численностью от 1 до 1000 сотрудников, вырастет к 2015 году на 1000%" (ссылка на полный прогноз приведена в разделе Ресурсы). С учетом таких темпов роста возникает острая потребность в Web-разработчиках и дизайнерах, которые могут создавать современные мобильные Web-решения. Библиотека jQuery Mobile является отличным средством для разработки мобильных Web-приложений, поскольку позволяет сократить время разработки и поддерживает самые различные мобильные платформы.

Некоторые трудности и способы их решения

Библиотека jQuery Mobile является отличным инструментом для создания мобильных и планшетных версий Web-страниц, но она всецело полагается на содержимое Web-сайта, которое должно добавляться в определенных data-role атрибутах. В редких случаях может оказаться невозможным добавить эти атрибуты в HTML-разметку, из-за чего потребуется создать для мобильного устройства отдельный Web-сайт. Несмотря на это, в данной статье будет показано, как путем несложных усилий можно разработать адаптивный дизайн и определить поведение макета Web-страницы при просмотре на различных мобильных устройствах, используя jQuery Mobile и технологию Cascading Style Sheets version 3 (CSS3) Media Queries. В этой статье мы создадим простой Web-сайт, который будет динамически выбирать для отображения соответствующий макет страницы с учетом разрешения экрана мобильного устройства.

Адаптивным называют дизайн, который может учитывать разрешение экрана устройства, используемого для просмотра Web-страницы. Это означает, что вне зависимости от того, просматривается ли Web-страница на мобильном телефоне, планшетном компьютере или обычной рабочей станции, пользователь будет видеть тот макет страницы, который соответствует разрешению экрана устройства. Хотя библиотека jQuery Mobile позволяет быстро и легко создавать мобильные версии Web-сайтов, на текущий момент она не содержит внутренних методов динамического определения разрешения экрана устройства (и скорее всего эта функция не будет реализована никогда). Фактически на Web-сайте проекта jQuery Mobile сказано, что существующая ранее функциональность Media Query Helper Classes не была рекомендована к использованию в бета-версии, а в финальной версии была полностью удалена. Вместо этой функциональности разработчики jQuery Mobile рекомендуют использовать CSS3 Media Queries. Использование jQuery Mobile совместно с CSS3 Media Queries позволяет разработать адаптивный дизайн, который подходит для мобильных, планшетных и настольных устройств. Именно комбинация jQuery Mobile и CSS3 Media Queries используется для разработки адаптивного дизайна документации к самому продукту. Документация jQuery Mobile по своим средствам адаптации к разрешению экрана очень похожа на пример, рассматриваемый в этой статье.

Начиная с версии 2.1 в CSS реализованы методы кодирования, основанные на использовании медиа типов устройств (Media Types). Наиболее распространенный способ использования Media Types заключается в создании отдельной таблицы стилей для Web-страницы, отображаемой на экране настольного компьютера, и отдельной таблицы стилей для версии Web-страницы, выводимой на печать. В CSS3 эта концепция была усовершенствована, результатом чего стала технология Media Queries. Media Queries позволяет разработчикам определять тип и физические параметры устройства, на котором просматривается Web-страница. Излишне говорить о том, что технология Media Queries быстро набрала популярность и стала широко использоваться для выбора определенной таблицы стилей на основе разрешения экрана устройства. В листинге 1 приведен пример использования Media Queries, в котором выбирается таблица стилей, назначенная мобильным и планшетным устройствам.

Листинг 1. Использование Media Queries для выбора таблицы стилей, назначенной определенным устройствам
<link 
  rel="stylesheet" 
  type="text/css" 
  media="screen and (max-device-width: 799px)" 
  href="mobile-tablet.css" />

В этом примере атрибут media содержит медиа-тип, равный screen, и запрос Media Query (заключен в скобки), который проверяет, не превышает ли ширина экрана устройства 799 пикселов. Если это условие выполняется, то используется таблица стилей для мобильных/планшетных устройств, в противном случае таблица стилей не используется. Чтобы обеспечить отображение страницы на экранах с различным разрешением, можно использовать на одной Web-странице несколько ссылок на таблицы стилей, указав в каждой из них собственный запрос Media Query. Как я упоминал, обычно создается три таблицы стилей: одна для мобильных и планшетных устройств, одна для мониторов персональных компьютеров с низким разрешением и одна – для мониторов с высоким разрешением. Если бы вы использовали код из листинга 1, то эту таблицу стилей использовали бы все устройства с разрешением экрана меньше 799 пикселов, так что это превосходный пример того, как можно определить отдельную таблицу стилей для мобильных и планшетных устройств и отдельную таблицу стилей для персональных компьютеров.

Можно также использовать несколько запросов Media Query непосредственно внутри CSS одной страницы стилей. В листинге 2 приведен пример класса CSS, используемого для настройки панелей навигации, которые мы создадим чуть позже. Если ширина экрана устройства не меньше 800 пикселов, ширина панели навигации устанавливается равной 300 пикселам; если ширина экрана устройства не превышает 799 пикселов, ширина панели навигации устанавливается в 100%.

Листинг 2. Использование Media Queries для выбора CSS, назначенного устройству
@media all and (min-width: 800px) {
  #nav {
    width: 300px;
  }
}

@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
}

Другое замечательное свойство Media Queries заключается в том, что если вы будете просматривать в современном Web-браузере страницу, которая содержит код CSS из листинга 2, связанный с HTML-элементом, то эта страница также будет реагировать на размер окна браузера. Таким образом, если ширина окна браузера не будет превышать 799 пикселов, то ширина панелей навигации будет равна 100%; если же ширина окна браузера будет равна 800 пикселам или больше, то ширина панелей навигации будет равна 300 пикселам.

Добавляем адаптивность

Media Queries – это разновидность условного оператора, определяющая, какая CSS будет применяться к Web-странице. Используя Media Queries в связке с библиотекой jQuery Mobile, можно создавать мощные мобильные Web-сайты, одновременно поддерживающие отдельные макеты Web-страниц для настольных систем. Сама по себе библиотека jQuery Mobile позволяет легко и быстро создавать дружелюбные Web-сайты с поддержкой сенсорных экранов. Эта библиотека содержит множество компонентов, упрощающих добавление кнопок, панелей инструментов, диалоговых окон, списков и т. д. Однако, когда дело доходит до работы с макетом страницы, вам не обойтись без CSS. К счастью, как уже упоминалось в этой статье, в CSS3 была представлена технология Media Queries, позволяющая разработчикам динамически изменять макет Web-страницы в зависимости от разрешения экрана устройства, на котором она просматривается.

В связке с библиотекой jQuery Mobile технология Media Queries позволяет создавать адаптивные макеты страниц. В этой статье мы рассмотрим простой пример, включающий в себя набор панелей навигации и таблицу. Эти элементы будут располагаться на странице по-разному в зависимости от разрешения экрана. Для того, чтобы библиотека jQuery Mobile заработала на вашей Web-странице, сначала необходимо вставить ссылки на связанные с ней файлы JavaScript и CSS, как показано в листинге 3.

Листинг 3. Вставка ссылок на файлы библиотеки jQuery Mobile
<link rel="stylesheet" 
  href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="//code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

В состав jQuery Mobile входит компонент listview, который используется для отображения панелей навигации. Для создания представления в виде списка просто добавьте в элемент ul списка навигации атрибут data-role со значением listview. jQuery Mobile также содержит различные инструменты для создания таблиц из нескольких столбцов. В листинге 4 я создал таблицу, состоящую из двух строк и трех столбцов, используя для этого комбинацию классов ui-grid-b, ui-block-a и ui-bar. За дополнительной информацией о доступных компонентах библиотеки jQuery Mobile обратитесь к разделу Ресурсы.

Листинг 4. Добавление представления в виде списка и таблицы в область содержимого
<div data-role="content">
    <ul id="nav" data-role="listview" data-inset="true">
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
    </ul>
    
    <div id="grid" class="ui-grid-b">
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
    </div>
</div>

В конце имен некоторых классов добавлены буквы, которые связаны со стилями – на их основании jQuery Mobile определяет, какой стиль будет использоваться при отображении компонента. За дополнительной информацией по работе со стилями jQuery Mobile обратитесь к разделу Ресурсы.

Теперь, когда у нас есть готовая Web-страница, можно приступать к созданию адаптивного макета с помощью CSS3, который будет динамически изменяться при использовании экранов с различными разрешениями. Сделать это просто: используйте уже известную вам технологию Media Queries для определения разрешения экрана, а затем создайте CSS для всех различных вариантов. В листинге 5 используются два запроса Media Queries: первый проверяет условие, при котором разрешение экрана больше или равно 800 пикселам, а второй – условие, при котором разрешение экрана не превышает 799 пикселов. В первом случае панели навигации и таблица выравниваются по левому краю, располагаясь друг рядом с другом и заполняя все пространство, доступное на экране с более высоким разрешением. Во втором случае выравнивания не происходит, ширина элементов устанавливается равной 100%, а таблица располагается под панелями навигации – такой макет лучше подходит для экранов с небольшим разрешением, например, для смартфонов и планшетных компьютеров.

Листинг 5. Использование Media Queries для создания адаптивного макета страницы
@media all and (min-width: 800px) {
  #nav {
    width: 300px;
    float: left;
    margin-right: 20px;
  }
  #grid {
    width: 450px;
    float: left;
  }
}

@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
  #grid {
    width: 100%;
  }
}

На устройствах с более высоким разрешением экрана страница будет выглядеть так, как показано на рисунке 1.

Рисунок 1. Отображение Web-страницы на экране с более высоким разрешением
Рисунок 1. Отображение Web-страницы на экране с более высоким разрешением
Рисунок 1. Отображение Web-страницы на экране с более высоким разрешением

На устройствах с более низким разрешением экрана страница будет выглядеть так, как показано на рисунке 2.

Рисунок 2. Отображение Web-страницы на экране с более низким разрешением
Рисунок 2. Отображение Web-страницы на экране с более низким разрешением
Рисунок 2. Отображение Web-страницы на экране с более низким разрешением

Конечно, мы рассмотрели очень простой пример, но тем не менее он показывает, насколько просто создать адаптивный макет страницы с помощью jQuery Mobile и CSS3. Эти технологии обладают невероятными возможностями и являются лишь отправной точкой в ваших начинаниях. Добавляя простые data-role атрибуты в HTML-код, можно создавать мобильные версии Web-страниц, а с помощью CSS3 Media Queries можно разрабатывать дизайн страниц, который адаптируется под устройства с различными разрешениями экранов. Если Web-страницы просматриваются на обычном стационарном компьютере, можно даже изменить стиль jQuery Mobile, чтобы они выглядели не так, как на мобильном устройстве. Все, что для этого требуется – это проверить разрешение экрана с помощью Media Query и изменить CSS для соответствующих компонентов jQuery Mobile, чтобы полностью переопределить стили темы по умолчанию.

Заключение

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


Ресурсы для скачивания


Похожие темы


Комментарии

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Мобильные приложения, Open source
ArticleID=837396
ArticleTitle=Разработка адаптивного дизайна с помощью jQuery Mobile и CSS3
publish-date=09252012