Статьи

jQuery Mobile Framework — Учебное пособие по формам

Ноябрь 21, 2018

jQuery Mobile — это относительно новая мобильная веб-платформа, первый выпуск которой был сделан в октябре 2010 года. У этой платформы есть много интересных функций для поддержки разработки мобильных веб-приложений. В этом руководстве мы сосредоточимся на некоторых основных элементах jQuery Mobile: структура страницы, формы и отправка Ajax-форм. Учебное пособие основано на альфа-версии 2 версии 1.0 платформы jQuery Mobile.

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

Учебная контекстная диаграмма приложения

Рисунок 1. Учебная контекстная диаграмма приложения.

Платформа jQuery Mobile поддерживает различные браузеры, включая устройства iOS, устройства Android, Blackberry OS 6 и webOS (матрицу поддержки см. на странице http://jquerymobile.com/gbs/ ). Приложение в этом руководстве было протестировано на устройстве Android 2.2 и iOS 4.1.

Особенности дизайна

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

  • Короткое время отклика. Предпочтительно, чтобы веб-приложение содержало одну HTML-страницу с простым пользовательским интерфейсом. Все конструкции пользовательского интерфейса, такие как диалог ошибок и страницы подтверждения, будут частью html-страницы. После загрузки страницы в браузер пользователю будут показаны различные разделы страницы в зависимости от конкретного контекста. Там не будет необходимости открывать несколько сетевых подключений для загрузки страниц несколько раз.
  • Обработка ошибок: если пользователь забывает ввести обязательное поле в форме, отправка должна завершиться с диалоговым окном предупреждения. Недостающие поля должны быть легко найдены пользователем.
  • Поддержка нескольких устройств / браузеров. Приложения должны иметь согласованный внешний вид и поведение на поддерживаемых устройствах и браузерах.

Конечно, типичное реальное приложение будет иметь дополнительные или другие проблемы дизайна. Для целей данного руководства наша область действия будет ограничена приведенными выше соображениями.

jQuery Mobile Введение

Большая часть обсуждения в этом разделе была заимствована из документации на http://jquerymobile.com . Смотрите оригинальную ссылку для получения дополнительной информации.

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

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

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

Включение мобильных библиотек jQuery

Начиная с выпуска jQuery Mobile 1.0 alpha 2 следующие HTML-таблицы и таблицы стилей должны быть включены в ваши HTML-страницы. Вы можете ссылаться на них, как показано ниже, или обслуживать их со своего собственного сервера:

1
2
3
<link rel=»stylesheet» href=»http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css» />
<script src=»http://code.jquery.com/jquery-1.4.4.min.js»></script>
<script src=»http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js»></script>

Контейнер и Страницы Контента

Давайте познакомимся с базовой структурой страницы в jQuery Mobile. Страница в jQuery Mobile Framework может быть отдельной страницей или локальной внутренней связанной страницей внутри страницы. Страница «Контейнер» будет включать одну или несколько страниц «Контент». Граница страницы контейнера определяется следующим образом:

1
2
3
<div data-role=»page»>
…
</div>

Обратите внимание, что значение атрибута data-role равно page . С другой стороны, граница страницы содержимого определяется следующим образом:

1
2
3
<div data-role=»content»>
…
</div>

Обратите внимание, что значением атрибута data-role является content .

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

01
02
03
04
05
06
07
08
09
10
11
12
13
<div data-role=»page»>
  
  <div data-role=»header»>…</div>
  <div id=»contentWithHeaderAndFooter1″ data-role=»content»>…</div>
  <div data-role=»footer»>…</div>
     
  <div data-role=»header»>…</div>
  <div id=»contentWithHeaderAndFooter2″ data-role=»content»>…</div>
  <div data-role=»footer»>…</div>
     
  <div id=»contentWithNoHeaderAndFooter» data-role=»content»>…</div>
   
</div>

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

Скрытие / отображение страниц содержимого

Чтобы скрыть элемент, используйте функцию hide() jQuery Mobile API:

1
$(‘#hdrMain’).hide();

скроет заголовок с id hdrMain . Здесь мы использовали селектор идентификатора jQuery, передавая id элемента, который мы хотели бы выбрать, перед знаком # . И наоборот, функция show() показывает скрытый элемент:

1
$(‘#hdrMain’).show();

Функции hide() и show() применяются к элементам разных типов, в частности к тегам и тегам <div> (<a> тегам (<a> ). В этом уроке мы будем широко использовать функции hide() и show() чтобы отображать только соответствующий контекст для пользователя приложения. Более подробная информация приведена ниже.

Шаг 1: Структура страницы демонстрационного приложения

Наше демонстрационное приложение состоит из одной HTML-страницы index.html , которая состоит из страницы контейнера, как показано ниже:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div data-role=»page» data-theme=»b» id=»page1″>
 
  <!— ====== main content starts here ===== —>
  <div data-role=»header» id=»hdrMain» name=»hdrMain» data-nobackbtn=»true»>…</div>
  <div data-role=»content» id=»contentMain» name=»contentMain»>
    …
  </div>
  <div data-role=»footer» id=»ftrMain» name=»ftrMain»></div>
  <!— ====== main content ends here ===== —>
   
  <!— ====== dialog content starts here ===== —>
  <div align=»CENTER» data-role=»content» id=»contentDialog» name=»contentDialog»>
    …
  </div>
  <!— ====== dialog content ends here ===== —>
   
  <!— ====== transition content page starts here ===== —>
  <div data-role=»content» id=»contentTransition» name=»contentTransition»>
    …
  </div>
  <!— ====== transition content ends here ===== —>
   
  <!— ====== confirmation content starts here ===== —>
  <div data-role=»header» id=»hdrConfirmation» name=»hdrConfirmation» data-nobackbtn=»true»>…</div>
  <div data-role=»content» id=»contentConfirmation» name=»contentConfirmation» align=»center»>
    …
  </div>
  <div data-role=»footer» id=»ftrConfirmation» name=»ftrConfirmation»></div>
  <!— ====== confirmation content ends here ===== —>
    …
</div><!— page1 —>
  • Основное содержание содержит форму, которую должен заполнить пользователь, и имеет как верхний, так и нижний колонтитулы.
  • Содержимое диалога отображается только в том случае, если при отправке формы отсутствует обязательное поле формы. Он состоит из предупреждения и кнопки ОК, чтобы закрыть диалог. Обратите внимание, что у него нет верхнего или нижнего колонтитула.
  • Содержание перехода отображается после отправки формы до получения ответа от сервера. Он состоит из изображения «блесны» с коротким текстом, информирующим пользователя о том, что его форма отправляется. Содержание перехода также не имеет верхнего или нижнего колонтитула.
  • Содержимое подтверждения отображается после получения ответа от сервера. Он отображает номер подтверждения для пользователя. Содержание подтверждения имеет как верхний, так и нижний колонтитулы.

Контент переходы показаны на диаграмме ниже:

Контент переходы

Рисунок 2. Содержание переходов.

Дополнительные замечания по перечислению кода выше:

  • Атрибут data-theme позволяет нам выбирать из доступных стилей в платформе jQuery Mobile: <div data-role="page" data-theme="b" id="page1"> . Тема по умолчанию имеет различные образцы цветов с именами a, b, c, d, e, каждый из которых обеспечивает согласованный набор цветов для различных элементов на странице. Для нашего приложения мы выбрали цвет, соответствующий b .
  • Заголовки поставляются с кнопкой возврата. Нам не нужны кнопки «назад», поэтому мы решили скрыть их с помощью data-nobackbtn="true" .
  • Можно указать текст, который будет отображаться в нижнем колонтитуле между тегами <div> . В нашем приложении мы опустили текст в нижнем колонтитуле. В результате пользователь увидит в нижнем колонтитуле только тонкую полоску, окрашенную так же, как заголовок. При использовании текста нижний колонтитул будет иметь такую ​​же высоту, как и нижний колонтитул с текстом в нем.

Элементы формы

Форма претензий состоит из следующих полей:

  • Несколько полей input типа текста: номер доставки, имя, фамилия, адрес электронной почты, телефон, почтовый адрес, город и почтовый индекс. Все обязательные поля, кроме телефона.
  • Элемент select для государства. Это обязательное поле.
  • Элемент textarea позволяющий пользователю вводить информацию о пропавшем или поврежденном грузе. Это обязательное поле.

В качестве примера рассмотрим текстовое поле для номера доставки:

1
2
3
4
<div id=»shipDiv» data-role=»fieldcontain»>
  <label for=»shipNo»>Shipping number*</label>
  <input id=»shipNo» name=»shipNo_r» type=»text» />
</div>

Мы использовали label с атрибутом for , значение которой совпадает с id элемента input к label прикреплена label . Кроме того, мы обернули label и input в div с атрибутом data-role оцененным как fieldcontain . fieldcontain jQuery Mobile будет использовать fieldcontain атрибута fieldcontain для специальной стилизации. Кроме того, посмотрите на name="shipNo_r" . Для этого конкретного приложения мы решили определить значение атрибута name любого обязательного элемента формы как значение атрибута id добавляемого _r. Если элемент не требуется, значение атрибута name будет таким же, как значение атрибута id . Например, поскольку Phone не является обязательным полем, оно определяется следующим образом:

1
2
3
4
<div id=»phoneDiv» data-role=»fieldcontain»>
  <label for=»phone»>Phone</label>
  <input id=»phone» name=»phone» type=»text»/>
</div>

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

Другим заметным элементом формы является элемент select . Как и выше, значение атрибута for совпадает с идентификатором элемента select к label прикреплена label . Кроме того, label и select заключаются в div со значением атрибута data-role в качестве fieldcontain . С длинным списком опций, которые мы имеем в этом приложении, jQuery Mobile Framework откроет список на новой странице, когда пользователь сфокусируется на элементе select .

01
02
03
04
05
06
07
08
09
10
<div id=»stateDiv» data-role=»fieldcontain»>
  <label id=»stateLabel» for=»state»>State*</label>
  <select id=»state» name=»state_r» tabindex=»2″>
    <option value=»ZZ»>Please select a state</option>
    <option value=»AL»>Alabama</option>
    <option value=»AK»>Alaska</option>
    <option value=»AZ»>Arizona</option>
    …
  </select>
</div>

Страница формы, отображаемая в телефоне Android 2.2, показана ниже. Пользователь будет прокручивать страницу для доступа к элементам в форме:

Форма страницы

Рисунок 3. Форма страницы в телефоне Android.

Та же самая форма показана в iPod touch под iOS 4.1:

Форма страницы

Рисунок 4. Страница формы на iPod touch.

Шаг 2: Определения переменных

Мы будем ссылаться на различные элементы на html-странице в нашем коде. Имеет смысл определить эти ссылки только один раз и использовать их по мере необходимости. По этой причине мы объявляем глобально используемые переменные, а также константы в разделе заголовка страницы:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
  // Global declarations — assignments made in $(document).ready() below
  var hdrMainvar = null;
  var contentMainVar = null;
  var ftrMainVar = null;
  var contentTransitionVar = null;
  var stateLabelVar = null;
  var whatLabelVar = null;
  var stateVar = null;
  var whatVar = null;
  var form1var = null;
  var confirmationVar = null;
  var contentDialogVar = null;
  var hdrConfirmationVar = null;
  var contentConfirmationVar = null;
  var ftrConfirmationVar = null;
  var inputMapVar = null;
   
  // Constants
  var MISSING = «missing»;
  var EMPTY = «»;
  var NO_STATE = «ZZ»;
</script>

Назначение этих переменных выполняется в функции jQuery $(document).ready() с использованием селекторов идентификаторов, как показано ниже. (Напомним, что функция jQuery $(document).ready() вызывается при загрузке всей иерархии DOM на странице. Эта функция является наилучшим местом для инициализации наших переменных.) Мы также определяем inputMapVar как коллекцию, состоящую из всех input элементов. с _r в их атрибуте name (вызов функции $('input[name*="_r"]') выбирает все такие элементы).

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
  $(document).ready(function() {
    // Assign global variables
    hdrMainVar = $(‘#hdrMain’);
    contentMainVar = $(‘#contentMain’);
    ftrMainVar = $(‘#ftrMain’);
    contentTransitionVar = $(‘#contentTransition’);
    stateLabelVar = $(‘#stateLabel’);
    whatLabelVar = $(‘#whatLabel’);
    stateVar = $(‘#state’);
    whatVar = $(‘#what’);
    form1Var = $(‘#form1’);
    confirmationVar = $(‘#confirmation’);
    contentDialogVar = $(‘#contentDialog’);
    hdrConfirmationVar = $(‘#hdrConfirmation’);
    contentConfirmationVar = $(‘#contentConfirmation’);
    ftrConfirmationVar = $(‘#ftrConfirmation’);
    inputMapVar = $(‘input[name*=»_r»]’);
    …
  });
  …
</script>

Шаг 3: Функции выбора контента

Давайте теперь посмотрим на функции выбора контента, которые будут вызываться обработчиками событий.

Для сокрытия и отображения основного содержимого и его верхнего / hideMain() колонтитула мы используем функции hideMain() и showMain() :

01
02
03
04
05
06
07
08
09
10
11
function hideMain(){
  hdrMainVar.hide();
  contentMainVar.hide();
  ftrMainVar.hide();
}
 
function showMain(){
  hdrMainVar.show();
  contentMainVar.show();
  ftrMainVar.show();
}

Для сокрытия и отображения содержимого перехода мы используем функции hideContentTransition() и showContentTransition() :

1
2
3
4
5
6
7
function hideContentTransition(){
  contentTransitionVar.hide();
}
 
function showContentTransition(){
  contentTransitionVar.show();
}

Для сокрытия и отображения содержимого Dialog мы используем функции hideContentDialog() и showContentDialog() :

1
2
3
4
5
6
7
function hideContentDialog(){
  contentDialogVar.hide();
}
 
function showContentDialog(){
  contentDialogVar.show();
}

Наконец, для сокрытия и отображения содержимого подтверждения и его верхнего / hideConfirmation() колонтитула мы используем функции hideConfirmation() и showConfirmation() :

01
02
03
04
05
06
07
08
09
10
11
function hideConfirmation(){
  hdrConfirmationVar.hide();
  contentConfirmationVar.hide();
  ftrConfirmationVar.hide();
}
 
function showConfirmation(){
  hdrConfirmationVar.show();
  contentConfirmationVar.show();
  ftrConfirmationVar.show();
}

Когда страница загружена, должен отображаться только основной контент. По этой причине другие страницы контента скрыты:

01
02
03
04
05
06
07
08
09
10
<script>
  $(document).ready(function() {
    // Assign global variables
    …
    hideContentDialog();
    hideContentTransition();
    hideConfirmation();
  });
  …
</script>

Мы обсудим, как связать эти функции выбора контента с обработчиками событий ниже.

Шаг 4: Отправка формы

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

Проверка формы

Метки элементов формы с отсутствующими данными будут выделены красным цветом. Для этого мы добавляем новый класс стилей с именем отсутствующего и расширяющий класс label jQuery Mobile.

1
2
3
4
label.missing {
  color:#FF0000;
  font-weight:bold;
}

Ниже представлен обработчик событий для отправки формы. В типичной нотации jQuery идентификатор для form1 передается в вызов объекта jQuery для обработки события submit:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$(‘#form1’).submit(function() {
  var err = false;
  // Hide the Main content
  hideMain();
   
  // Reset the previously highlighted form elements
  stateLabelVar.removeClass(MISSING);
  whatLabelVar.removeClass(MISSING);
  inputMapVar.each(function(index){
    $(this).prev().removeClass(MISSING);
  });
   
  // Perform form validation
  inputMapVar.each(function(index){
    if($(this).val()==null || $(this).val()==EMPTY){
      $(this).prev().addClass(MISSING);
      err = true;
    }
  });
  if(stateVar.val()==NO_STATE){
    stateLabelVar.addClass(MISSING);
    err = true;
  }
  if(whatVar.val()==null||whatVar.val()==EMPTY){
    whatLabelVar.addClass(MISSING);
    err = true;
  }
   
  // If validation fails, show Dialog content
  if(err == true){
    showContentDialog();
    return false;
  }
 
  // If validation passes, show Transition content
  showContentTransition();
 
  // Submit the form
  $.post(«/forms/requestProcessor.php», form1Var.serialize(), function(data){
    confirmationVar.text(data);
    hideContentTransition();
    showConfirmation();
  });
  return false;
});

Мы устанавливаем флаг ошибки в false и скрываем основной контент, который содержит форму. Затем мы сбрасываем ранее выделенные метки на каждом элементе коллекции inputMapVar . Для этого мы передаем встроенную функцию в качестве аргумента each() который просто содержит $(this).prev().removeClass(MISSING); , Обратите внимание, что this выбранный элемент input а prev() возвращает своего непосредственного предшествующего брата, который является label связанной с ним.

state для выбора состояния и описание заявки не являются текстовыми полями. Поэтому соответствующие метки имеют свои стили, сбрасываемые отдельно.

После того, как все ранее выделенные метки будут сброшены, мы вернемся к требуемым элементам input чтобы проверить, есть ли у них пропущенное значение. Если это так, мы добавляем отсутствующий класс к метке, связанной с полем ввода:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
// Perform form validation
inputMapVar.each(function(index){
  if($(this).val()==null || $(this).val()==EMPTY){
    $(this).prev().addClass(MISSING);
    err = true;
  }
});
if(stateVar.val()==NO_STATE){
  stateLabelVar.addClass(MISSING);
  err = true;
}
if(whatVar.val()==null||whatVar.val()==EMPTY){
  whatLabelVar.addClass(MISSING);
  err = true;
}

Кроме того, для флага ошибки установлено значение true, и отображается диалоговое окно ошибки. На рисунке ниже показан диалог ошибки в нашем телефоне Android 2.2:

Диалог ошибки

Рисунок 5. Диалог ошибок.

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

Форма страницы

Рисунок 6. Страница формы с выделенным пропущенным полем.

С другой стороны, если проверка прошла успешно, мы показываем содержимое перехода и отправляем форму, как описано ниже.

Отправка формы через Ajax

Для post формы используется функция jQuery Mobile, которая принимает три аргумента:

1
$.post(«/forms/requestProcessor.php», form1Var.serialize(), function(data){…});
  • Первый аргумент — это URL сервера, на который нужно отправить форму.
  • Второй — это форма для отправки. Чтобы получить содержимое формы, мы просто вызываем serialize() для объекта jQuery, передавая ему идентификатор для нашей формы.
  • Третий аргумент — это встроенная функция для обработки ответа, data , отправленных обратно с сервера.

Обратите внимание, что функция post выполняет Ajax-вызов, который по своей природе является асинхронным. Сразу после вызова post выполнение программы будет продолжено путем возврата значения false из функции submit и пользователь начнет видеть содержимое Transition.

переход

Рисунок 7. Страница перехода, отображаемая при обработке формы.

Встроенная функция для обработки ответа выполняется только тогда, когда сервер возвращает свой ответ. Для простоты серверное приложение, обрабатывающее данные формы, requestProcessor.php , возвращает жестко закодированный идентификатор заявки, который пользователь может использовать для дальнейшего использования. Перед отправкой заявки id requestProcessor.php он спит 4 секунды, чтобы имитировать время обработки сервером. Именно в этот период приложение будет отображать содержимое перехода.

1
2
3
4
5
<?php
usleep(4000000);
 
echo(‘FTREIK12345678’);
?>

Когда ответ сервера получен, выполняется код обработчика события. Первым шагом является заполнение тега span именованного confirmation значением, возвращаемым с сервера. Это просто сделано с помощью:

1
confirmationVar.text(data);

Затем мы скрываем содержимое Transition и показываем содержимое Confirmation, которое содержит тег span с именем confirmation :

1
2
3
4
<div data-role=»content» id=»contentConfirmation» name=»contentConfirmation» align=»center»>
    <p>A new claim has been created based on data you have submitted.</p>
    <p>Your confirmation number is: <span id=»confirmation» name=»confirmation»>
</div>

Страница подтверждения, отображаемая в нашем телефоне Android 2.2, показана ниже (ориентация телефона горизонтальная):

подтверждение

Рисунок 8. Страница подтверждения в Android 2.2.

Та же страница подтверждения отображается на iPod touch следующим образом (ориентация вертикальная):

подтверждение

Рисунок 9. Страница подтверждения в iPod touch.

Развертывание исходного кода

Исходный код для учебника имеет простую структуру папок. Все ресурсы хранятся в папке с именем forms . В этой папке есть две подпапки, css и img . Папка css содержит colors.css , который имеет класс label.missing , а img хранит wait.gif , изображение счетчика. Файлы index.html и requestProcessor.php находятся непосредственно в папке forms . В нашем тестировании мы использовали веб-сервер Apache версии 2.2.11 под управлением PHP версии 5.3.0. Если вы поместите папку forms прямо под DocumentRoot веб-сервера, вы можете получить доступ к приложению через http://[your_host_name]/folder/index.html.

Вывод

В этом уроке мы познакомились с основными понятиями из среды jQuery Mobile, в которых основное внимание уделяется структуре страницы, базовым стилям, элементам формы и отправке формы Ajax. Образец приложения обработки претензий был представлен для демонстрации этих концепций. Мы предоставили скриншоты различных страниц приложения, работающего на телефоне Android 2.2 и устройстве iPod touch с iOS 4.1. Некоторые замечания и заключительные замечания приведены ниже:

  • Поскольку jQuery Mobile построен на ядре jQuery, те, кто уже обладает знаниями в области инфраструктуры jQuery, могут легко освоиться с инфраструктурой jQuery Mobile.
  • Способность платформы представлять несколько страниц контента на одной html-странице со встроенными функциями для отображения / скрытия этих страниц контента оказалась очень удобной для создания приложения формы с различными представлениями в зависимости от состояния. Например, этот метод может применяться для реализации руководств пользователя в стиле «мастера» или многостраничных анкет.
  • Протестированные на настольных компьютерах, платформах Android 2.2 и iOS 4.1 как внешний вид, так и функциональные аспекты образца приложения были согласованы. Во время разработки должна быть возможность быстро протестировать и отладить основные аспекты приложения jQuery Mobile на настольной платформе. Затем можно провести дополнительное тестирование на отдельных устройствах и браузерах, которые должно поддерживать приложение.
39
Share: