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

Энрике Ортис, разработчик и автор, About Mobility Weblog

Энрике Ортис (C.Enrique Ortiz) – опытный разработчик и автор в области мобильных технологий. Он ведет блог на About Mobility и является основателем раздела Austin на MobileMonday.



01.02.2013

Введение

jQuery Mobile — это отличная инфраструктура (framework) для написания мобильных веб-приложений. jQuery Mobile представляет собой эффективную унифицированную инфраструктуру для написания мобильных веб-приложений, построенную "поверх" популярной инфраструктуры jQuery и ее пользовательского интерфейса. jQuery Mobile позволяет разработчику гарантировать единообразие вида, взаимодействия и поведения своего приложения на различных мобильных платформах. Базовые характеристики jQuery Mobile:

  • Общая простота и гибкость
    Инфраструктура jQuery Mobile проста в использовании и предоставляет следующие возможности.
    • Разработка страниц преимущественно с использованием разметки, т. е. с минимальным объемом JavaScript-кода или вообще без такового.
    • Использование расширенных возможностей и событий JavaScript.
    • Использование одиночного HTML-документа с несколькими встроенными страницами.
    • Разбиение приложения на страницы.
  • Прогрессивное улучшение (progressive enhancement) и постепенное сокращение возможностей (graceful degradation)
    Инфраструктура jQuery Mobile использует новейшие технологии HTML5, CSS 3 и JavaScript, однако не все мобильные устройства обеспечивают соответствующую поддержку. Философия jQuery Mobile состоит в том, чтобы поддерживать не только устройства высшего класса, но и менее продвинутые устройства (например, устройства без поддержки JavaScript), обеспечивая при этом наилучшие из доступных возможностей.
  • Поддержка тактильных функций и других методов ввода
    jQuery Mobile поддерживает различные методы и события ввода: пользовательские методы ввода, ориентированные на тактильный контакт, на мышь и на курсор.
  • Доступность
    Инфраструктура jQuery Mobile разработана с учетом обеспечения доступности. Она поддерживает приложения типа WAI-ARIA (Accessible Rich Internet Applications), которые позволяют с помощью соответствующих ассистирующих технологий сделать веб-страницы доступными для посетителей с физическими ограничениями.
  • Малое потребление ресурсов и модульность
    Инфраструктура потребляет мало ресурсов — ее общие размеры (для минимизированной и сжатой версии 1.0.1) составляют: 24 КБ для библиотеки JavaScript, 7 КБ для CSS, плюс несколько пиктограмм.
  • Поддержка тем
    Инфраструктура также предлагает систему тем, которая позволяет разработчику задавать собственный стиль для своего приложения. С помощью нового приложения ThemeRoller разработчик может с легкость создавать свои собственные темы.

Инфраструктура jQuery Mobile содержит все компоненты пользовательского интерфейса, необходимые для построения полных мобильных веб-приложений и веб-сайтов: страницы, диалоговые окна, панели инструментов, различные виды списковых представлений, различные элементы форм и кнопки и т.д. Инфраструктура jQuery Mobile построена поверх ядра jQuery, что обеспечивает разработчику доступ ко всем ключевым возможностям, включая операции с объектной моделью HTML-документов/XML-документов (DOM), обработку событий, взаимодействие с сервером с использованием Ajax, анимационные/изобразительные эффекты для веб-страниц.

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

В этой статье излагаются базовые сведения о новейшей версии jQuery Mobile (1.0.1). Вы узнаете о поддержке браузеров, о компонентах пользовательского интерфейса и об API-интерфейсах. Для освоения материала этой статьи читателю необходимо:

  • Иметь опыт работы с HTML
  • Понимать основы JavaScript
  • Обладать базовыми знаниями jQuery

Пример исходного кода jQuery Mobile, использованный в этой статье, можно загрузить по ссылке в разделе Загрузка. В разделе Ресурсы приведены ссылки на информацию по таким темам, как jQuery Mobile, jQuery, JavaScript, DOM, HTML5 и т. д.


Поддержка веб-браузеров

Мобильные браузеры прошли большой путь развития, однако не все мобильные устройства поддерживают технологии HTML5, CSS 3 и JavaScript. Именно здесь играют ведущую роль такие возможности jQuery Mobile, как поддержка прогрессивного улучшения (progressive enhancement) и постепенного сокращения возможностей (graceful degradation).

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

  • Весь базовый контент должен быть доступным для всех браузеров.
  • Все базовые функциональные возможности должны быть доступными для всех браузеров.
  • Улучшенная разметка поддерживается посредством внешнего связывания с CSS.
  • Усовершенствованное поведение поддерживается посредством внешнего связывания с JavaScript.
  • Учитываются предпочтения конечного пользователя относительно браузера.

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

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

  • A-grade: Устройства с полной поддержкой расширенных возможностей с анимированными переходами страниц на базе Ajax. jQuery Mobile поддерживает более 20 различных устройств/платформ, в том числе следующие: iOS 3.2-5.0; Android 2.1-2.3 и 3.0; BlackBerry 6-7 и Playbook; Skyfire 4.1; Opera Mobile; а также ПК-версии браузеров Chrome, Firefox, Internet Explorer, Opera.
  • B-grade: Устройства с поддержкой расширенных возможностей, но без навигационных функций Ajax. Поддерживаются следующие устройства: BlackBerry 5.0; Opera Mini 5.0-6.5; Nokia Symbian ^3.
  • C-grade: Устройства с поддержкой базовых, нерасширенных возможностей HTML. Поддерживаются следующие устройства: смартфоны старых моделей, в том числе на базе BlackBerry 4.x, Windows Mobile и др.

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

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


Структура страницы jQuery Mobile

Как показано в листинге 1, обычная страница jQuery Mobile имеет три секции: header (верхний колонтитул), content area (область контента), footer (нижний колонтитул)

Листинг 1. Типичная страница jQuery Mobile
lt;div data-role="page" id="page1">
    <div data-role="header">
       <h1>HEADER</h1>
    </div
    <div data-role="content">
       <p>
       CONTENT AREA
       </p>
    </div>
    <div data-role="footer">
       <h1>FOOTER</h1>
    </div>

На рис. 1 показана структура, соответствующая листингу 1.

Рисунок 1. Структура HTML5-страницы jQuery Mobile
Image with a header, a content area, and a footer

Верхний колонтитул — это место, куда разработчик обычно помещает заголовки страницы, логотипы и т. п. Секция content area — это место, куда помещаются конкретный контент веб-приложения и различные виджеты. Нижний колонтитул прекрасно подходит для навигационных элементов.

Чтобы воспользоваться преимуществами усовершенствованных функций jQuery Mobile и HTML-синтаксиса, HTML-документ jQuery Mobile должен задать HTML5-элемент doctype. Остальная часть HTML-документа состоит из следующих частей.

  • Секции <head> и <body>; секция <head> содержит ссылки на мобильные темы jQuery Mobile и CSS
  • Секция <body> содержит реальный контент jQuery Mobile

В листинге 2 показан пример HTML5-документа jQuery Mobile.

Листинг 2. Структура HTML5-страницы jQuery Mobile
//Define the HTML5 doctype:

<!DOCTYPE html> 

// Define the HTML5 <head> with references to jQuery, jQuery Mobile and CSS mobile themes:

<html> 

<head> 
    <title>Page Title</title> 
	
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/
jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.
min.js"></script>
</head> 

// Define the HTML document <body> that includes the jQuery Mobile elements:

<body> 

<div data-role="page" id="page1">

    <div data-role="header">
       <h1>HEADER</h1>
    </div>

    <div data-role="content">
       <p>
       CONTENT AREA
       </p>

    </div>

    <div data-role="footer">
       <h1>FOOTER</h1>
    </div>
</div>

<div data-role="page" id="page2">
:
:
</div>

</body>
</html>

// The footer can be turned into a navigation bar very easily, as follows:

<center>
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">One</a>
<a href="index.html" data-role="button">Two</a>
<a href="index.html" data-role="button">Three</a>
<a href="index.html" data-role="button">None</a>
</div>            
</div>
</center>

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

Рисунок 2. Нижний колонтитул страницы
Image of page footer with buttons 'One,' 'Two,' 'Three,' and 'None'

Атрибуты page, header, content, footer являются необязательными: тем не менее рекомендуется их использовать, поскольку они упрощают приведение страниц в соответствие с концепцией jQuery Mobile.

Одиночные страницы, множественные страницы и связывание страниц

Одиночный HTML-документ может содержать как одну, так и несколько страниц jQuery Mobile; это указывается в атрибуте data-role="page". Если разработчик имеет дело с несколькими страницами, он должен задать атрибут id с уникальным идентификатором страницы, который используется для ссылок между внутренними страницами. При загрузке многостраничного HTML-документа демонстрируется только его первая страница.

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

Связывание и загрузка без технологии Ajax приводит к принудительному применению технологии HTTP. При использовании этого подхода разработчик не сможет получить анимированных переходов. Для загрузки без Ajax используйте для ссылки rel="external", data-ajax="false" или target.


Поддерживаемые события и методы

При использовании инфраструктуры jQuery разработчик может обратиться непосредственно к jQuery-объекту (как $), получив в результате доступ к средствам jQuery. Инфраструктура jQuery Mobile, расширяющая ядро jQuery, доступна посредством префикса $.mobile, который также обеспечивает доступ к соответствующим событиям и методам jQuery Mobile. Некоторые из событий и методов, предоставляемых в $.mobile, описываются ниже.

События

Как и в случае других событий jQuery, связывание с событиями jQuery Mobile осуществляется с помощью функций live() и bind(). Например, к тактильным событиям относятся tap, taphold и различные разновидности swipe, а также события виртуальной мыши. Разработчик может осуществить связывание с событиями изменения ориентации и прокрутки, такими как scrollstart и scrollstop. События страницы позволяют получать уведомления:

  • Перед созданием страницы
  • При создании страницы
  • Непосредственно перед тем, как страница демонстрируется или скрывается
  • При демонстрации или скрытии страницы

Инициализация jQuery Mobile

Если вы знакомы с jQuery, то наверняка знаете, что для выполнения своего кода после загрузки DOM вам необходимо инициализировать функцию $(document).ready(). В случае jQuery Mobile для осуществления инициализации осуществляется связывание с событием pageinit, как показано в листинге 3.

Листинг 3. Связывание с событием pageint
$( '#welcomePage' ).live( 'pageinit',function(event){
...
});

После инициализация событие pageinit переключается на указанную страницу. Данный механизм будет работать независимо от того, каким образом загружается страница (непосредственно или с помощью Ajax).

Переопределение значений по умолчанию в инфраструктуре jQuery Mobile

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

Листинг 4. Инициализация jQuery Mobile
$(document).bind("mobileinit", function(){
  //apply overrides here
});

Для получения дополнительной информации о значениях jQuery по умолчанию посетите глобальную страницу конфигурации jQuery Mobile (см. раздел Ресурсы).

Методы

Кроме того, jQuery Mobile предоставляет с объектом $.mobile несколько методов. В таблице 1 показаны некоторые из имеющихся методов.

Таблица 1. Методы jQuery Mobile
МетодИспользование
$.mobile.changePageДля программного переключения с одной страницы на другую. Например, для перехода к странице weblog.php с использованием плавного перехода: $.mobile.changePage("weblog.php", "slide").
$.mobile.loadPageДля загрузки внешней страницы, для ее улучшения с помощью jQuery Mobile и для вставки этой страницы в DOM.
$.mobile.showPageLoadingMsgДля демонстрации сообщения о загрузке страницы.
$.mobile.hidePageLoadingMsgДля скрытия сообщения о загрузке страницы.
$.mobile.path.isSameDomainСлужебный метод для сравнения доменов двух URL-адресов.
$.mobile.activePageСсылка на страницу, которая демонстрируется в настоящее время.

Страница методов jQuery Mobile имеет и другие методы и утилиты (см. раздел Ресурсы).


Виджеты и HTML5-атрибуты data-*

jQuery Mobile применяет HTML5-атрибуты data-* для поддержки различных компонентов пользовательского интерфейса, переходов и структуры страницы. Эти HTML5-атрибуты играют ключевую роль в упрощении jQuery Mobile. Браузеры, не поддерживающие технологию HTML5, "молча" игнорируют HTML5-атрибуты.

В следующем перечне демонстрируются программный код и изображения для различных виджетов пользовательского интерфейса; а также атрибуты data-* и их использование для создания компонентов пользовательского интерфейса.

  • Компоненты page (страница), header (верхний колонтитул), content (контент), footer (нижний колонтитул)
    Листинг 5. Компоненты page (страница), header (верхний колонтитул), content (контент), footer (нижний колонтитул)
    <div data-role="page" id="page1">
        <div data-role="header">
           <h1>HEADER</h1>
        </div
        <div data-role="content">
           <p>
           CONTENT AREA
           </p>
        </div>
        <div data-role="footer">
           <h1>FOOTER</h1>
        </div>
    </div>
    Рисунок 3. Компоненты page (страница), header (верхний колонтитул), content (контент), footer (нижний колонтитул)
    Page, Header, Content, and Footer
  • Компонент Button (простая кнопка)
    Листинг 6. Компонент Button (простая кнопка)
    <a href="index.html" data-role="button" data-icon="info">Button</a>

    Рисунок 4. Компонент Button (простая кнопка)
    Basic button
  • Компонент Checkbox (флажок)
    Листинг 7. Компонент Checkbox (флажок)
    <input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />
    <label for="checkbox-0">Checkbox</label>
    Рисунок 5. Компонент Checkbox (флажок)
    Checkbox
  • Свертываемый компонент
    Листинг 8. Свертываемый компонент
    <div data-role="collapsible">
       <h3>Header</h3>
       <p>Paragraph...</p>
    
    </div>
    Рисунок 6. Свертываемый компонент
    collapsible
  • Открытие диалога с переходом
    Листинг 9. Открытие диалога
    <a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a>

    Код в листинге 9 представляет собой гиперссылку, которая открывает диалоговый виджет с переходом типа "всплывание". На рис. 7 показан пример диалогового виджета.

    Рисунок 7. Открытие диалогового окна
    open a dialog
  • Компонент Flip toggle switch (Перекидной переключатель)
    Листинг 10. Компонент Flip toggle switch (Перекидной переключатель)
    <label for="flip-a">Select slider:</label>
    <select name="slider" id="flip-a" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
    Рисунок 8. Компонент Flip toggle switch (Перекидной переключатель)
    flip toggle switch
  • Компонент Listview (Списковое представление)
    Листинг 11. Компонент Listview (Списковое представление)
    <ul data-role="listview" data-theme="g">
      <li><a href="Friends.html">Friends</a></li>
      <li><a href="SendMessage.html">Send Message</a></li>
      <li><a href="Share.html">Share</a></li>
    </ul>
    Рисунок 9. Компонент Listview (Списковое представление)
    list view
  • Компонент Navbar (Навигационная панель)
    Листинг 12. Компонент Navbar (Навигационная панель)
    <div data-role="navbar">
       <ul>
           <li><a href="a.html" class="ui-btn-active">One</a></li>
           <li><a href="b.html">Two</a></li>
       </ul>
    </div>
    Рисунок 10. Навигационная панель
    Nav bar
  • Компонент Radio button (Селективная кнопка)
    Листинг 13. Компонент Radio button (Селективная кнопка)
    <fieldset data-role="controlgroup">
        <legend>Choose a pet:</legend>
            <input type="radio" name="radio-choice-1" id="radio-choice-1" 
    value="choice-1" checked="checked" />
            <label for="radio-choice-1">Cat</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-2" 
    value="choice-2"  />
            <label for="radio-choice-2">Dog</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-3"
    value="choice-3"  />
            <label for="radio-choice-3">Hamster</label>
    </fieldset>
    Рисунок 11. Компонент Radio button (Селективная кнопка)
    radio button
  • Компонент выбора для формы
    Листинг 14. Компонент выбора
    <label for="select-choice-0" class="select">Shipping 
    method:</label>
    <select name="select-choice-0" id="select-choice-1">
       <option value="standard">Standard: 7 day</option>
       <option value="rush">Rush: 3 days</option>
       <option value="express">Express: next day</option>
       <option value="overnight">Overnight</option>
    </select>
    Рисунок 12. Компонент выбора
    Select (form)
  • Компонент Slider (Ползунок)
    Листинг 15. Компонент Slider (Ползунок)
    <label for="slider-0">Input slider:</label>
    <input type="range" name="slider" id="slider-0" value="60" 
    min="0" max="100" />
    Рисунок 13. Компонент Slider (Ползунок)
    Slider
  • Окно ввода текста
    Листинг 16. Окно ввода текста
    <label for="basic">Text Input:</label>
    <input type="text" name="name" id="basic" value=""  />
    Рисунок 14. Окно ввода текста
    text input
  • Текстовое поле
    Листинг 17. Текстовое поле
    <label for="textarea-a">Textarea:</label>
    <textarea name="textarea" id="textarea-a">
    Basic textarea.
    </textarea>
    Рисунок 15. Компонент Textarea (Текстовое поле)
    text area
  • Компонент Grid (Сетка)
    Листинг 18. Компонент Grid (Сетка)
    <div class="ui-block-a">Block A</div>
    <div class="ui-block-b">Block B</div>
    <div class="ui-block-c">Block C</div>
    </div>

    Примечание:

    • Для двух столбцов используйте класс ui-grid-a
    • Для трех столбцов используйте класс ui-grid-b
    • Для четырех столбцов используйте класс ui-grid-c
    • Для пяти столбцов используйте класс ui-grid-d
    Рисунок 16. Компонент Grid (Сетка)
    grid

Атрибут data-role используется для описания различных виджетов. Однако не все виджеты пользовательского интерфейса управляются атрибутом data-role (например, виджеты select, slider и text input). Более подробная информация о различных атрибутах data-* приведена в справке по атрибуту data- (см. раздел Ресурсы).

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

Диалоговые окна

Модальные диалоги — это важный тип страниц, который может оказаться весьма полезным для предупреждения или информирования пользователя. Любая страница может быть превращена в модальный диалог посредством добавления атрибута data-rel="dialog" к якорной ссылке страницы следующим образом.

<a href="tc.html" data-rel="dialog" data-transition="pop">Terms of 
Use</a>

Диалоговые окна поддерживают применение переходов и тем. Дополнительная справочная информация содержится на странице jQuery Mobile Dialog (см. раздел Ресурсы).

Списковые представления

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

  • Basic-linked list (простой список со ссылками)
    Листинг 19. Basic-linked list (простой список со ссылками)
    <ul data-role="listview">
      <li><a href="index.html">Acura</a></li>
    </ul>
    Рисунок 17. Basic-linked list (простой список со ссылками)
    basic linked list
  • Nested list (Вложенный список)
    Листинг 20. Nested list (Вложенный список)
    <ul data-role="listview">
      <li>
        <h3>Animals</h3>
        <p>All your favorites from aarkvarks to zebras.</p>
          <ul>
            <li>Pets
              <ul>
                <li><a href="index.html">Canary</a></li>
                <li><a href="index.html">Cat</a></li>
                <li><a href="index.html">Dog</a></li>
                <li><a href="index.html">Gerbil</a></li>
                <li><a href="index.html">Iguana</a></li>
                <li><a href="index.html">Mouse</a></li>
              </ul>
            </li>
          </ul>
    </ul>
    Рисунок 18. Nested list (Вложенный список)
    nested list
  • Numbered list (Нумерованный список)
    Листинг 21. Numbered list (Нумерованный список)
    <ol data-role="listview">
      <li><a href="index.html">The Godfather</a></li>
    </ol>
    Рисунок 19. Numbered list (Нумерованный список)
    numbered list
  • Split button list (Список с разделенными кнопками)
    Листинг 22. Split button list (Список с разделенными кнопками)
    <ul data-role="listview" data-split-icon="gear" data-split-theme="d">
      <li>
        <a href="index.html">
        <img src="images/album-ws.jpg" />
        <h3>Elephant</h3>
        <p>The White Stripes</p>
        </a><a href="lists-split-purchase.html" data-rel="dialog" 
    data-transition="slideup">Purchase album</a>
      </li>			
    </ul>
    Рисунок 20. Split button list (Список с разделенными кнопками)
    split button list

Inset-style lists (Списки с закругленными углами)

Все списковые представления jQuery Mobile могут быть представлены в стиле Inset-style (с закругленными углами) посредством задания атрибута data-inset (см. рис. 21).

Рисунок 21. Список с закругленными углами
inset-style list

В листинге 23 показан код списка с закругленными углами.

Листинг 23. Списки с закругленными углами
<ul data-role="listview" data-inset="true">
    <li>
      <a href="index.html">Get Friends</a>
    </li>
    <li>
      <a href="index.html">Post to Wall</a>
    </li>
    <li>
      <a href="index.html">Send Message</a>
    </li>
</ul>

jQuery Mobile предоставляет обширный набор списковых представлений. Дополнительная информация представлена на странице jQuery Mobile, посвященной списковым представлениям (см. раздел Ресурсы).

Формы

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

jQuery Mobile предоставляет обширный набор компонентов для форм. В листинге 24 показана форма с несколькими меню и кнопкой отправки.

Листинг 24. Простая форма с кнопкой отправки
<form action="forms-results.php" method="get"> 
    <fieldset> 
        <div data-role="fieldcontain">
            <label for="select-options" class="select">Choose 
an option:</label>
            <select name="select-options" id="select-options">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option2">Option 3</option>
            </select>
        </div>
        <button type="submit">Submit</button> 
    </fieldset> 
</form>

Меню выбора реализуются нативным оператором <select name="select-options" id="select-options">, однако jQuery Mobile позволяет улучшить дизайн этих меню. Элемент <div data-role="fieldcontain"> группирует различные значения с целью визуализации. Сама форма задается нативным оператором <form action="..." method="get">.

На рис. 22 показаны результаты, соответствующие коду из листинга 24.

Рисунок 22. Простая форма с меню выбора и кнопкой отправки
simple form with selection menu and submit button

Дополнительная информация представлена на странице jQuery Mobile, посвященной элементам форм (см. раздел Ресурсы).


Переходы между страницами

Инфраструктура jQuery Mobile поддерживает ряд изящных переходов на базе CSS (таблица 2), которые можно применять как к диалоговым окнам, так и к страницам.

Таблица 2. Переходы на базе CSS
ПереходИспользование
fadeЭффект перехода Fade in/fade out
popЭффект перехода Pop
flipЭффект перехода Flip
turnЭффект перехода Turn
flowЭффект перехода Flow (подобен эффекту Slide)
slideЭффект перехода Slide (горизонтальный)
slideupОтображение страницы или диалогового окна, скользящего от нижней части страницы к ее вершине
slidedownОтображение страницы или диалогового окна, скользящего от вершины страницы к ее нижней части
noneЭффект перехода отсутствует

Для принудительного применения конкретной анимации добавьте к ссылке атрибут data-transition (см. листинг 25.

Листинг 25. Добавление атрибута data-transition
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog"
 data-transition="fade">Search</a>

Переходы выполняются с помощью аппаратных ускорителей и требуют, чтобы браузер поддерживал трехмерные преобразования. Устройства, не поддерживающие трехмерные преобразования, не способны воспроизводить эти эффекты.

На странице jQuery Mobile, посвященной переходам, демонстрируется выполнение переходов, а также приводится другая релевантная информация (см. раздел Ресурсы).


Темы и инструмент ThemeRoller

Инфраструктура jQuery Mobile позволяет разработчику использовать атрибут data-theme для настройки внешнего вида своего приложения с помощью тем. jQuery Mobile предоставляет одну тему по умолчанию и пять дополнительных образцов тем, поименованных как A, B, C, D, E (таблица 3).

Таблица 3. Темы и стили
ТемаСтиль
Тема по умолчанию Default them
Образец ADefault them
Образец BDefault them
Образец CDefault them
Образец DDefault them
Образец EDefault them

Разработчик может применять темы к отдельным элементам, таким как страница, кнопка и т. д.

На рис. 24 показано веб-приложение ThemeRoller, позволяющее разработчику создавать темы для своего мобильного веб-приложения или для своего мини-веб-сайта. Кроме того, разработчик может с помощью инструмента ThemeRoller построить свою собственную тему, загрузить собственный CSS-файл, а затем использовать его в своем проекте.

Рисунок 23. ThemeRoller
theme roller

Заключение

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


Загрузка

ОписаниеИмяРазмер
Исходный код jQuery-плагина jquerymobileexamplecode.zip2 КБ

Ресурсы

Научиться

  • Веб-сайт jQuery Mobile. Сведения о платформах, темы, ресурсы, документация, новости и многое другое.
  • Веб-сайт документации. Вся документация по тематике jQuery
  • Инстумент ThemeRoller for jQuery Mobile. Позволяет создать до 26 образцов тем (поименованных буквами A-Z) с уникальными цветовыми схемами, а затем использовать эти темы в любом сочетании, что обеспечивает неограниченные возможности.
  • Дополнительная информация о jQuery Mobile:
  • Демонстрации и документация: Обзор jQuery Mobile, сведения по API-интерфейсу и компонентам, демонстрационный код.
  • Поддерживаемые мобильные браузеры: Матрица мобильных браузеров, поддерживаемых jQuery Mobile.
  • Руководство по JavaScript: Все необходимые разъяснения по применению JavaScript.
  • Веб-сайт Mozilla Developer Center: Превосходный ресурс для веб-разработчиков.
  • "Основы jQuery (Rebecca Murphey, 2010 г.). Всеобъемлющий обзор JavaScript-библиотеки jQuery.
  • jQuery: Plugins/Authoring: Пособие по разработке собственного jQuery-плагина.
  • "Что такое Document Object Model? (W3C, ноябрь 2000 г.). Дополнительные сведения по модели Document Object Model.
  • Объекты и методы DOM: Учебное пособие по JavaScript, предоставляющее всеобъемлющий перечень всех свойств, коллекций и методов W3C DOM.
  • Обзор WAI-ARIA: Пакет Accessible Rich Internet Applications Suite – это способ повышения доступности веб-контента и веб-приложений для лиц с ограниченными возможностями.
  • Прогрессивное улучшение(Википедия). Стратегия веб-дизайна, придающая особое значение таким факторам, как доступность, семантическая HTML-разметка, внешние таблицы стилей и технологии написания скриптов.
  • "JavaScript и Document Object Model(developerWorks, июль 2002 г.). Основанный на JavaScript подход к DOM и способ построения веб-страницы, к которой пользователь сможет добавлять заметки с возможностью их редактирования.
  • "Учебное пособие по DOM (developerWorks, март 2007 г.). Учебное пособие по структуре DOM-документов.
  • Спецификация HTML5 от организации W3C.

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

  • jQuery Mobile: загрузите версию 1.1.0. Также доступна для загрузки версия jQuery Mobile Alpha 2.
  • PhoneGap— Инфраструктура разработки с открытым исходным кодом для построения межплатформенных мобильных приложений.

Обсудить

Комментарии

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=857080
ArticleTitle=Введение в jQuery Mobile
publish-date=02012013