Ретинал jQuery Mobile

jQuery Mobile разметка сетки

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

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

Колонки в сетке имеют одинаковую ширину (всего 100%), без рамки, фона, внешнего или внутреннего поля.

Доступно четыре типа макетов сетки:

Класс сетки Колонка Ширина колонки Соответствие Пример
ui-grid-a 2 50% / 50% ui-block-a|b Тест
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c Тест
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d Тест
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e Тест

Совет:В контейнере колонок, в зависимости от количества колонок, подэлементы могут быть установлены с классом ui-block-a|b|c|d|e. Эти колонки будут выстраиваться параллельно.

Пример 1: Для класса ui-grid-a (двухколонный макет) вы должны определить два подэлемента ui-block-a и ui-block-b.

Пример 2: Для класса ui-grid-b (трехколонный макет) добавьте три подэлемента ui-block-a, ui-block-b и ui-block-c.

Настройка сетки

Вы можете настроить колонки с помощью CSS:

Пример

<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

Попробуйте сами

Вы также можете настроить блок, используя инлайн стили:

<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

Многострочный

В колонке также возможно включение нескольких строк.

Комментарий:ui-block-a-class всегда создает новую строку:

Пример

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-c"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
</div>

Попробуйте сами