0.1 Jquery mobile - strukturering af sider

Introduktion

Når sider skal struktureres i jQuery Mobile er det naturligvis væsentligt at have for øje at struktur og standard skal have konsistens. Det er altså vigtigt at strukturen afspejler at indholdet skal bruges på en mobilenhed, hvilket i sagens natur, både har styrker og svagheder.

Kolonner

Kolonner er i mange tilfælde ikke en god løs, når det kommer til brug på mobileenheder, fordi kolonnebredden typisk er en udfordring for den mobile enhed. Alligevel kan der være tilfælde, hvor brugen af kolonner alligevel er nødvendig. I dette eksempel vises et eksempel på, hvordan der udarbejdes en 2 x 1 kolonne.

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

Folde-sammen-og-rulle-ud-menu

Idet indholdet på siden skal være tilpasset mobile enheder kan det være en god idé umiddelbart at skjule indhold for modtageren for at bevare overskueligheden. En af måderne at gøre det på er via en rullemenu, som brugeren kan klikke på for at synliggøre nyt indhold. Den kan laves med nedenstående kode:

<div data-role="collapsible"><h3>I'm a header</h3><p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p></div>

Du kan også lave en menu, som automatisk folder ud når siden er indlæst. Det gør du ved hjælp af tilføje attributen:

><div data-role="collapsible" data-collapsed="false">