jQuery Mobile Gitter
- Forrige Side jQuery Mobile Foldbare
- Næste Side jQuery Mobile Listevisning
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>
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>
- Forrige Side jQuery Mobile Foldbare
- Næste Side jQuery Mobile Listevisning