Информация к новости
  • Просмотров: 860
  • Автор: sulicompany
  • Дата: 11-03-2013, 21:43
 (голосов: 0)
11-03-2013, 21:43

jQuery Mobile 1.3

Категория: Программирование » jQuery


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 добавили новую статью, которая называется. В ней рассматриваются 3 ключевых элемента построения “отзывчивого” дизайна:

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

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

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

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

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

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

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

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

1 <divclass="ui-grid-b myGrid">
2   <divclass="ui-block-a">Block A</div>
3   <divclass="ui-block-b">Block B</div>
4   <divclass="ui-block-c">Block C</div>
5 </div>

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

01 @media alland (max-width50em) {
02   .myGrid .ui-block-a,
03   .myGrid .ui-block-b,
04   .myGrid .ui-block-c,
05   .myGrid .ui-block-d,
06   .myGrid .ui-block-e {
07     width100%;
08     floatnone;
09   }
10 }

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

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

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

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

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

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

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

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

01 <tabledata-role="table"id="bookList"class="table-stroke table-stripe">
02  
03   <thead>
04     <tr>
05       <th>Title</th>
06       <th>Author</th>
07       <th><abbrtitle="Year of Publication">Year</abbr></th>
08     </tr>
09   </thead>
10  
11   <tbody>
12     <tr>
13       <th>The Grapes of Wrath</th>
14       <td>John Steinbeck</td>
15       <td>1939</td>
16     </tr>
17     <tr>
18       <th>The Trial</th>
19       <td>Franz Kafka</td>
20       <td>1925</td>
21     </tr>
22     <tr>
23       <th>The Hobbit</th>
24       <td>J. R. R. Tolkien</td>
25       <td>1937</td>
26     </tr>
27     <tr>
28       <th>A Tale of Two Cities</th>
29       <td>Charles Dickens</td>
30       <td>1859</td>
31     </tr>
32   </tbody>
33  
34 </table>

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

01 @media alland ( min-width30em) {
02  
03   /* Show the table header rows and set all cells to display: table-cell */
04   #bookList td,
05   #bookList th,
06   #bookList tbody th,
07   #bookList tbody td,
08   #bookList thead td,
09   #bookList thead th {
10     displaytable-cell;
11     margin0;
12   }
13  
14   /* Hide the labels in each cell */
15   #bookList td .ui-table-cell-label,
16   #bookList th .ui-table-cell-label {
17     displaynone;
18   }
19 }

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


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

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

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

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

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

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

А вот и код:

01 <tabledata-role="table"id="bookList"data-mode="columntoggle"class="table-stroke table-stripe">
02  
03   <thead>
04     <tr>
05       <th>Title</th>
06       <thdata-priority="1">Author</th>
07       <thdata-priority="3"><abbrtitle="Year of Publication">Year</abbr></th>
08       <thdata-priority="2">Price</th>
09     </tr>
10   </thead>
11  
12   <tbody>
13  
14     <tr>
15       <th>The Grapes of Wrath</th>
16       <td>John Steinbeck</td>
17       <td>1939</td>
18       <td>$14.99</td>
19     </tr>
20     <tr>
21       <th>The Trial</th>
22       <td>Franz Kafka</td>
23       <td>1925</td>
24       <td>$7.99</td>
25     </tr>
26     <tr>
27       <th>The Hobbit</th>
28       <td>J. R. R. Tolkien</td>
29       <td>1937</td>
30       <td>$6.99</td>
31     </tr>
32     <tr>
33       <th>A Tale of Two Cities</th>
34       <td>Charles Dickens</td>
35       <td>1859</td>
36       <td>$9.99</td>
37     </tr>
38  
39   </tbody>
40  
41 </table>

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

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

01 /* Show priority 1 at 25em */
02 @media screenand (min-width25em) {
03    #bookList th.ui-table-priority-1,
04    #bookList td.ui-table-priority-1{
05      displaytable-cell;
06    }
07 }
08  
09 /* Show priority 2 at 35em */
10 @media screenand (min-width35em) {
11    #bookList  th.ui-table-priority-2,
12    #bookList td.ui-table-priority-2{
13      displaytable-cell;
14    }
15 }
16  
17 /* Show priority 3 at 45em */
18 @media screenand (min-width45em) {
19    #bookList  th.ui-table-priority-3,
20    #bookList td.ui-table-priority-3{
21      displaytable-cell;
22    }
23 }
24  
25 /* Manually hidden */
26 #bookList th.ui-table-cell-hidden,
27 #bookList td.ui-table-cell-hidden{
28   displaynone;
29 }
30  
31 /* Manually shown */
32 #bookList th.ui-table-cell-visible,
33 #bookList td.ui-table-cell-visible{
34    displaytable-cell;
35 }

Вкратце наши медиа запросы настроены так: если ширина экрана 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". По умолчанию панель возникает с левой стороны.

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

01 <divdata-role="page">
02  
03   <divdata-role="panel"data-display="overlay"data-theme="d"id="choosePet">
04     <uldata-role="listview"data-theme="d">
05       <lidata-role="list-divider">Select Your Pet:</li>
06       <li><ahref="#"data-rel="close">Cat</a></li>
07       <li><ahref="#"data-rel="close">Dog</a></li>
08       <li><ahref="#"data-rel="close">Rabbit</a></li>
09       <li><ahref="#"data-rel="close">Guinea Pig</a></li>
10       <li><ahref="#"data-rel="close">Parrot</a></li>
11       <lidata-theme="d"data-rel="close">Cancel</li>
12     </ul>
13   </div>
14  
15   <divdata-role="header"data-position="fixed">
16     <h1>jQuery Mobile 1.3: Panels</h1>
17   </div>