Использование API-интерфейса jQuery Mobile для точного управления Web-элементами

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

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

Крис Хэдлок, Web-разработчик/дизайнер, Studio Sedition

Фото Криса ХэдлокаКрис Хэдлок (Kris Hadlock) занимается разработкой и Web-дизайном по контрактам с 1996 года. Работал над проектами для таких компаний, как SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, GoDaddy Software и Fire Mountain Gems. Автор книг Ajax for Web Application Developers (издательство Sams) и The ActionScript Migration Guide (издательство New Riders), а также журналист и писатель, публиковавшийся на многочисленных Web-сайтах и в журналах по дизайну, в том числе Peachpit.com, InformIT.com и Practical Web Design. Крис – основатель студии Web-дизайна и разработки программного обеспечения www.studiosedition.com, специализирующейся в области синтеза формы и функциональности.



06.02.2013

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

В этой статье рассматриваются некоторые полезные свойства, события и открытые методы инфраструктуры jQuery Mobile. В каждом разделе рассматриваются определенные возможности и приводятся примеры кода для их реализации. Для запуска любого из примеров необходимо загрузить последние версии jQuery и инфраструктуры jQuery Mobile или ссылаться на файлы непосредственно из сети доставки контента jQuery (jQuery content delivery network, CDN) из вашего HTML-файла (см. раздел Ресурсы).

Глобальные параметры

С помощью API-интерфейсов jQuery Mobile можно получить доступ к следующим глобальным параметрам, позволяющим изменить поведение jQuery Mobile по умолчанию:

  • Расширение события инициализации jQuery Mobile.
  • Создание собственных пространств имен.
  • Инициализация страниц.
  • Настройка ключа URL-адреса субстраницы.
  • Установка классов активных страниц и кнопок.
  • Установка эффектов перехода по умолчанию для страниц и диалогов.
  • Настройка сообщений загрузки и сообщений об ошибках.

Расширение события инициализации jQuery Mobile

В jQuery Mobile имеется событие инициализации, которое загружается перед каждой загрузкой события jQuery document.ready. В действительности jQuery Mobile вызывает событие инициализации под названием mobileinit для самого объекта документа. Это позволяет переопределять и расширять глобальные параметры jQuery Mobile по умолчанию, с рассмотрения которых мы и начнем нашу статью. Для того чтобы расширить событие mobileinit, необходимо добавить собственный обработчик событий JavaScript перед загрузкой инфраструктуры jQuery Mobile, а также после ее загрузки (см. листинг 1).

Листинг 1. Расширение события mobileinit инфраструктуры jQuery Mobile
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="custom-jqm-mobileinit.js"></script>
<script type="text/javascript" src="jquery.mobile.js"></script>

Для расширения события mobileinit сначала необходимо привязать его к пользовательской функции. В листинге 2 приведен пример, в котором для расширения события mobileinit используется метод bind.

Листинг 2. Привязка события mobileinit
$(document).bind("mobileinit", function() {
  // Override global options here
});

После успешной привязки события mobileinit можно переопределять глобальные параметры. Для этого можно либо расширить объект $.mobile с помощью метода jQuery extend (см. листинг 3), либо просто переопределить отдельные свойства, непосредственно указав их значения.

Листинг 3. Расширение объекта $.mobile
$(document).bind("mobileinit", function() {
  $.extend(  $.mobile , {
    property = value
  });
});

Если необходимо изменить несколько свойств, то лучше воспользоваться методом extend, поскольку в этом случае вам не придется писать код для объекта $.mobile несколько раз. Однако если необходимо изменить только одно свойство, то лучше явно задать его новое значение, поскольку для этого потребуется написать меньше кода (см. листинг 4).

Листинг 4. Переопределение значений отдельных свойств
$(document).bind("mobileinit", function() {
  $.mobile.property = value;
});

Объект $.mobile является отправной точкой для установки значений всех свойств.

Создание собственных пространств имен

С помощью пространств имен вы можете изменять атрибуты HTML5 data (например, data-role). Пространство имен позволяет вам добавить собственное имя, которое будет отображаться, например, между частями data- и -role атрибута data-role. За настройку пространства имен отвечает свойство ns объекта $.mobile. В листинге 5 приведен пример настройки собственного пространства имен с помощью свойства ns.

Листинг 5. Листинг 5. Создание собственного пространства имен
$(document).bind("mobileinit", function() {
  $.mobile.ns = "my-custom-ns";
});

В пользовательском пространстве имен из листинга 5 элемент data-role получил новое имя data-my-custom-ns-role, что позволяет ссылаться на эти пространства имен с помощью CSS-селекторов. Это, в свою очередь, является дополнительным способом разработки пользовательских тем для мобильных виджетов, использующих эти пространства имен.

Инициализация страниц

В jQuery Mobile есть свойство с именем autoInitializePage, которое определяет, должна ли быть инициализирована Web-страница. По умолчанию это свойство имеет значение True, следовательно, когда документ готов, страница всегда инициализируется. Тем не менее вы можете расширить объект $.mobile, установив это свойство в False, и выполнять инициализацию страниц позже. В листинге 6 приведен пример, показывающий, как можно отложить инициализацию страницы до окончания выполнения другого сценария. Если на вашей Web-странице выполняется большой объем JavaScript-кода на стороне клиента, то, возможно, будет разумно отложить инициализацию до тех пор, пока DOM не завершит загрузку и JavaScript на стороне клиента не получит возможность выполняться.

Листинг 6. Установка автоматической инициализации мобильных Web-страниц
<!DOCTYPE HTML>
<html>
<head>
  <title>Understanding the jQuery Mobile API</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(document).bind("mobileinit", function() {
      $.mobile.autoInitializePage = false;
    });
  </script>
  <script type="text/javascript" src="jquery.mobile.js"></script>
</head>

<body>

  <div data-role="page">
    <div data-role="content">
      <ul data-role="listview" id="my-list"></ul>
    </div>
  </div>

  <script type="text/javascript">
    $('#my-list').html('<li><a href="page-2.html">Link to another page</a></li>');
    $.mobile.autoInitializePage = true;
  </script>

</body>
</html>

Настройка ключа URL-адреса субстраницы

При ссылках на суб-страницы jQuery Mobile по умолчанию использует ключ URL-параметра ui-page. Этот ключ можно изменить через свойство subPageUrlKey объекта $.mobile. Любая строка, указанная в качестве значения этого свойства, отображается в сгенерированных виджетом URL-адресах субстраниц. Например, если в качестве значения параметра subPageUrlKey вы зададите значение my-page, то URL-адрес будет выглядеть как web-page.html&my-page=value, а не web-page.html&ui-page=value (как это было бы по умолчанию).

Помимо того, что эта возможность позволяет создавать более привлекательные URL-адреса, она позволяет сокращать их или задавать для них значения, определенным образом связанные с Web-сайтом, на котором они расположены.

Установка классов активных страниц и кнопок

Когда Web-страница включает в себя инфраструктуру jQuery Mobile, к элементу ui-page автоматически применяется CSS-класс, определенный по умолчанию. Чтобы изменить значение по умолчанию (это значение ui-page-active), просто измените свойство activePageClass объекта $.mobile. После того как этот класс будет изменен, CSS-класс по умолчанию, включенный в состав jQuery Mobile, больше не будет применяться к классу ui-page-active, поскольку последнего больше не существует. Поэтому вы должны создать ваш собственный SCC-класс, соответствующий значению этого свойства.

Установка эффектов перехода по умолчанию для страниц и диалогов

По умолчанию страницы и диалоги jQuery Mobile содержат эффекты, отображающиеся при переходе со страницы на страницу, если эти переходы обрабатываются при помощи Ajax. По умолчанию при смене страниц используется эффект slide, а для диалогов – эффект pop. Для изменения этих значений необходимо использовать свойства defaultPageTransition и defaultDialogTransition. В листинге 7 приведен пример, который показывает, как можно изменить значения этих свойств.

Листинг 7. Установка эффектов перехода по умолчанию для страниц и диалогов
$(document).bind("mobileinit", function() {
  $.mobile.defaultPageTransition = "fade";
  $.mobile.defaultDialogTransition = "fade";
});

В этом примере как для страниц, так и для диалогов используется эффект затухания. Инфраструктура jQuery Mobile позволяет использовать шесть эффектов перехода на основе CSS: slide, slideup, slidedown, pop, fade и flip. Также эти эффекты можно применять непосредственно в гиперссылках, задействовав атрибут data-transition.

Настройка сообщений загрузки и сообщений об ошибках

Еще два параметра инфраструктуры jQuery Mobile позволяют управлять сообщениями о загрузке и ошибках. Сообщения загрузки по умолчанию отображают строку loading. Чтобы изменить это значение, используйте свойство loadingMessage. В листинге 8 я изменил стандартное сообщение загрузки (loading) на Please wait. В результате, когда страница загружается при помощи Ajax, появляется маленькое диалоговое окно с моим сообщением загрузки.

Листинг 8. Листинг 8. Изменение сообщения загрузки по умолчанию
$(document).bind("mobileinit", function() {
  $.mobile.loadingMessage = "Please wait";
});

Значением по умолчанию свойства pageLoadErrorMessage является строка Error Loading Page. Я изменю это значение на какое-нибудь более дружелюбное (листинг 9).

Листинг 9. Изменение сообщения об ошибке по умолчанию
$(document).bind("mobileinit", function() {
  $.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try again.';
});

Перехват событий jQuery Mobile

С помощью API jQuery Mobile можно расширить события следующих типов:

  • События, связанные с прикосновениями к экрану (touch events).
  • События, связанные с ориентацией устройства (orientation events).
  • События, связанные с прокруткой (scroll events).

События, связанные с прикосновениями к экрану

В jQuery Mobile можно настраивать несколько событий, связанных с прикосновениями к экрану. Конечно, эти события будут работать только при открытии Web-сайтов jQuery Mobile на устройствах с сенсорными экранами. Если эти условия выполняются, то можно запустить любой JavaScript-код при наступлении одного из следующих пяти событий: tap, taphold, swipe, swipeleft и swiperight. Название каждого события говорит само за себя, а описания событий приведены в таблице 1.

Таблица 1. Настраиваемые события jQuery Mobile, связанные с прикосновениями
СобытиеОписание
tapСрабатывает при быстром прикосновении к экрану.
tapholdСрабатывает при прикосновении к экрану и удержании в пределах одной секунды.
swipeЭто событие срабатывает при вертикальном или горизонтальном перетаскивании Web-страницы. Фактически, это единственное событие, которое имеет связанные с ним свойства. Эти свойства следующие: scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold и verticalDistanceThreshold.
swipeleftСрабатывает при перетаскивании Web-страницы влево.
swiperightСрабатывает при перетаскивании Web-страницы вправо.

Чтобы привязать код к любому из этих событий, необходимо использовать событие document.ready. Когда документ будет готов, вы сможете получить доступ к элементу и выполнить привязку к желаемому событию (см. листинг 10).

Листинг 10. Привязка к событиям, связанным с прикосновениями
<!DOCTYPE HTML>
<html>
<head>
  <title>Understanding the jQuery Mobile API</title>
  <link rel="stylesheet" href="jquery.mobile.css" />
  <script src="jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(".tap-hold-test").bind("taphold", function(event) {
        $(this).html("Tapped and held");
      });  
    });
  </script>
  <script src="jquery.mobile.js"></script>
</head>

<body>
  <div data-role="page" id="my-page">
    <div data-role="header">
        	<h1>Header</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" id="my-list">
            	<li class="tap-hold-test">Tap and hold test</li>
            </ul>
    </div>
  </div>
</body>
</html>

В этом примере событие taphold привязывается к элементу списка. Когда документ будет готов, на этот элемент списка можно будет ссылаться с помощью jQuery. Итак, на этот элемент можно ссылаться и он привязан к событию taphold, которое изменяет HTML внутри элемента списка.

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

На смартфонах и планшетных устройствах можно использовать простое событие, связанное с ориентацией устройства – оно называется orientationchange. Это событие срабатывает тогда, когда меняется положение устройства (горизонтальное или вертикальное). Чтобы определить, в каком положении находится устройство, можно обратиться к доступному только для чтения свойству orientation, значением которого может быть portrait или landscape. Привязка к событию orientationchange требует ссылки на элемент body и последующего использования метода bind, выполняющего саму привязку (см. листинг 11).

Листинг 11. Привязка события orientationchange к элементу body
$(document).ready(function(){
  $('body').bind('orientationchange', function(event) {
    alert('orientationchange: '+ event.orientation);
  });
});

Кроме того, важно привязать событие после того, как документ будет готов. В противном случае вы можете получить непредсказуемый результат, поскольку элемент body может оказаться недоступным в момент привязки. Также можно расширить этот код, вызывая событие orientationchange в момент готовности документа (см. листинг 12).

Листинг 12. Вызов события orientationchange в момент готовности документа
$(document).ready(function(){
  $('body').bind('orientationchange', function(event) {
    alert('orientationchange: '+ event.orientation);
  });

  $('body').trigger('orientationchange');
});

Вызов события в момент готовности документа позволяет определить ориентацию устройства при первоначальной загрузке Web-страницы. Это особенно полезно в тех случаях, когда способ отображения содержимого зависит от текущей ориентации устройства. Доступ к значениям параметра ориентации устройства можно получить через CSS, поскольку они добавлены в элемент HTML внутри Web-страницы. Эти мощные возможности позволяют изменять расположение содержимого страниц в зависимости от ориентации устройства.

События, связанные с прокруткой

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

Листинг 13. Привязка кода к событию scrollstart
$(document).ready(function(){

  $('body').bind('scrollstart', function(event) {
    // Add scroll start code here
  });

});

Другое событие называется scrollstop и срабатывает при остановке прокрутки. Как видно из листинга 14, привязка к этому событию ничем не отличается от привязки к событию scrollstart.

Листинг 14. Привязка кода к событию scrollstop
$(document).ready(function(){

  $('body').bind('scrollstop', function(event) {
    // Add scroll stop code here
  });

});

Привязка к любому из этих событий должна выполняться после того, как документ будет официально готов. Это гарантирует то, что элемент body будет доступен, и его можно будет связать с событиями. Использование обоих этих методов может оказаться полезным, например, при выполнении JavaScript-кода, открывающего доступ к опциям внизу Web-страницы по мере ее прокрутки (это называется ленивой загрузкой); в этом случае изображения не загружаются при загрузке самой страницы. Это позволяет сократить время загрузки страницы и отображать ее содержимое только тогда, когда к нему выполняется обращение.


Работа с открытыми методами

API-интерфейсы jQuery Mobile позволяют использовать открытые методы для получения следующей функциональности:

  • Программная смена страниц.
  • "Тихая" загрузка страниц.
  • Работа со вспомогательными методами.

Программная смена страниц

Одним из открытых методов инфраструктуры jQuery Mobile является метод, позволяющий программно сменить страницу (в дополнение к использованию гиперссылок и отправке данных форм). При программной смене страниц сохраняются все визуальные элементы, появляющиеся начиная от загрузки страницы и заканчивая переходами по страницам. В листинге 15 показано, как можно сменить страницу с помощью метода changePage объекта $.mobile.

Листинг 15. Смена страницы с помощью метода changePage
<!DOCTYPE HTML>
<html>
<head>
  <link rel="stylesheet" href="jquery.mobile.css" />
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
	$("#my-page").live('pagecreate', function(event) {
		$("#alt-link").bind("click", function(event) {
			$.mobile.changePage("page-2.html");
		});
	});
  </script>
  <script type="text/javascript" src="jquery.mobile.js"></script>
</head>

<body>

  <div data-role="page" id="my-page">
    <div data-role="content">
      <ul data-role="listview" id="my-list"></ul>
    </div>
  </div>

  <script type="text/javascript">
    $('#my-list').append('<li><a href="page-2.html">Link to another page</a></li>');
    $('#my-list').append('<li><a href="#" id="alt-link">Link to another 
	page programmatically</a></li>');
  </script>

</body>
</html>

Обязательным аргументом является аргумент to, который может представлять собой строку или объект. Аргумент to может быть абсолютным или относительным URL-адресом. Аргумент объекта должен являться объектом коллекции jQuery (другими словами – встроенным элементом, использующимся в качестве дополнительной страницы). Также имеется ряд необязательных свойств, которые могут быть переданы в качестве объектов:

  • transition
  • reverse
  • changeHash
  • role
  • pageContainer
  • type
  • data
  • reloadPage

В листинге 15 эти аргументы не используются, в нем просто передается имя другого HTML-файла.

Для использования метода changePage необходимо выполнить несколько предварительных действий. Прежде всего, необходимо создать элемент div со значением data-role атрибута page и добавить к нему идентификатор (ID). Затем необходимо добавить событие pagecreate с этим идентификатором вместо события jQuery document.ready. После этого можно добавлять события, вызываемые по щелчку. В документации jQuery Mobile рекомендуется не вызывать событие click напрямую, а привязывать ссылки. Теперь можно сменить страницу с помощью метода changePage.

"Тихая" загрузка страниц

Другим замечательным методом объекта $.mobile является метод loadPage. Этот метод можно использовать для загрузки внешних страниц без их отображения, что является хорошим способом предварительной загрузки страниц для их более быстрого отображения при переходе на них по ссылкам. Для использования этого метода необходимо написать некоторый код, как и в случае с методом changePage. Сначала необходимо создать элемент page с идентификатором, чтобы на него можно было ссылаться для привязки события pagecreate. После этого вы можете вызвать событие loadPage при срабатывании события pagecreate (см. листинг 16).

Листинг 16. Предварительная загрузка страниц с помощью метода loadPage
<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="jquery.mobile.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
		$("#my-page").live('pagecreate', function(event) {
			$.mobile.loadPage("page-2.html");
		});
	</script>
   <script type="text/javascript" src="jquery.mobile.js"></script>
</head>

<body>

    <div data-role="page" id="my-page">
        <div data-role="content">
            <ul data-role="listview" id="my-list">
		<li><a href="page-2.html">Link to another page</a></li>
	</ul>
        </div>
    </div>

</body>
</html>

Метод loadPage содержит обязательный аргумент, который может представлять собой строку с абсолютным или относительным URL-адресом, или же являться объектом. Также имеются дополнительные аргументы, принимающие объект с одним или несколькими свойствами:

  • role
  • pageContainer
  • type
  • data
  • reloadPage
  • loadMsgDelay

Работа со вспомогательными методами

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

Таблица 2. Встроенные вспомогательные методы jQuery Mobile
МетодОписание
$.mobile.path.parseUrlВыполняет разбор URL-адреса на объект с 16 свойствами.
$.mobile.path.makePathAbsoluteПреобразует относительный путь к файлу или директории в абсолютный.
$.mobile.path.makeUrlAbsoluteПреобразует относительный URL-адрес в абсолютный.
$.mobile.path.isSameDomainСравнивает два URL-адреса.
$.mobile.path.isRelativeUrlОпределяет, является ли URL-адрес относительным.
$.mobile.path.isAbsoluteUrlОпределяет, является ли URL-адрес абсолютным.
$.mobile.path.baseРаботает со сгенерированным базовым элементом.

Заключение

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


Загрузка

ОписаниеИмяРазмер
Пример кода Web-страницы jQuery Mobile.jquery-mobile-api.zip115 КБ

Ресурсы

Научиться

Получить продукты и технологии

  • Загрузите JavaScript- и CSS-файлы jQuery Mobile (EN) с Web-сайта проекта.
  • Программный продукт IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile (EN) включает в себя инструментарий IBM Dojo 1.7 Toolkit, новые компоновочные блоки для мобильных и RIA (Rich Internet Application)-приложений, а также Dojo-компонент для работы с диаграммами. Используя Feature Pack for Web 2.0 and Mobile совместно с инструментами Rational, вы можете адаптировать, развертывать и запускать на мобильных устройствах WebSphere-приложения, изначально разработанные для настольных браузеров.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, Open source, Мобильные приложения
ArticleID=857528
ArticleTitle=Использование API-интерфейса jQuery Mobile для точного управления Web-элементами
publish-date=02062013