Page Title Page Title Page content goes here. Page Footer jQuery Mobile skabelon.

Præsentationer af emnet: "Page Title Page Title Page content goes here. Page Footer jQuery Mobile skabelon."— Præsentationens transcript:

1 Page Title Page Title Page content goes here. Page Footer jQuery Mobile skabelon

2 jQuery Mobile Toptekst på siden Her kommer indholdet Det kan være tekst, billeder formularfelter, video, "lyd" og meget andet. Page Footer <!-- /footer slut 

3 jQuery Mobile Toptekst på siden Her kommer indholdet Det kan være tekst, billeder formularfelter, video, "lyd" og meget andet. Page Footer <!-- /footer slut 

4 jQuery Mobile ”Værktøjskassen” CSS jQuery Javascript-kode jQuery Mobile Javascript-kode Fordele: Alm. HTML 5 (evt. 4) + OK Standard-CSS + Lille indsats – stor virkning = Hurtig udvikling Skalerer til mobilskærm Dokumentation på http://jquerymobile.com - klik på DOCShttp://jquerymobile.com

5 Button Cancel Save Button Standardknap: Fylder hele bredden på skærmen

6 Eksempel: Delete Der findes et sæt af standard- ikoner til knapperne Ikonerne kan placeres forskelligt på knappen data-iconpos="right" data-iconpos=”top" data-iconpos=”bottom" Placering til venstre er standard <a href="index.html" data-role="button" data-icon="delete“ data-iconpos=“right”>Delete

7 Yes No Maybe Grupperede knapper Yes No Maybe Horisontalt grupperede knapper Add Delete Horisontalt grupperede knapper med ikoner Uden tekst:

8 Header Page Title Knapper i header – Links bliver automatisk til knapper Standardplacering: Først Venstre, Så Højre Farve: Samme som header Kan ændres med data- theme på knappen Cancel Edit Contact Save Page Title Options Knapper i header – selvvalgt position UI=User Interface Btn=button Footer Footer behandles i princippet som Header, dog er der ingen tvungen/standard-placering af knapperne – fri placering. Gruppering af knapper kan benyttes.

9 Navigationsbar Kan også placeres i Header og Footer. Max. 5 knapper på linie. Hvis flere, så laves placeres knapperne på flere rækker. One Two Three One Two Three I Header-blokken placeres..... lige efter overskrift og eventuelle knapper Navigationsbar i Footer Navigationsbar "i Header". Den aktive knap/side kan få særlig markering

10 Sammenklappeligt indhold på en side (1) Dette er en overskrift Dette er det sammenklappelige indhold. Standard er at indholdet ikke er synligt/udklappet (Note: Hvis indholdet skal være synligt fra starten: ) Dette er en overskrift Dette er det sammenklappelige indhold. Standard er at indholdet ikke er synligt/udklappet Sammenklappeligt indhold kan indsættes i sammenklappeligt indhold Dette er en overskrift 1 Dette er det sammenklappelige indhold. Standard er at indholdet ikke er synligt/udklappet Dette er en overskrift 2 Dette er det sammenklappelige indhold. Standard er at indholdet ikke er synligt/udklappet Dette er en overskrift 3 Dette er det sammenklappelige indhold. Standard er at indholdet ikke er synligt/udklappet

11 Sammenklappeligt indhold på en side (2) Noter: -tag: I eksemplerne er tekst sat i - tags. Det er ikke tvunget. Hvis der ikke er -tag spares en tom linie før og efter teksten. Teksten kan formaters med diverse tags for fed, kursiv, understreget tekst. Der kan indsættes links, knapper mv. Indhold: Der kan være billeder, video mv. i det sammenklappede indhold Dette er en overskrift 1 Dette er det sammenklappelige indhold. Standard er at indholdet ikke er synligt/udklappet ………………… ……

12 Sektion 1 Dette er det er indholdet i sektion 1 Section 2 Dette er det er indholdet i sektion 2 Sektion 3 Dette er det er indholdet i sektion 3. Sammenklappeligt indhold på en side – harmonikaudgaven (”accordian”) Note: Som standard er indholdet klappet sammen. Man kan vælge om en sektion skal være åben: (hvis ”data-collapsed …” ikke er der, så svaret det til ”= true”) Ved klik på + (Sektion 2):