Что ожидать от jQuery Mobile 1.3.0

Я написал статью под названием « Что нового в jQuery Mobile 1.2.0»? Это продемонстрировало новые функции и изменения, внесенные командой jQuery Mobile в версии 1.2.0 их популярной среды разработки мобильных приложений. Несколько дней назад команда анонсировала бета-версию релиза 1.3.0. К счастью для нас, он фокусируется на адаптивном веб-дизайне, в частности на двух разных режимах адаптивных таблиц, панелях и ползунках с двумя ручками. В этой статье я покажу вам обзор некоторых из этих новых функций.

таблицы

В версии jQuery Mobile 1.3.0 есть два важных дополнения: таблица перекомпоновки и режим таблицы переключения столбцов. Давайте подробнее рассмотрим оба.

Режим таблицы оплавления

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

Чтобы применить режим перекомпоновки, все, что вам нужно сделать, это добавить атрибут data-role="table"<table>data-mode="reflow" Чтобы увидеть режим перекомпоновки в действии, взгляните на этот пример на веб-сайте jQuery Mobile.

Режим таблицы с переключением столбцов

Этот режим имеет другой подход по сравнению с режимом таблицы оплавления. Фактически, на этот раз у вас есть возможность скрыть один или несколько столбцов в зависимости от ваших потребностей благодаря кнопке, вставленной вверху таблицы. Конечно, это не полное решение, потому что, если показаны все столбцы, у вас будет та же проблема с ограниченной шириной, которая обсуждалась ранее. Чтобы решить эту проблему, вы можете запрограммировать набор столбцов, чтобы они скрывались при достижении определенного порога ширины. Это достигается с помощью медиазапросов CSS, которые управляют столбцами на основе уровня приоритета. Вы можете указать столбцы, которые можно скрыть или показать, применяя атрибут data-priority<th> Если вы не укажете приоритет, столбец будет постоянным, поэтому его нельзя будет скрыть. Это означает, что он будет виден при любой ширине и не будет доступен в меню выбора столбцов. Помимо указания атрибутов приоритета столбцов, вы должны добавить атрибуты data-role="table"data-mode="columntoggle"<table>

Чтобы увидеть режим переключения столбцов в таблице, взгляните на этот пример на веб-сайте jQuery Mobile Framework.

Панели

Если вы когда-либо видели приложение Google+ на Android, вы, возможно, заметили красивую панель, которая появляется, когда вы нажимаете на значок Google в верхнем левом углу экрана. Начиная с этого выпуска, вы можете легко реализовать подобную панель для своего веб-сайта или приложения (используя Cordova, как вы, возможно, узнали в статье Создание мобильного приложения на основе местоположения с использованием HTML5 и Javascript ). Этот новый виджет предоставляет вам множество опций: вы можете расположить его слева (по умолчанию) или справа от вашей страницы, и у вас также есть до трех способов показать его. Метод по умолчанию — «открыть», но у вас также есть анимации «push» и «overlay». Панель можно закрыть, проведя пальцем по странице, или нажав клавишу Esc на клавиатуре. Чтобы создать панель, вы просто добавляете атрибут data-role="panel"<div>

Как правило, ваш код будет выглядеть следующим образом:

 <div data-role="page">
  <header data-role="header">
    <h1>Your title</h1>
  </header>
  <div data-role="content">
    <p>Open the panel: <a href="#panel">Panel</a></p>
  </div>
  <footer data-role="footer">
    <h3>Copyright Aurelio De Rosa</h3>
  </footer>

  <div data-role="panel" id="panel">
      <p>The content of the panel</p>
  </div>
</div>

Демонстрацию виджета панели можно увидеть, глядя на эту страницу .

Ползунок диапазона

Новый слайдер диапазона — очень приятная особенность в версии JQM 1.3.0. Это позволяет вам создать слайдер с двумя ручками, которые вы можете перемещать, чтобы соответствовать диапазону для данного свойства. Это очень полезно. Например, если у вас есть сайт бронирования и вы хотите, чтобы ваши пользователи могли выбирать диапазон цен для фильтрации результатов поиска, они могут указать этот точный диапазон с помощью ползунка диапазона. Чтобы иметь этот виджет, вы просто применяете атрибут data-role="rangeslider"<div> элементы.

 <div data-role="rangeslider">
  <label for="range-1">Slider 1:</label>
  <input type="range" name="range-1" id="range-1" min="0" max="10" value="0" />
  <label for="range-2">Slider 2:</label>
  <input type="range" name="range-2" id="range-2" min="0" max="10" value="10" />
</div>