jQuery Mobile Layout Grid
jQuery Mobile oferă un set de coloane machete bazate pe CSS. Cu toate acestea, aspecte de coloană nu sunt recomandate, în general, pe un dispozitiv mobil, datorită lățimii ecranului telefonului.
Dar sunt momente pe care doriți să poziționeze elemente mai mici, cum ar fi butoane sau file de navigare, side-by-side ca și în cazul în care acesta a fost într-un tabel. Apoi, coloanele sunt perfecte.
Coloanele într - o grilă sunt de lățime egală (and 100% wide in total) , fără border, background, margin sau padding .
Există cinci grile de aspect care pot fi utilizate:
| Grid Clasa | coloane | lățimile coloanelor | Corespunde | Exemplu |
|---|---|---|---|---|
| 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 |
În interiorul containerului coloanei, elemente copil poate avea clasa ui-block-a|b|c|d|e , în funcție de numărul de coloane. Coloanele vor pluti side-by-side.
Exemplul 1: Pentru-grid-ui o clasă (care este un aspect cu două coloane), trebuie să specificați două elemente copil ale ui-block-a și ui-block-b .
Exemplul 2: Pentru ui-grid-b (three-column layout) pe ui-block-a, ui-block-b ui-block-c (three-column layout) , se adaugă trei elemente copil ale ui-block-a, ui-block-b și ui-block-c .
Particularizarea Grile
Puteți personaliza blocurile de coloane folosind CSS:
Exemplu
<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>
Încearcă - l singur » Puteți personaliza, de asemenea blocuri folosind stiluri inline:
<div class="ui-block-a" style="border:1px solid
black;"><span>Text..</span></div>
mai multe rânduri
De asemenea, este posibil să existe mai multe rânduri în interiorul coloanelor.
Notă: ui-block-a-class va crea întotdeauna o linie nouă:
Exemplu
<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>
Încearcă - l singur » Grile Responsive
Pe ecrane mici, nu este recomandat să aibă prea multe butoane cu side-by-side text pe un singur rând - ca textul ar putea sa scurtat.
Pentru grile sensibile, adăugați clasa-ui receptiv la container: