Содержание


Библиотека jQuery Mobile

Часть 3. Обработка событий и визуальное оформление HTML-элементов

Comments

Серия контента:

Этот контент является частью # из серии # статей: Библиотека jQuery Mobile

Следите за выходом новых статей этой серии.

Этот контент является частью серии:Библиотека jQuery Mobile

Следите за выходом новых статей этой серии.

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

Работа со списками

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

В листинге 1 показано, как создать простой список, установив для HTML-элемента ul атрибут data-role со значением listview.

Листинг 1. Создание простого списка
<ul data-role="listview">
	<li><a href="a.html">A</a></li>
	<li><a href="b.html">B</a></li>
	<li><a href="c.html">C</a></li>
</ul>

Так как элементы списка являются ссылками, с правого края добавляется пиктограмма в виде стрелки, которая указывает на то, что этот элемент интерактивен. При нажатии на элемент jQuery Mobile активирует первую ссылку, находящуюся внутри элемента li, создавая AJAX запрос для вызова URL, указанного в ссылке.

Библиотека jQuery Mobile позволяет также создавать нумерованные списки. Если в листинге 1 заменить элемент ul на элемент ol, то все элементы списка будут пронумерованы. Кроме того, может возникнуть необходимость создать список "только для чтения". Чтобы создать такой список, необходимо просто удалить ссылки из элементов списка.

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

Если необходимо установить заголовки внутри списка, то этого можно достичь, задав для одного или нескольких элементов списка атрибут data-role со значением list-divider. В этом случае отмеченные элементы списка будут оформлены по-другому, отличаясь от других элементов списка.

Дополнительная функциональность для работы со списками

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

Часто требуется создать элемент списка, фрагменты которого имеют различное назначение. В этом случае внутрь HTML-тега, определяющего элемент списка, необходимо поместить две ссылки. jQuery Mobile автоматически вставит между этими ссылками горизонтальный разделитель, при этом вторая ссылка будет оформлена в виде пиктограммы. Тип этой пиктограммы можно задать атрибутом data-spliticon, а значение для него выбрать из стандартного списка пиктограмм.

При создании списка jQuery Mobile позволяет поместить в его элементы данные различных типов. Чтобы поместить текст внутри элемента, следует использовать заголовки и параграфы. Если необходимо поместить справа индикатор позиции в списке, то можно использовать любой HTML-элемент c CSS-классом ui-li-count. Если необходимо поместить текст на уровне заголовка элемента, то следует использовать CSS-класс ui-li-aside.

Для добавления графического изображения внутрь элемента списка достаточно вставить это изображение в качестве первого потомка в контейнер, определяющий элемент списка. В этом случае jQuery Mobile автоматически уменьшит изображение до размеров 80 пикселей по вертикали и горизонтали. Если внутрь элемента списка требуется поместить пиктограмму, то кроме действий, указанных выше, для HTML-элемента, определяющего пиктограмму, необходимо выбрать CSS класс ui-li-icon. В этом случае пиктограмма будет отмасштабирована до размера в 16 пикселей по вертикали и горизонтали.

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

Если возникла необходимость обновления списка без перезагрузки страницы, то следует вызвать метод refresh(), как показано ниже.

$('ul').listview('refresh')

В этом случае весь список, включая вложенные в него списки, будет обновлен.

Обработка событий

Мобильные Web-интерфейсы в общем случае строятся по такому принципу, что основными пользовательскими событиями будут разного рода прикосновения к экрану. Поэтому создатели jQuery Mobile расширили привычный список пользовательских событий. Стоит, однако, отметить, что все события обратно совместимы со стандартными оконными приложениями. Так как все события, обрабатываемые библиотекой jQuery Mobile, созданы поверх стандартных событий, то их обработку можно выполнять с использованием стандартных методов bind() и listen(), предоставляемых библиотекой jQuery.

Следующие типы событий связаны с прикосновениями к экрану:

  • tap - аналог стандартного события click, инициируется при быстром прикосновении к экрану мобильного устройства;
  • taphold - прикосновение и удержание (в течение примерно одной секунды);
  • swipe - прикосновение и последующее перемещение на 30 и более пикселей (или менее 20 пикселей по горизонтали) в течение 1 секунды;
  • swipeleft - событие swipe со сдвигом влево;
  • swiperight - событие swipe со сдвигом вправо.

События, связанные с изменением ориентации устройства:

  • orientationchange - событие возникает при изменении ориентации мобильного устройства в пространстве (вертикально, горизонтально).

События, относящиеся к прокрутке информации:

  • scrollstart - инициируется с началом прокручивания страницы;
  • scrollstop - инициируется в момент завершения прокручивания.

Независимо от того, показывается или нет страница в данный момент, к ней всегда привязаны два события. Но тип этих событий зависит от текущего состояния видимости страницы. Поэтому при переходе с одной страницы на другую возникает 4 события.

  • pagebeforeshow - событие, связанное с появляющейся страницей, запускается до начала анимации перехода;
  • pageshow - событие, связанное с появляющейся страницей, запускается после завершения анимации перехода;
  • pagebeforehide - событие, связанное с покидаемой страницей, запускается до начала анимации перехода;
  • pagehide - событие, связанное с покидаемой страницей, запускается по завершении анимации перехода.

Библиотека jQuery Mobile позволяет управлять процессом создания страниц, предоставляя доступ к двум событиям, происходящим в этот момент.

  • pagebeforecreate - событие происходит до инициализации процесса создания страницы;
  • pagecreate - событие происходит после инициализации процесса создания страницы.

Оформление внешнего вида страницы

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

Используемая по умолчанию система оформления внешнего вида (далее “тема”) имеет 5 встроенных цветовых решений. Для удобства работы им присвоены обозначения -- "a", "b", "c" , "d" и "e". Каждое цветовое решение автоматически применяется к различным элементам страницы так, чтобы конечное цветовое решение было контрастным и легко воспринимаемым. Так, например, цветовая схема "a" (черный фон, белый шрифт) по умолчанию применяется к верхним и нижним колонтитулам. В свою очередь цветовая схема "b" (синий фон, белый шрифт) применяется к элементам форм или заголовкам списков. Следует отметить, что одна и та же цветовая схема, будучи примененной к различным областям страницы (заголовок, список или область содержимого др.), отображается с небольшими различиями. Эти решения основаны на том, что заголовки или элементы управления (кнопки или формы) должны быть более контрастны, чем элементы, отображающие информацию, например, список или текст.

Чтобы получить уравновешенную “по умолчанию” цветовую схему достаточно не использовать при разметке никаких цветовых решений. Если потребуется изменить цветовые решения для различных элементов страницы необходимо прописать для этих элементов атрибут data-theme, указав ему в качестве значения один из вариантов - (a,b,c,d,e). Цветовые решения в jQuery Mobile настроены так, что если применить одну цветовую схему ко всем элементам страницы, то в итоге получится контрастная уравновешенная схема. Но чаще всего применяются комбинации различных цветовых решений. Также программисты могут создавать свои темы, взяв за основу стили, поставляемые вместе с jQuery Mobile.

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

Листинг 2. Кнопка в верхнем колонтитуле
<div data-role="header" data-theme="b"> 
	<h1>Page Title</h1> 
	<a href="add-user.php" data-theme="с">Сохранить</a>
</div>

К элементам форм также можно применять цветовые темы. Однако у элементов форм есть состояния, отличающие их от других элементов. Например, в группе переключателей один может быть выбран, а в выпадающем списке выбранный пункт может иметь визуальное оформление, отличное от остальных пунктов. В библиотеке jQuery Mobile эта ситуация обрабатывается путем назначения выделенному элементу "активной" цветовой темы. "Активная" цветовая тема определяется для страницы на глобальном уровне и не может быть переопределена через разметку. Это сделано для того, чтобы не возникло ситуации, когда из-за ошибок в разметке активные элементы форм могут оказаться недоступными. Если же потребуется изменить стилевое решение для "активных" элементов формы, для этого необходимо отредактировать таблицу стилей, например, класс ui-btn-active.

По умолчанию к спискам применяются два цветовых решения: "с" для элементов и "b" для заголовков (или разделителей) при их наличии. Чтобы изменить внешний вид элементов списка необходимо задать атрибут data-theme для контейнера списка:

<ul data-role="listview" data-theme="d">

Если требуется применить различные цветовые решения к нескольким элементам списка, то для каждого элемента можно задать этот атрибут индивидуально. В свою очередь заголовок списка можно "раскрасить" с помощью атрибута data-dividertheme.

<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c">

Когда требуется раскрасить счетчики внутри списка, для этого необходимо задать контейнеру списка атрибут data-countertheme.

<ul data-role="listview" data-theme="a" data-dividertheme="b" data-counttheme="c">

Как говорилось выше, по умолчанию, элемент списка, являющийся ссылкой, оформляется пиктограммой, выровненной по правому краю и содержащей соответствующую стрелку. Если для элемента списка требуется использовать другую пиктограмму, то можно применить к элементу списка атрибут data-icon:

<li data-icon="info"><a href="#link">Link</a></li>

Более подробно использование пиктограмм в библиотеке jQuery Mobile описывается в первой статье цикла.

Заключение

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


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


Похожие темы


Комментарии

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Linux, Open source
ArticleID=646538
ArticleTitle=Библиотека jQuery Mobile: Часть 3. Обработка событий и визуальное оформление HTML-элементов
publish-date=04122011