Сетки jQuery Mobile

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

Компоновочные Форматы jQuery Mobile

Однако, иногда Вы хотите расположить более малые элементы, как кнопки или вкладки навигации, бок о бок - как будто они находятся в таблице. Тогда, столбцы являются идеальным вариантом.

Столбцы в сетке имеют равную ширину (и составляют общую ширину 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>Текст..</span></div>

Несколько Строк

Также возможно использовать несколько строк в Ваших столбцах.

Примечание: ui-block-a-class будет всегда создавать новую строку:

Пример

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Некоторый Текст</span></div>
  <div class="ui-block-b"><span>Некоторый Текст</span></div>
  <div class="ui-block-c"><span>Некоторый Текст</span></div>
  <div class="ui-block-a"><span>Некоторый Текст</span></div>
  <div class="ui-block-b"><span>Некоторый Текст</span></div>
  <div class="ui-block-a"><span>Некоторый Текст</span></div>
</div>

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

Далее: Объекты JavaScript

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)