jQuery Mobile Gitter

jQuery Mobile Layout Grid

jQuery Mobile tilbyder et sæt kolonne layoutløsninger baseret på CSS. Dog anbefales det generelt ikke at bruge kolonne layout på mobile enheder, på grund af begrænsningerne i skærmens bredde på mobile enheder.

Men nogle gange har du brug for at placere mindre elementer, såsom knapper eller navigations栏, side om side som i en tabel. I dette tilfælde er kolonne layout præcis det rigtige valg.

Kolonnerne i netværket er ens brede (total bredde er 100%), uden kantlinjer, baggrund, margin eller padding.

Der er fire tilgængelige layoutnetværk:

netværksklasse kolonne kolonnebredde korrespondence eksempel
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:I kolonnebeholderen kan underelementer indstilles til at have klassen ui-block-a|b|c|d|e afhængigt af antallet af kolonner. Disse kolonner vil være parallelle og flydende.

Eksempel 1: For ui-grid-a-klassen (tjekolonne layout) skal du specificere to underelementer ui-block-a og ui-block-b.

Eksempel 2: For ui-grid-b-klassen (trekolonne layout) skal du tilføje tre underelementer ui-block-a, ui-block-b og ui-block-c.

Tilpas netværk

Du kan tilpasse kolonneblokke ved hjælp af CSS:

eksempel

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

Prøv det selv

Du kan også tilpasse blokke ved hjælp af inline-stil:

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

Mere end én række

Det er også muligt at inkludere flere rækker i kolonnen.

Bemærkninger:ui-block-a-class vil altid oprette en ny række:

eksempel

<div class="ui-grid-b">
  <div class="ui-block-a"><span>nogle Tekst</span></div>
  <div class="ui-block-b"><span>nogle Tekst</span></div>
  <div class="ui-block-c"><span>nogle Tekst</span></div>
  <div class="ui-block-a"><span>nogle Tekst</span></div>
  <div class="ui-block-b"><span>nogle Tekst</span></div>
  <div class="ui-block-a"><span>nogle Tekst</span></div>
</div>

Prøv det selv