Макет сетки

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

Фреймворк jQuery Mobile предоставляет простой способ построения колонок на основе CSS с помощью соглашения о именовании стилей блоков, называемого ui-grid.

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

• двухколоночный (используя класс ui-grid-a)
• трехколоночный (используя класс ui-grid-b)
• четырехколоночный (используя класс ui-grid-c)
• пятиколоночный (используя класс ui-grid-d)

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

Внутри контейнера сетки дочерние элементы получают ui-block-a/b/c/d/e в последовательном порядке, что делает каждый элемент "блока" плавающим рядом, образуя сетку. Класс ui-block-a фактически очищает плавающие элементы, что позволит начать новую строку (см. сетки с несколькими строками ниже).

Двухколоночные сетки

Для построения двуколоночного (50/50%) макета начните с контейнера с class ui-grid-a, и добавьте два дочерних контейнера внутри него, помеченных классом ui-block-a для первого столбца и ui-block-b для второго:

<div class="ui-grid-a">
  <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
  <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->

Вышеприведенный разметка создает следующий макет содержимого:

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

Классы сетки могут быть применены к любому контейнеру. В этом следующем примере мы добавляем ui-grid-a к fieldset, и применяем классы ui-block к контейнеру каждой из двух кнопок внутри, чтобы растянуть их на 50% ширины экрана:

<fieldset class="ui-grid-a">
  <div class="ui-block-a"><button type="submit" data-theme="a">Cancel</button></div>
  <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
</fieldset>

Обратите внимание, что фреймворк добавляет левые и правые отступы к кнопкам в сетке. Для одной кнопки вы можете использовать контейнер с классом ui-grid-solo и обернуть кнопку в div с классом ui-block-a, как в примере ниже. Таким образом, кнопка получит те же отступы.

<div class="ui-grid-a">
  <div class="ui-block-a"><button type="button" data-theme="a">Previous</button></div>
  <div class="ui-block-b"><button type="button" data-theme="a">Next</button></div>
</div>
<div class="ui-grid-solo">
  <div class="ui-block-a"><button type="button" data-theme="b">More</button></div>
</div>

Классы темы (а не атрибуты data-theme) из системы оформления могут быть добавлены к элементу, включая сетки. В блоках ниже мы добавляем два класса: ui-bar для добавления стандартного отступа для панели и ui-bar-a для применения фонового и шрифтового оформления для темы инструментальной панели "a". Для иллюстрации также добавлен атрибут style="height:120px" для каждого элемента сетки, чтобы установить для каждого стандартную высоту.

Трехколоночные сетки

Другая конфигурация макета сетки использует class=ui-grid-b в родительском элементе и 3 дочерних контейнера, каждый со своим соответствующим классом ui-block-a/b/c, чтобы создать трехколоночный макет (33/33/33%). Примечание: эти блоки также стилизованы с помощью классов темы, поэтому макет сетки хорошо виден.

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

Это создаст сетку 33/33/33% для нашего содержимого.

И пример трехколоночной сетки с кнопками внутри:

Четырехколоночные сетки

Четырехколоночная сетка 25/25/25/25% создается путем указания class=ui-grid-c в родительском элементе и добавления четвертого блока. Примечание: эти блоки также стилизованы с помощью классов темы, поэтому макет сетки хорошо виден.

Пятиколоночные сетки

Пятиколоночная сетка 20/20/20/20/20% создается путем указания class=ui-grid-d в родительском элементе и добавления пятого блока. Примечание: эти блоки также стилизованы с помощью классов темы, поэтому макет сетки хорошо виден.

Сетки с несколькими строками

Сетки предназначены для обертывания нескольких элементов в строки. Например, если вы укажете трехколоночную сетку (ui-grid-b) в контейнере, который имеет девять дочерних блоков, он обернется в 3 строки по 3 элемента в каждой. Существует правило CSS для очистки плавающих элементов и начала новой строки, когда появляется class=ui-block-a, поэтому убедитесь, что вы назначаете классы блоков в повторяющейся последовательности (a, b, c, a, b, c и т. д.), которая соответствует типу сетки:

Сетки в панелях инструментов

Сетки полезны для создания макетов внутри панели инструментов. Вот подвал с четырехколоночной сеткой.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-layout demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Grid Layout Example</h1>
  </div>
  <div role="main" class="ui-content">
    <div class="ui-grid-a">
      <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
      <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
    </div><!-- /grid-a -->
  </div>
</div>
 
</body>
</html>