Detaillierte Erläuterung der Verwendung des UI-Grid-Rasterlayouts in jQuery Mobile Page development_jquery

Auf Mobilgeräten ist die Bildschirmbreite schmal, sodass mehrspaltige Layouts normalerweise nicht verwendet werden. Manchmal müssen Sie jedoch möglicherweise kleine Elemente (z. B. Schaltflächen oder nebeneinander liegende Navigationsbeschriftungen) in mehreren Spalten anordnen . Das Jquery Mobile-Framework bietet eine einfache Methode zum Erstellen eines CSS-basierten Spaltenlayouts namens ui-grid

Jquery Mobile bietet vier voreingestellte Layouts, die in jeder Situation verwendet werden können, in der Spalten benötigt werden

• Zwei Spalten (unter Verwendung der Klasse ui-grid-a)
• Drei Spalten (unter Verwendung der ui-grid-b-Klasse)
• Vier Spalten (unter Verwendung der ui-grid-c-Klasse)
• Fünf Spalten (unter Verwendung der ui-grid-d-Klasse)

Raster sind 100 % breit, völlig unsichtbar (keine Ränder oder Hintergrund) und haben keinen Rand oder Abstand, sodass sie die Gestaltung der darin platzierten Elemente nicht beeinträchtigen. In einem Rastercontainer werden untergeordneten Elementen fortlaufend ui-block-a/b/c/d zugewiesen, sodass jedes „Block“-Element schwebend und nebeneinander angeordnet ist und ein Raster bildet. Die Klasse ui-block-a löscht grundsätzlich den Float und beginnt eine neue Zeile (siehe mehrzeiliges Raster unten).

ui-grid-a zweispaltiges Layout

Erstellen Sie ein zweispaltiges (50/50 %)-Layout. Fügen Sie das ui-grid-a-Attribut zur ersten Ebene (übergeordneter Container) hinzu und fügen Sie ui-block-a und ui-block zur zweiten Ebene (zwei) hinzu Untercontainer). -b:

<div class="ui-grid-a">
 <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
 <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->

Das obige Tag erzeugt das folgende Inhaltslayout:

Wie Sie sehen können, haben Raster standardmäßig keinen visuellen Stil; sie rendern Inhalte einfach nebeneinander.

Gitterklassen können auf jeden Container angewendet werden. Im nächsten Beispiel fügen wir ein ui-grid-a hinzu, wenden ui-block an und beide Schaltflächen werden auf 50 % der Bildschirmbreite erweitert

<fieldset class="ui-grid-a">
 <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
 <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>  
</fieldset>

Bitte beachten Sie, dass dieses Framework den Schaltflächen im Raster einen linken und rechten Rand hinzufügt. Für eine einzelne Schaltfläche können Sie die Klasse ui-grid-solo und die Schaltflächenklasse ui-block-a verwenden, wie im folgenden Beispiel für ein Div. Solche Schaltflächen erhalten den gleichen Rand

<div class="ui-grid-a">
 <div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
 <div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>  
</div>
<div class="ui-grid-solo">
 <div class="ui-block-a"><button type="v" data-theme="b">More</button></div>
</div>

Themenklassen (ohne Datenthemenattribute) aus dem Themensystem können einem Element hinzugefügt werden, einschließlich Rastern. Im folgenden Block haben wir zwei Klassen hinzugefügt: ui-bar, um die Standardleiste hinzuzufügen, und ui-bar-e, um den Hintergrundverlauf und den Schriftstil auf das Symbolleisten-Themenbeispiel „E“ anzuwenden. Zur Veranschaulichung wird außerdem jedem Raster ein Inline-Attribut „style="height:120px" hinzugefügt, um die jeweilige Standardhöhe festzulegen.

ui-block-b dreispaltiges Layout

Die Rasterlayoutkonfiguration verwendet „class=ui-grid-b“ für übergeordnete und drei untergeordnete Containerelemente, jedes mit seiner jeweiligen ui-block-a/a/c-Klasse, wodurch ein einzeiliges, dreispaltiges Layout erstellt wird (33/33). /33 %). Hinweis: Diese Blöcke haben dasselbe Stilthema wie der Kurs, wobei das Rasterlayout deutlich sichtbar ist.

<div class="ui-grid-b">
 <div class="ui-block-a">Block A</div>
 <div class="ui-block-b">Block B</div>
 <div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->

Dadurch entsteht ein 33/33/33 %-Rasterlayout für unseren Inhalt

ui-block-c vierspaltiges Layout

Eine Reihe mit vier Spalten, 25/25/25/25 % Raster, wird durch die Angabe von class=ui-grid-c im übergeordneten Container und das Hinzufügen von Viertelblöcken erreicht. Hinweis: Diese Blöcke haben den gleichen Stil wie Themenkurse, das Rasterlayout ist deutlich sichtbar

ui-block-c fünfspaltiges Layout

Eine Zeile und fünf Spalten, 20/20/20/20/20 % Raster, werden durch class= ui-grid-d
im übergeordneten Container angegeben

Mehrzeiliges und mehrspaltiges Layout

Das Rasterdesign wickelt Elemente in mehrere Reihen ein. Wenn Sie beispielsweise ein Raster mit drei Zeilen und drei Spalten (ui-grid-b) in einem Container mit neun Unterblöcken angeben, wird es durch drei Zeilen mit jeweils drei Elementen ersetzt. Wenn Sie eine CSS-Regel für Floats löschen und eine neue Zeile beginnen, wenn class=ui-block-a, soll sichergestellt werden, dass eine sich wiederholende Folge zugewiesener Blöcke (A, B, C, A, B, C usw.) dem Rastertyp zugeordnet wird . Sie können den ersten Container jeder Zeile auf class=ui-block-a setzen, um den Float zu löschen, daher sollten die Klassen der 9 Untercontainer sein: class=ui-block-(a,b,c,a,b ,c, a,b,c).

<div id="grid" class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
</div>

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>grid-layout demo</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
 
<div data-role="page">
 <div data-role="header">
  <h1>Grid Layout Example</h1>
 </div>
 <div data-role="content">
  <div class="ui-grid-a">
   <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
   <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
  </div><!-- /grid-a -->
 </div>
</div>
 
</body>
</html>