jQuery komórkowy Układ Siatki
jQuery Mobile oferuje zestaw układów opartych na CSS kolumn. Jednakże układy kolumn nie są ogólnie zalecane na urządzeniu mobilnym, ze względu na szerokość ekranu mobilnego użytkownika.
Ale są chwile, które chcesz umieścić mniejsze elementy, takie jak przyciski lub kartach nawigacji, side-by-side, jak gdyby był w tabeli. Następnie, kolumny są doskonałe.
Kolumny w siatce mają jednakową szerokość (do 100% szerokości w sumie), bez border, background, margin lub padding .
Istnieje pięć siatek układ, który może być używany:
| Siatka Klasa | kolumny | szerokości kolumn | Koresponduje z | Przykład |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
W pojemniku kolumny elementy podrzędne mogą mieć klasę ui-block-a|b|c|d|e , w zależności od liczby kolumn. Kolumny będą unosić side-by-side.
Przykład 1: Dla UI-grid-klasie (który to układ dwukolumnowy), należy określić dwa elementy podrzędne ui-block-a i ui-block-b .
Przykład 2: W przypadku ui-grid-b (układ trzech kolumn), dodać trzy elementy podrzędne ui-block-a, ui-block-b i ui-block-c .
Dostosuj Siatki
Można dostosować bloki kolumny 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żna również dostosować swoje bloki przy użyciu wbudowanych stylów:
<div class="ui-block-a" style="border:1px solid
black;"><span>Text..</span></div>
Wiele Wiersze
Jest również możliwe, aby mieć kilka rzędów wewnątrz kolumny.
Uwaga: ui-block-a-class zawsze utworzyć nowy wiersz:
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 " reagujących Siatki
Na małych ekranach, nie zaleca się zbyt wiele przycisków z side-by-side tekstowym na jednym rzędzie - jako tekst może się skrócić.
Dla elastycznych siatek, dodać klasę UI-reaguje na pojemniku: