Konstruer en mobil nettside med Jquery Mobile

jQuery Mobile er en touch-optimalisert, HTML5-basert brukergrensesnitt system.Den er bygget på jQuery og jQuery UI plattform, og det er ideelt for rask mobil utvikling.JQuery Mobile rammeverket benytter spesielle egenskaper til å definere og style dine elementer, uten å måtte skrive detaljert klassereglene selv.

1. en
   Naviger til jQuery Mobile sin hjemmeside, og klikk deretter på "Last ned" -fanen fra hovednavigasjonsmenyen.

   Annonse

   Var dette trinnet nyttig?Ja |Nei |Jeg trenger hjelp
2. 2
   Bla nedover på siden for nedlasting til du ser en Kopier og lim snutt for CDN-vert filer delen .

   Kopier linjer med kode på din utklippstavlen.Disse tre referanse filene er alt du trenger for å implementere rammeverket.

   instagram viewer

   Annonse

   Var dette trinnet nyttig?Ja |Nei |Jeg trenger hjelp
3. 3
   Åpne din foretrukne utvikling programvare og opprette en ny HTML-dokument .

   Hvis du ikke har utvikling programvare, åpne Notepad program på datamaskinen din.

   Var dette trinnet nyttig?Ja |Nei |Jeg trenger hjelp
4. 4
   Legg referansene til HTML-dokumentet .

   inni hodet tags, lime CDN-vert filkoblinger.

   Var dette trinnet nyttig?Ja |Nei |Jeg trenger hjelp
5. 5
   Lag din første "side" .

   Med jQuery Mobile rammeverk, oppretter du flere sider i samme HTML-dokumentet.Inne i kroppen koder, lage en div container.Tilsett data-rolle attributt, og tilordne den en verdi av side .Til slutt legger ID attributt, og tilordne den en verdi av hjem .

   Var dette trinnet nyttig?Ja |Nei |Jeg trenger hjelp
6. 6
   Tilsett header , innhold og bunn div containere .

   Inne din side div container, skape tre div koder.Bruke data-rolle attributt, tilordne verdier av header , innhold og bunn hhv.Dette er den grunnleggende strukturen i en jQuery Mobile side.

   Var dette trinnet nyttig?Ja |Nei |Jeg trenger hjelp
7. 7
   Legg topp- og bunntekst titler .

   Bruke h1 overskriften tag, lage vei titler for topp- og bunntekst koder.

   Var dette trinnet nyttig?Ja |Nei |Jeg trenger hjelp
8. 8
   Opprett en ny side .

   Utenfor div container som har sin data-rolle attributtet satt til side, opprett en ny div container.Tilsett data-rolle attributt, og deretter sette den til side.Tilsett ID attributt, og deretter sette den til side 2. Til slutt legger div containere for header, innhold og bunntekst, så strukturen ligner på hjemmesiden.

   Var dette trinnet nyttig?Ja |Nei |Jeg trenger hjelp
9. 9
   Opprett en menyside .

   Menyen siden kommer til å bli skapt på samme måte som de to første sidene, men uten bunntekst.Lag en div container, og sette data-rolle attributt til side.Tilsett ID attributt, og gi den en verdi på main_nav.

   Var dette trinnet nyttig?Ja |Nei |Jeg trenger hjelp
10. 10
    Lag navigasjonsmenystrukturen .

    Inne i innhold div container, lage en ikke-sorterte liste.Tilsett data-rolle attributt, og sette verdien til listevisningen.Tilsett data innfelt attributt, og sette verdien til true.Inne i ul koder for den sorterte liste, legge to list-element tags( li tags).

    Var dette trinnet nyttig?Ja |Nei |Jeg trenger hjelp
11. 11
    Lag meny lenker .

    inne i den første liste-element koder, opprette en ankerkode.Tilsett href attributt til ankerkoden.Bruk hashtag symbolet for å målrette en ID attributt, og skriv "hjem".Dette retter seg mot det "hjem" div container.Følg den samme prosessen for den andre listen-element, men denne gangen typen hashtag "side2" for å målrette den andre siden.

    Var dette trinnet nyttig?Ja |Nei |Jeg trenger hjelp
12. 12
    Legg meny-linker til andre sider .

    Nå som menyen er opprettet, må du angi ankerkoder på "hjem" og "side 2" sider for å få tilgang til det.Bla opp og finne header delen av hjemmesiden din.Legg et anker tag inne i header container, like før h1 tag.Ved bruk av samme koblingsprosessen som du gjorde med menyen, stiller href attributt til hashtag "main_nav".Tilsett data-rolle attributt, og gi den en verdi på knapp.Tilsett data-icon attributt, og gi den en verdi av barer.Til slutt legger data-iconpos attributt, og gi den en verdi på notext.Dette skaper en knapp til venstre for overskriften tittelen.Gjenta dette trinnet for Side2 side.

    Var dette trinnet nyttig?Ja |Nei |Jeg trenger hjelp
    Annonse

• Lag så mange sider i samme HTML-dokumentet som du vil.jQuery Mobile bruker en AJAX navigasjonssystem som automatisk slår inn når du oppretter flere sider i samme dokument.
• Tilsett data-overgang attributt til ankere for en visuelt å berolige overgang mellom sider.De tilgjengelige overganger er fade, pop, snu, snu, flyt, slidefade, slide, slideup og slidedown.
• Bruk data-tema tilskriver å style nesten hvert element i prosjektet.Som standard leveres jQuery Mobile med fem fargeprøver for deg å bruke.Den theming systemet bruker bokstaver som verdier.Følgelig data-tema attributtet godtar verdier av a, b, c, d og e når du først laste den ned.Sjekk ut jQuery Mobile Themeroller å lage en egendefinert tema, med opptil 26 forskjellige fargekart!
• Bruk data-posisjon attributt for å skape "sticky" eller faste topp- og bunntekst for ditt nettsted.Legg dette attributtet til en div container som har sin data-rolle satt til topp- eller bunnteksten, og data-posisjon verdi til fast.
• Sjekk ut jQuery Mobile Color Kit for å begynne å utvikle med 26 forskjellige tema fargeprøver.

• Sørg for å bruke HTML kommentarer å skille jQuery Mobile sider.Dette sparer deg massevis av tid nedover veien, som en enkelt HTML-dokument med flere "sider" blir oppsvulmet ganske raskt.

• jQuery Mobile Color Kit
• jQuery Mobile
• jQuery Mobile Themeroller
• Hvis du har problemer med noen av disse trinnene, spør enspørsmålet for mer hjelp, eller post i kommentarfeltet nedenfor.