Siatka jQuery Mobile

Layout Grid jQuery Mobile

jQuery Mobile oferuje zestaw układów kolumn opartych na CSS. Jednak ogólnie nie zaleca się używania układu kolumn na urządzeniach mobilnych, ze względu na ograniczenia szerokości ekranu urządzeń mobilnych.

Ale czasami potrzebujesz umiejscowić mniejsze elementy, takie jak przyciski lub nawigację, jak w tabeli, równolegle. W takim przypadku układ kolumn jest odpowiedni.

Kolumny w siatce są równej szerokości (całkowita szerokość to 100%), bez ramki, tła, marginesów zewnętrznych lub wewnętrznych.

Dostępne są cztery rodzaje układów siatki:

klasa siatki kolumna szerokość kolumny odpowiednik Przykład
ui-grid-a 2 50% / 50% ui-block-a|b Test
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c Test
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d Test
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e Test

Wskazówka:W kontenerze kolumn, w zależności od liczby kolumn, elementy mogą być ustawione na klasę ui-block-a|b|c|d|e. Te kolumny będą porządkowo płynnie przesuwać się.

Przykład 1: Dla klasy ui-grid-a (dwukolumnowy układ), musisz określić dwa elementy ui-block-a i ui-block-b.

Przykład 2: Dla klasy ui-grid-b (trzykolumnowy układ), dodaj trzy elementy ui-block-a, ui-block-b i ui-block-c.

Dostosowanie siatki

Możesz dostosować bloki kolumn za pomocą CSS:

Przykład

<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>

Spróbuj sam

Możesz również dostosować bloki za pomocą wewnętrznych stylów:

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

Wielokrotne wiersze

Możliwe jest również umieszczenie wielu wierszy w kolumnie.

Komentarz:ui-block-a-class zawsze tworzy nową linię:

Przykład

<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>

Spróbuj sam