jQuery Mobile rutnät

jQuery Mobile layout grid

jQuery Mobile erbjuder ett nätverkslayoutpaket baserat på CSS. Men det rekommenderas vanligtvis inte att använda kolumnlayout på mobila enheter på grund av begränsningarna i skärmens bredd.

Men ibland behöver du placera mindre element, som knappar eller navigationsfält, bredvid varandra, som i en tabell. Då är kolumnlayout precis rätt.

Kolumnerna i nätverket är lika breda (total bredd är 100%), utan ram, bakgrund, marginal eller inramning.

Det finns fyra tillgängliga layoutnätverk:

Nätverksklass Kolumn Kolumnbredd Korresponderande Exempel
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

Tips:I kolumnkontainer kan underkomponenter sättas med klassen ui-block-a|b|c|d|e beroende på antalet kolumner. Dessa kolumner kommer att flyta bredvid varandra i följd.

Exempel 1: För klassen ui-grid-a (två-kolumnslayout), måste du specificera två underkomponenter ui-block-a och ui-block-b.

Exempel 2: För klassen ui-grid-b (tre-kolumnslayout), lägg till tre underkomponenter ui-block-a, ui-block-b och ui-block-c.

Anpassa nätverk

Du kan anpassa kolumnblock genom att använda CSS:

Exempel

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

Prova själv

Du kan också anpassa block genom att använda inline-stil:

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

Flera rader

Det är också möjligt att ha flera rader i kolumnen.

Kommentar:ui-block-a-class skapar alltid en ny rad:

Exempel

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

Prova själv