Что нового в jQuery Mobile 1.3

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

Мы рассмотрим следующие темы:

• Улучшение “отзывчивого” дизайна
• Использование “сеток”
• Два вида таблиц для отображения данных
• Новый виджет панели
• Улучшения поля выбора диапазона и других элементов форм
• Новый метод navigate для более гибкого управления историей
• Новый простой способ создания поля с автозаполнением
• Новые настройки для диалоговых и всплывающих окон
• Новый иконки
• Различные усовершенствования самого фрэймворка и документации

Начнём мы с разбора понятия “отзывчивый” дизайн и рассмотрим, как jQuery Mobile 1.3 может помочь нам в создании подобных веб-страниц.

Улучшение “отзывчивого” дизайна

Начиная с версии 1.3, jQuery Mobile больше направлен на создание “отзывчивого” дизайна. Благодаря этой технике, вы сможете создать веб-страницы, которые смогут адаптироваться к разным устройствам и браузерам. К примеру, при просмотре вашего сайта с простого PC монитора, вы можете отображать колонку с контентом с левой стороны, а боковую панель - с правой. Открыв ту же страницу на мобильном устройстве, боковая колонка должна переместиться под колонку с основным контентом, для того чтобы та расширилась и заполнила всю ширину экрана мобильного устройства.

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

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

Новые статьи в документации

Участники команды jQuery Mobile добавили новую статью, которая называется Going Responsive. В ней рассматриваются 3 ключевых элемента построения “отзывчивого” дизайна:

• Медиа запросы
• “Отзывчивый” макет, сетка
• Гибкие изображения и другие элементы

В этой статье довольно-таки хорошим образом описаны “первые” шаги по построению “отзывчивого” дизайна.

Контрольные точки

Контрольные точки - это ключевое понятие в “отзывчивом” дизайне. По сути, это определённая ширина браузера (обычно заданная в px или em), достигнув которой дизайн меняется. Для обычных экранов используются одни контрольные точки, которые отображают дизайн в одном виде, для широких - другие. Таким образом, один и тот же дизайн, как правило, содержит от 1 до 3 контрольных точек.

Для создания контрольной точки необходимо воспользоваться CSS медиа запросом, задав значения min-width и max-width. Для jQuery Mobile размеры лучше писать в em, чем в px; В следующих секциях вы увидите примеры создания контрольных точек.

Использование сеток

В jQuery Mobile заложена простая система создания сеточного макета. Для её применения просто создайте какой-то контейнер и задайте ему класс ui-grid-*. Всем внутренним элементам выставите класс ui-block-*.

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

<div class="ui-grid-b myGrid">
  <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>

… а вот и медиа запрос, который установит контрольную точку со значением 50 em, для того чтобы сделать этот макет “отзывчивым”:

@media all and (max-width: 50em) {
  .myGrid .ui-block-a,
  .myGrid .ui-block-b,
  .myGrid .ui-block-c,
  .myGrid .ui-block-d,
  .myGrid .ui-block-e {
    width: 100%;
    float: none;
  }
}

Опробуйте данный пример. Измените размер вашего браузера, и вы увидите, как меняется расположение элементов после того, как ширина сократится до 50 em:

“Отзывчивая” сетка в действии. Если экран узкий, то элементы помещаются друг под другом, если же широкий, то выстраиваются в линию.

“Отзывчивые” таблицы

“Отзывчивые” таблицы - это новая фишка в jQuery Mobile 1.3. Данная техника удобным для чтения образом отображает большое количество табличных данных на разных устройствах и мониторах.

“Отзывчивые” таблицы делятся на 2 типа: reflow (перетекание) и column toggle (переключение колонок).

Режим “reflow” (перетекание)

Используется по умолчанию. В каждой табличной строке, reflow располагает ячейки вертикально по отношению друг к другу, добавляя небольшое пространство между строками. Таким образом, таблица становится читабельной на мобильных устройствах. Далее вы уже можете манипулировать таблицей с помощью медиа запросов, для того чтобы она отображалась так, как вам нужно для разных размеров браузеров.

Следующий пример демонстрирует, как выстраиваются ячейки в каждой строке при применении jQuery Mobile:

<table data-role="table" id="bookList" class="table-stroke table-stripe">
 
  <thead>
    <tr>
      <th>Title</th>
      <th>Author</th>
      <th><abbr title="Year of Publication">Year</abbr></th>
    </tr>
  </thead>
 
  <tbody>
    <tr>
      <th>The Grapes of Wrath</th>
      <td>John Steinbeck</td>
      <td>1939</td>
    </tr>
    <tr>
      <th>The Trial</th>
      <td>Franz Kafka</td>
      <td>1925</td>
    </tr>
    <tr>
      <th>The Hobbit</th>
      <td>J. R. R. Tolkien</td>
      <td>1937</td>
    </tr>
    <tr>
      <th>A Tale of Two Cities</th>
      <td>Charles Dickens</td>
      <td>1859</td>
    </tr>
  </tbody>
 
</table>

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

@media all and ( min-width: 30em ) {
 
  /* Show the table header rows and set all cells to display: table-cell */
  #bookList td,
  #bookList th,
  #bookList tbody th,
  #bookList tbody td,
  #bookList thead td,
  #bookList thead th {
    display: table-cell;
    margin: 0;
  }
 
  /* Hide the labels in each cell */
  #bookList td .ui-table-cell-label,
  #bookList th .ui-table-cell-label {
    display: none;
  }
}

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

Демонстрация работы reflow. На узком экране все ячейки отображаются вертикально, на широком - горизонтально.

Режим “column toggle” (переключение колонок)

Работа данного режима кардинально отличается от предыдущего. На этот раз при создании таблицы нам необходимо указать специальный атрибут data-mode="columntoggle". Затем каждому элементу th мы можем задать приоритет в атрибуте data-priority (1 высший, 6 низший). После этого jQuery Mobile отобразит колонки таблице в зависимости от заданного нами приоритета и в зависимости от ширины экрана. На широких мониторах будут отображаться все колонки, а на узких - только самые важные.

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

Если атрибут data-priority не задан, то колонка будет отображаться при любом раскладе.

После того как мы создали “column toggle” таблицу, нам необходимо создать CSS медиа запрос, который будет отображать или не отображать колонки в зависимости от размера экрана пользователя.

А вот и код:

<table data-role="table" id="bookList" data-mode="columntoggle" class="table-stroke table-stripe" >
 
  <thead>
    <tr>
      <th>Title</th>
      <th data-priority="1">Author</th>
      <th data-priority="3"><abbr title="Year of Publication">Year</abbr></th>
      <th data-priority="2">Price</th>
    </tr>
  </thead>
 
  <tbody>
 
    <tr>
      <th>The Grapes of Wrath</th>
      <td>John Steinbeck</td>
      <td>1939</td>
      <td>$14.99</td>
    </tr>
    <tr>
      <th>The Trial</th>
      <td>Franz Kafka</td>
      <td>1925</td>
      <td>$7.99</td>
    </tr>
    <tr>
      <th>The Hobbit</th>
      <td>J. R. R. Tolkien</td>
      <td>1937</td>
      <td>$6.99</td>
    </tr>
    <tr>
      <th>A Tale of Two Cities</th>
      <td>Charles Dickens</td>
      <td>1859</td>
      <td>$9.99</td>
    </tr>
 
  </tbody>
 
</table>

Итак, только что мы создали таблицу с id #bookList и задали атрибут data-mode=”columntoggle”. Далее трём колонкам задали приоритет в атрибуте data-priority. Колонка title будет отображаться всегда. Если же экран пользователя будет расширяться, то тогда постепенно появятся колонки author, price и year.

Давайте создадим соответствующий медиа запрос и укажем, при каком размере экрана каким колонкам отображаться:

/* Show priority 1 at 25em */
@media screen and (min-width: 25em) {
   #bookList th.ui-table-priority-1,
   #bookList td.ui-table-priority-1 {
     display: table-cell;
   }
}
 
/* Show priority 2 at 35em */
@media screen and (min-width: 35em) {
   #bookList  th.ui-table-priority-2,
   #bookList td.ui-table-priority-2 {
     display: table-cell;
   }
}
 
/* Show priority 3 at 45em */
@media screen and (min-width: 45em) {
   #bookList  th.ui-table-priority-3,
   #bookList td.ui-table-priority-3 {
     display: table-cell;
   }
}
 
/* Manually hidden */
#bookList th.ui-table-cell-hidden,
#bookList td.ui-table-cell-hidden {
  display: none;
}
 
/* Manually shown */
#bookList th.ui-table-cell-visible,
#bookList td.ui-table-cell-visible {
   display: table-cell;
}

Вкратце наши медиа запросы настроены так: если ширина экрана 25 em и выше, то отобразится колонка с приоритетом 1; если 35 em и выше, то появятся колонки с приоритетом 2; ну и если 45 и выше, то отобразится колонка с приоритетом 3. Также в приведённом коде есть ещё несколько медиа запросов, которые направлены на отображение кнопки “Columns...” для выбора отображаемых колонок.

Давайте посмотрим, как этот функционал будет работать в действии. Снова сужаем и расширяем размер окна браузера, чтобы увидеть эффект. Также не забудьте опробовать кнопку “Columns...”.

Демонстрация режима таблицы “toggle column”. При малых размерах экранов отображаются колонки с наибольшим приоритетом (1 и выше); на более широких экранах с наименьшим приоритетом (6 и ниже).

Новый виджет панели

В jQuery Mobile 1.3 появился совершенно новый элемент панели. Он очень прост в использовании, и его легко настроить так, чтоб он появлялся с левой или правой стороны экрана. Пользователь может скрыть эту панель, если нажмёт за пределы панели или клавишу Esc.

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

Настройка панели:

1. Для создания панели нам потребуется div с атрибутом data-role=”panel”. Данная панель должна располагаться в контейнере с атрибутом data-role="page" до или после div-ов с заголовком, контентом и футером.
2. Для создания кнопки, открывающей панель, просто сошлитесь на id панели и задайте соответствующую роль. Пример: ....

Для контроля способа появления панели добавьте атрибут data-display:

data-display="reveal" помещает панель под страницу. Для её появления используется эффект слайда. Используется по умолчанию.

data-display="overlay" панель выплывает с верхней части страницы.

data-display="push" опять применяется эффект слайда, но на странице и панели одновременно.

Также мы можем контролировать, с какой стороны будет появляться панель, добавив атрибуты data-position="left" или data-position="right". По умолчанию панель возникает с левой стороны.

Следующий код содержит фрагмент создания панели и кнопки для её появления:

<div data-role="page">
 
  <div data-role="panel" data-display="overlay" data-theme="d" id="choosePet">
    <ul data-role="listview" data-theme="d">
      <li data-role="list-divider">Select Your Pet:</li>
      <li><a href="#" data-rel="close">Cat</a></li>
      <li><a href="#" data-rel="close">Dog</a></li>
      <li><a href="#" data-rel="close">Rabbit</a></li>
      <li><a href="#" data-rel="close">Guinea Pig</a></li>
      <li><a href="#" data-rel="close">Parrot</a></li>
      <li data-theme="d" data-rel="close">Cancel</li>
    </ul>
  </div>
 
  <div data-role="header" data-position="fixed">
    <h1>jQuery Mobile 1.3: Panels</h1>
  </div>
 
  <div data-role="content">
    <h1>jQuery Mobile 1.3: Panels</h1>
    <a href="#choosePet" data-role="button">Pets</a>
  </div>
 
</div>

Для создания кнопки закрытия панели также можно создать свой элемент, задав ему атрибут data-rel="close".

Теперь давайте посмотрим пример работы панели. Нажмите на кнопку “Pets” для появления панели и попробуйте различные способы её сокрытия.

Пример работы панели. Может использоваться для отображения дополнительной информации, навигации или хранения различного рода опций страницы.

Улучшения поля выбора диапазона и других элементов форм

С момента выхода новой версии был улучшен элемент выбора диапазона значений. Для добавления элемента диапазона с минимальным и максимальным значением вам необходимо создать два элемента <input type="range">. Затем их нужно поместить в div с атрибутом data-role="rangeslider".

Также не забудьте для каждого input элемента добавить label. Отображаемый текст может быть одним и тем же (jQuery Mobile воспользуется первым).

Вот и пример работы слайдера с минимальным и максимальным значениями (двусторонний):

<form>
  <div data-role="rangeslider">
    <label for="priceMin">Price Range ($):</label>
    <input type="range" name="priceMin" id="priceMin" min="0" max="1000" value="0">
    <label for="priceMax">Price Range ($):</label>
    <input type="range" name="priceMax" id="priceMax" min="0" max="1000" value="1000">
  </div>
</form>

Не забудьте глянуть демо работы слайдера:

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

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

Новое событие и метод navigate

jQuery Mobile использует Ajax запросы для обеспечения навигации по сайту, т.е. страницы полностью не перезагружаются. Для отслеживания текущей страницы в адресной строке фрэймворк использует метод history.replaceState(), а также событие popstate в новых браузерах, или добавляя хэш url и использование события hashchange на более старых версиях браузеров.

Если вам самим требуется работать с историей навигации, то с таким подходом будет сложно разобраться. К счастью, в jQuery Mobile 1.3 есть новое событие и метод event, которые могут помочь нам в этих задачах:

С помощью метода navigate() мы можем перенаправиться по нужному нам адресу и, в зависимости от желания, записать данные, связанные с URL. В новых браузерах jQuery Mobile воспользуется методом replaceState(), а в более старых - хэшами:

$.mobile.navigate( "#wonderWidget", dataObject );

Для отслеживания изменения URL адреса мы можем воспользоваться событием navigate:

$( window ).on( "navigate", function( event, dataObject ) {
  // Do something with dataObject
} );

Возвращаемый объект также содержит объект state, в котором хранятся такие полезные опции, как url (текущий), hash (текущего url) и direction, направление (forward или back).

Больше о методе и событии navigate вы сможете найти в официальной документации.

Простой способ создания автозаполнения

В jQuery Mobile 1.2 было введено новое событие listviewbeforefilter, благодаря которому мы могли создать “авто заполнение” для текстового элемента формы. Источник данных мог быть как локальным, так и удалённым (данные приходили через ajax запрос). Пример вы можете найти в документации.

В jQuery Mobile 1.3 разработчики пошли ещё дальше и создали специальный атрибут data-filter-reveal, который предназначен для упрощения создания авто заполнения из локальных данных:

1. Как обычно, создаём список из нужных значений.
2. Добавляем к элементу атрибуты data-filter="true" и data-filter-reveal="true".

data-filter-reveal="true" сообщит фрэймворку, что тот должен скрыть все возможные варианты ответов. Когда же вы начнёте набирать текст, то форма отобразит вам все возможные варианты.

Пример:

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Find a pet..." data-inset="true">
  <li><a href="#" data-rel="close">Cat</a></li>
  <li><a href="#" data-rel="close">Dog</a></li>
  <li><a href="#" data-rel="close">Rabbit</a></li>
  <li><a href="#" data-rel="close">Guinea Pig</a></li>
  <li><a href="#" data-rel="close">Parrot</a></li>
</ul>

А вот и демо данного примера. Обратите внимание, что поначалу не отображён ни один из вариантов. jQuery Mobile отобразит их только тогда, когда вы начнёте вводить свой текст.

Используя атрибут data-filter-reveal, вы можете просто и быстро создать авто заполнение для ваших текстовых полей.

Ещё больше примеров вы можете найти в документации.

Диалоговые и всплывающие окна

К диалоговым окнам теперь можно прикрепить атрибут data-close-btn для добавления в заголовке кнопки закрытия диалога. data-close-btn="right" - для размещения кнопки с правой стороны, data-close-btn="none" - чтоб скрыть кнопку. Для удаления закруглённых углов можете воспользоваться атрибутом data-corners="false".

Для всплывающих окон был добавлен атрибут data-dismissible. Если задать ему значение false, то окно исчезнет, когда пользователь кликнет за его пределы (данный атрибут также можно использовать при работе с панелями).

Новые атрибуты data-close-btn и data-corners позволяют более гибким образом настроить отображение диалоговых и всплывающих окон.

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

Улучшение элементов форм

Также jQuery Mobile 1.3 несёт собой некоторые изменения для элементов форм:

Теперь у любого текстового поля есть кнопка “стирания” текста.
Теперь у каждого текстового элемента доступна кнопка стирания текста (“X”). Для её активации воспользуйтесь атрибутом data-clear-btn="true" в input элементе. Также вы можете назначить скрытый текст с помощью data-clear-btn-text. В конце концов, если данная кнопка вам не нужна, вы можете её убрать следующим образом: data-clear-btn="false".

Новая стилизация элемента загрузки файла.
На данный момент многие мобильные браузеры поддерживают элемент формы для загрузки файла <input type="file">. С новой версии jQuery Mobile использует одну и ту же стилизацию для всех элементов форм.

Другие небольшие изменения.
Теперь input поля лучше смотрятся в IE9 и Windows Phone; Элементы textarea расширяются автоматически при вставке большого количества текста; также input поля теперь отлично взаимодействуют с многобайтовыми кодировками (пр. utf8).

Пример добавления кнопки (‘X’) для удаления всего текста из поля.

Улучшение иконок

jQuery Mobile 1.3 предоставляет нам 2 новые иконки в добавок к уже существующим:

• data-icon="bars" представляет собой три горизонтальные линии. Удобен для обозначения меню.
• data-icon="edit" отображает карандаш. Удобен для обозначения кнопки редактирования.

Также мы можем настроить отображение уже существующих иконок. Для окраски иконки по умолчанию в чёрный цвет воспользуйтесь CSS классом ui-icon-alt. Для удаления диска вокруг иконки воспользуйтесь классом ui-icon-nodisc.

Демонстрация новых иконок и возможность управления их отображением.

Другие улучшения

Помимо всего, что было рассмотрено в данной статье, обновление jQuery Mobile 1.3 содержит и менее значимые улучшения. Вот некоторые из них:

data-corners атрибут для “складываемых” блоков
Теперь вы можете добавить атрибут data-corners="false" к элементам с атрибутами data-role="collapsible" или data-role="collapsible-set", для того чтобы убрать округлённые уголки с различного рода “складываемых” виджетов.

Улучшение панели инструментов
Насколько вы знаете, блоки заголовка и подвала (header и footer) остаются неподвижными во время прокрутки страницы. До сих пор это вызывает некоторые ошибки отображения элементов (особенно в с старых версиях браузеров). В jQuery 1.3 данный глюк был исправлен за счёт использования расширения fixedToolbar.workarounds.js. В результате, размер библиотеки немного увеличился. Если вас не беспокоит правильность отображения элементов в старых браузерах, то данный компонент можно удалить.

Расширяемость события swipe
Теперь у нас есть возможность пользоваться тремя методами, связанными с событием swipe: start, stop, handleSwipe. Это даёт нам возможность более гибким образом обрабатывать событие swipe. Для более подробной информации смотрите Swipe API.

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

Итог

Обновление jQuery Mobile 1.3 - это как раз то, чего так давно не хватало для настоящего мобильного фрэймворка:

• Ещё больше внимания уделено процессу создания “отзывчивого” веб дизайна.
• Была улучшена сетка для построения адаптивных макетов.
• Были введены 2 новых режима создания “отзывчивых” таблиц.
• Добавлен новый виджет панели, которую можно отобразить как с правой стороны, так и с левой.
• Улучшен слайдер выбора диапазона значений.
• Был введён новый метод и событие navigate() для создания кросс браузерной Ajax навигации.
• Был введён новый атрибут data-filter-reveal для создания авто заполнения.
• Предоставлена возможность добавления кнопки закрытия модальных окон.
• Добавлен атрибут data-dismissible для возможности закрыть всплывающее окно, кликнув за его пределами.
• Улучшены элементы форм путём добавления кнопки очистки текста, а также стандартизации отображения элементов.
• Были добавлены две новые иконки и возможность управления их отображением.
• Добавлена возможность включать или отключать закругленные углы у “складываемых” виджетов.
• Теперь мы более гибким образом можем обрабатывать событие swipe.
• И наконец последнее, был открыт центр демо примеров и новый сайт документации по API.

jQuery Mobile 1.3 - это серьёзное и очень важное обновление. Оно также открывает дорогу к релизу jQuery Mobile 1.4, где будет намного легче применять JavaScript и CSS код; появится возможность использовать SVG иконки; появится новый виджет tab, будет ещё больше улучшена работа фрэймворка и многое другое!

• Комментарии