jQuery Mobile Grid

jQuery Mobile Lay-out Grid

jQuery Mobile 提供了一套基于 CSS 的列布局方案。不过，一般不推荐在移动设备上使用列布局，这是由于移动设备的屏幕宽度所限。

jQuery Mobile biedt een set van CSS-gedreven kolomindelingen. Hoewel het niet aanbevolen wordt om kolomindelingen te gebruiken op mobiele apparaten vanwege de beperkte schermbreedte van mobiele apparaten.

Maar soms hebt u de behoefte om kleinere elementen te positioneren, zoals knoppen of navigatiebalken, net als in een tabel, naast elkaar. In dit geval is een kolomindeling precies het juiste.

De kolommen in het netwerk zijn van gelijke breedte (totaalbreedte is 100%), zonder rand, achtergrond, marges of insprongen.

Er zijn vier soorten lay-outnetwerken beschikbaar: Netwerkklasse Kolom Kolombreedte Voorbeeld
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

Tip:In de kolomcontainer, afhankelijk van het aantal kolommen, kunnen sub-elementen de klasse ui-block-a|b|c|d|e instellen. Deze kolommen zullen opvolgend naast elkaar zweven.

Voorbeeld 1: Voor de klasse ui-grid-a (twee kolommen indeling), moet u twee sub-elementen specificeren ui-block-a en ui-block-b.

Voorbeeld 2: Voor de klasse ui-grid-b (drie kolommen indeling), voeg drie sub-elementen toe ui-block-a, ui-block-b en ui-block-c.

Netwerk aanpassen

U kunt kolomblokken aanpassen door gebruik te maken van CSS:

Voorbeeld

<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>

Try It Yourself

U kunt ook blokken aanpassen door gebruik te maken van inline stijlen:

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

Meerdere regels

Het is ook mogelijk om meerdere regels in een kolom op te nemen.

Opmerking:ui-block-a-class zal altijd een nieuwe regel creëren:

Voorbeeld

<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>

Try It Yourself