jQuery Mobile Gitter

jQuery Mobile Layout Grid

jQuery Mobile bietet ein auf CSS basierendes Spaltenlayout-Set. Es wird jedoch nicht empfohlen, Spaltenlayout auf mobilen Geräten zu verwenden, da die Bildschirmbreite mobiler Geräte begrenzt ist.

Manchmal müssen Sie jedoch kleinere Elemente positionieren, wie z.B. Schaltflächen oder Navigationsleisten, so wie in Tabellen nebeneinander. In solchen Fällen ist eine Spaltenlayout eine geeignete Lösung.

Die Spalten im Gitter sind gleich breit (gesamt 100%), haben keine Umrandung, Hintergrund, Außenabstand oder Innenabstand.

Es gibt vier verfügbare Layout-Gitter:

Gitterklasse Spalte Spaltenbreite entspricht Beispiel
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

Tipp:In der Spaltenbehälter können die Unterelemente je nach Anzahl der Spalten mit der Klasse ui-block-a|b|c|d|e konfiguriert werden. Diese Spalten werden nacheinander nebeneinander浮动.

Beispiel 1: Für die Klasse ui-grid-a (Zwei-Spalten-Layout) müssen Sie zwei Unterelemente ui-block-a und ui-block-b angeben.

Beispiel 2: Für die Klasse ui-grid-b (Drei-Spalten-Layout) müssen Sie drei Unterelemente ui-block-a, ui-block-b und ui-block-c hinzufügen.

Anpassung des Gitters

Sie können Spaltenblöcke mit 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>

Versuchen Sie es selbst

Sie können auch Blöcke mit Inline-Styles anpassen:

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

Mehrere Zeilen

Es ist auch möglich, mehrere Zeilen in einer Spalte zu haben.

Anmerkung:ui-block-a-class erstellt stets eine neue Zeile:

Beispiel

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Eine Textzeile</span></div>
  <div class="ui-block-b"><span>Eine Textzeile</span></div>
  <div class="ui-block-c"><span>Eine Textzeile</span></div>
  <div class="ui-block-a"><span>Eine Textzeile</span></div>
  <div class="ui-block-b"><span>Eine Textzeile</span></div>
  <div class="ui-block-a"><span>Eine Textzeile</span></div>
</div>

Versuchen Sie es selbst