jQuery Mobile Layout-Raster
jQuery Mobile bietet eine Reihe von CSS-basierte Spalten-Layouts. Allerdings Spaltenlayouts sind im Allgemeinen nicht auf einem mobilen Gerät empfohlen, da die Bildschirmbreite des Handys.
Aber es gibt Zeiten, die Sie kleinere Elemente positionieren wollen, wie Knöpfe oder Navigationsregisterkarten, die Seite an Seite, als ob sie in einer Tabelle war. Dann sind Spalten perfekt.
Spalten in einem Raster von gleicher Breite (und 100% breit insgesamt), ohne border, background, margin oder padding .
Es gibt fünf Layout-Raster, die verwendet werden können:
| Grid-Klasse | Spalten | Spaltenbreite | Entspricht | Beispiel |
|---|---|---|---|---|
| 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 |
Innerhalb der Kolonne Behälter können untergeordnete Elemente haben die Klasse ui-block-a|b|c|d|e in Abhängigkeit von der Anzahl der Spalten. Die Spalten werden Seite-an-Seite schweben.
Beispiel 1: Für die ui-Grid-Klasse (die eine zweispaltige Layout ist), müssen Sie zwei untergeordneten Elemente angeben ui-block-a und ui-block-b .
Beispiel 2: Für ui-grid-b (Drei-Spalten - Layout), fügen Sie drei Child - Elemente von ui-block-a, ui-block-b und ui-block-c .
Passen Sie Grids
Sie können Ihre Spaltenblöcke mithilfe von CSS anpassen:
Beispiel
<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>
Versuch es selber " Sie können auch Ihre Blöcke mithilfe von Inline-Stile anpassen:
<div class="ui-block-a" style="border:1px solid
black;"><span>Text..</span></div>
Mehrere Zeilen
Es ist auch möglich, haben mehrere Zeilen in Ihrem Spalten haben.
Hinweis: Der ui-block-a-class wird immer eine neue Zeile zu erstellen:
Beispiel
<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>
Versuch es selber " Responsive Grids
Auf kleinen Bildschirmen, ist es nicht empfehlenswert, zu viele Tasten mit Text Seite an Seite zu haben in einer Zeile - wie der Text erhalten verkürzt könnte.
Für ansprechende Gitter, fügen Sie die ui-responsive Klasse auf den Behälter: