Byg en mobil hjemmeside med jQuery Mobile

jQuery Mobile er en touch-optimeret, HTML5-baserede brugergrænseflade system.Den er bygget på jQuery og jQuery UI platform, og det er ideelt til hurtig mobil udvikling.Den jQuery Mobile rammer udnytter særlige egenskaber til at hjælpe med at definere og stil dine elementer, uden at skulle skrive detaljeret klasseregler selv.

1. en
   Naviger til jQuery Mobile hjemmeside, og derefter klikke på "download" fanen fra hovednavigation menuen.

   Annonce

   Var dette skridt hjælpsom?Ja |ingen |Jeg har brug for hjælp
2. 2
   Scroll ned på download side, indtil du ser en Kopier og Indsæt Snippet for CDN-hostede filer sektion .

   Kopier linjer kode over på din udklipsholder.Disse tre referencefiler er alt, du behøver for at gennemføre rammen.

   instagram viewer

   Annonce

   Var dette skridt hjælpsom?Ja |ingen |Jeg har brug for hjælp
3. 3
   Åbn din foretrukne udvikling software og oprette et nyt HTML-dokument .

   Hvis du ikke har udviklingen software, åbne Notesblok-program på computeren.

   Var dette skridt hjælpsom?Ja |ingen |Jeg har brug for hjælp
4. 4
   Tilføj referencerne til din HTML-dokument .

   Inde dine hoved tags, indsætte CDN-vært fil links.

   Var dette skridt hjælpsom?Ja |ingen |Jeg har brug for hjælp
5. 5
   Opret din første "side" .

   Med rammen jQuery Mobile, du oprette flere sider i samme HTML-dokument.Inde i krop tags, skaber en div container.Tilsæt data-rolle attribut, og tildele den en værdi af side .Tilsæt til sidst ID attribut, og tildele den en værdi af hjem .

   Var dette skridt hjælpsom?Ja |ingen |Jeg har brug for hjælp
6. 6
   Tilsæt header , indhold og footer div beholdere .

   Inde din side div container, oprette yderligere tre div tags.Brug af data-rolle attribut, tildele værdier af header , indhold og footer hhv.Dette er den grundlæggende struktur af en jQuery Mobile side.

   Var dette skridt hjælpsom?Ja |ingen |Jeg har brug for hjælp
7. 7
   Tilføj sidehoved og sidefod titler .

   Brug af h1 overskrift tag, skabe overskrift titler til din sidehoved og sidefod tags.

   Var dette skridt hjælpsom?Ja |ingen |Jeg har brug for hjælp
8. 8
   Opret en anden side .

   Uden for div container, der har sin data-rolle attribut sat til side, oprette en ny div container.Tilsæt data-rolle attribut, og derefter indstille den til side.Tilsæt ID attribut, og derefter indstille den til side 2. sidst tilsættes div containere til overskriften, indhold og sidefod, så strukturen ligner hjemmesiden.

   Var dette skridt hjælpsom?Ja |ingen |Jeg har brug for hjælp
9. 9
   Opret en menu side .

   Menuen side vil blive skabt på samme måde som de to første sider, men uden en sidefod.Opret en div container, og sæt dens data-rolle attribut til side.Tilsæt ID attribut, og give det en værdi på main_nav.

   Var dette skridt hjælpsom?Ja |ingen |Jeg har brug for hjælp
10. 10
    Opret navigation menustruktur .

    Inde i indhold div container, oprette en uordnet liste.Tilsæt data-rolle attribut, og sæt dens værdi til listevisning.Tilsæt data-inset attribut, og sæt dens værdi til true.Inde i ul tags for uordnet liste, tilføjer to liste-post tags( li tags).

    Var dette skridt hjælpsom?Ja |ingen |Jeg har brug for hjælp
11. 11
    Opret menu links .

    Inde i første liste-punkt-tags, skaber et anker tag.Tilsæt href attribut til anker tag.Brug hashtag symbolet til at målrette en ID attribut, og derefter skrive "hjem".Dette er rettet mod "hjem" div container.Følg denne samme proces for den anden liste-element, men denne gang typen hashtag "Side2" for at målrette den anden side.

    Var dette skridt hjælpsom?Ja |ingen |Jeg har brug for hjælp
12. 12
    Tilføj menu links til andre sider .

    Nu hvor din menu er oprettet, skal du indstille anker tags på dit "hjem" og "side 2" sider at få adgang til den.Rul op og finde header afsnit af din startside.Tilføj et anker tag inde i header container, lige før h1 tag.Ved hjælp af samme linking proces, som du gjorde med menuen, indstille href attribut til hashtag "main_nav".Tilsæt data-rolle attribut, og give det en værdi på knap.Tilsæt data-ikon attribut, og give det en værdi af barer.Tilsæt til sidst data-iconpos attribut, og give det en værdi på notext.Dette skaber en knap til venstre for din header titel.Gentag dette trin for Side2 side.

    Var dette skridt hjælpsom?Ja |ingen |Jeg har brug for hjælp
    Annonce

• Opret så mange sider i den samme HTML-dokument, som du vil.jQuery Mobile bruger en AJAX navigationssystem, der automatisk spark i, når du opretter flere sider i samme dokument.
• Tilsæt data-overgang attribut til ankre for en visuelt formilde overgang mellem sider.De tilgængelige overgange er fade, pop, flip, turn, flow, slidefade, dias, slideup og slidedown.
• Brug data-tema tillægge style næsten hver element i dit projekt.Som standard jQuery Mobile kommer med fem farveprøver for dig at bruge.Det temaer system bruger bogstaver som værdier.Følgelig data-tema attribut accepterer værdier af a, b, c, d og e, når du først downloade den.Tjek jQuery Mobile Themeroller at oprette en brugerdefineret tema, med op til 26 forskellige farveprøver!
• Brug data-position tillægge skabe "klæbrige" eller faste sidehoved og sidefod til din hjemmeside.Føj denne attribut til en div container, der har sin data-rolle sæt til sidehoved eller sidefod, og data-position værdi til fast.
• Tjek jQuery Mobile Color Kit at begynde at udvikle med 26 forskellige tema farveprøver.

• Sørg for at bruge HTML kommentarer til at adskille dine jQuery Mobile sider.Det sparer dig en masse tid nede ad vejen, som en enkelt HTML-dokument med flere "sider" bliver oppustet temmelig hurtigt.

• jQuery Mobile Color Kit
• jQuery Mobile
• jQuery Mobile Themeroller
• Hvis du har problemer med nogen af ​​disse trin, så spørg enspørgsmålet for mere hjælp, eller post i kommentarfeltet nedenfor.