Konstruera en mobil webbplats med jQuery Mobile

jQuery Mobile är en touch-optimerad HTML5-baserade användargränssnitt systemet.Den är byggd på jQuery och jQuery UI plattform, och det är idealiskt för snabb mobil utveckling.ramverk jQuery Mobile använder speciella egenskaper för att definiera och forma dina element, utan att behöva skriva detaljerade klassregler själv.

1. en
   Gå till jQuery Mobile hemsidaoch sedan klicka på "Download" fliken från huvudmenyn.

   Annons

   Var detta steg hjälp?Ja |Nej |Jag behöver hjälp
2. 2
   Rulla ner på sidan Download tills du ser en Kopiera och klistra Snutt för CDN-värd filer avsnitt .

   Kopiera rader kod på dina urklipp.Dessa tre referensfiler är allt som du behöver för att genomföra ramverket.

   Annons

   Var detta steg hjälp?Ja |Nej |Jag behöver hjälp
   instagram viewer
3. 3
   Öppna din favorit mjukvaruutveckling och skapa ett nytt HTML-dokument .

   Om du inte har mjukvaruutveckling öppnar Anteckningar programmet på datorn.

   Var detta steg hjälp?Ja |Nej |Jag behöver hjälp
4. 4
   Lägg hänvisningarna till HTML-dokumentet .

   i din huvud taggar, klistra in CDN-värd fillänkar.

   Var detta steg hjälp?Ja |Nej |Jag behöver hjälp
5. 5
   Skapa din första "sida" .

   Med ramen för jQuery Mobile skapar du flera sidor i samma HTML-dokument.Inne i kropp taggar, skapa en div behållare.Tillsätt data roll attribut och tilldela den ett värde av sida .Slutligen, tillsätt ID attribut och tilldela den ett värde av hem .

   Var detta steg hjälp?Ja |Nej |Jag behöver hjälp
6. 6
   Tillsätt rubrik , innehåll och sidfot div behållare .

   Inuti din sida div container, skapa ytterligare tre div-taggar.Använda data roll attribut, tilldela värden av header , innehåll och sidfot respektive.Detta är den grundläggande strukturen hos en jQuery Mobile sidan.

   Var detta steg hjälp?Ja |Nej |Jag behöver hjälp
7. 7
   Lägg sidhuvud och sidfot titlar .

   Använda h1 rubrik tag, skapa rubriken titlar för dina sidhuvud och sidfot taggar.

   Var detta steg hjälp?Ja |Nej |Jag behöver hjälp
8. 8
   Skapa en andra sida .

   Utanför div container som har sin data roll attribut inställd på sidan, skapa en ny div container.Tillsätt data roll attribut, och sedan ställa in den på sidan.Tillsätt ID attribut, och sedan ställa in den på sidan 2. Slutligen, lägg div behållare för huvudet, innehåll och sidfot, så strukturen liknar hemsidan.

   Var detta steg hjälp?Ja |Nej |Jag behöver hjälp
9. 9
   Skapa en menysida .

   menysidan kommer att skapas på samma sätt som de två första sidorna, men utan sidfot.Skapa en div behållare och ställ in dess data roll attribut till sidan.Tillsätt ID attribut, och ge den ett värde av main_nav.

   Var detta steg hjälp?Ja |Nej |Jag behöver hjälp
10. 10
    Skapa navigeringsmenystrukturen .

    Inuti innehåll div container, skapa en oordnad lista.Tillsätt data roll attribut, och ställ in värdet på listvy.Tillsätt data infälld attribut, och ställ in värdet till true.Inne i ul taggar för oordnad lista, lägga till två listobjekt taggar( li taggar).

    Var detta steg hjälp?Ja |Nej |Jag behöver hjälp
11. 11
    Skapa meny länkar .

    Inuti första list-item taggar, skapa ett ankare tagg.Tillsätt href attribut till ankartaggen.Använd hashtag symbolen för att rikta en ID attribut, och skriv sedan "hem".Detta riktar sig "hemma" div container.Följ samma process för den andra listan-post, men den här gången typ hashtag "page2" för att rikta den andra sidan.

    Var detta steg hjälp?Ja |Nej |Jag behöver hjälp
12. 12
    Lägg menylänkar till andra sidor .

    Nu när din meny skapas, måste du ange ankare taggar på din "hem" och "sida 2" sidor att komma åt den.Rulla upp och hitta rubrik avsnitt på startsidan.Lägg till ett ankare tagg inuti huvudet behållaren strax före h1 tagg.Genom att använda samma länkningen som du gjorde med menyn, ställ in href attributet hashtaggen "main_nav".Tillsätt data roll attribut, och ge den ett värde av knappen.Tillsätt data ikon attribut, och ge den ett värde av barer.Slutligen, tillsätt data iconpos attribut, och ge den ett värde av NoText.Detta skapar en knapp till vänster om sidhuvudet titel.Upprepa detta steg för page2 sidan.

    Var detta steg hjälp?Ja |Nej |Jag behöver hjälp
    Annons

• skapa så många sidor inom samma HTML-dokument som du vill.jQuery Mobile använder en AJAX navigationssystem som automatiskt sparkar i när du skapar flera sidor i samma dokument.
• Tillsätt dataövergångs attribut till ankare för en visuellt lugnande övergång mellan sidorna.De tillgängliga övergångar blekna, pop, flip, tur, flöde, slidefade, slide, slideup och slidedown.
• Använd data tema skriva stil nästan varje element i projektet.Som standard kommer jQuery Mobile med fem färgrutor som du kan använda.Den teman systemet använder bokstäver som värden.Därför godtar data tema attributvärden av a, b, c, d och e när du först ladda ner det.Kolla in jQuery Mobile Themeroller att skapa ett eget tema, med upp till 26 olika färgprover!
• Använd data ställning attribut för att skapa "klibbiga" eller fasta sidhuvud och sidfot för din webbplats.Lägg till detta attribut till en div behållare som har sin data roll inställd på sidhuvudet eller sidfoten och data ställning värde fast.
• Kolla in jQuery Mobile Color Kit för att börja utveckla med 26 olika temarutor.

• Var noga med att använda HTML-kommentarer att skilja dina jQuery Mobile sidor.Detta sparar massor av tid på vägen, som en enda HTML-dokument med flera "sidor" blir uppsvälld ganska snabbt.

• jQuery Mobile Color Kit
• jQuery Mobile
• jQuery Mobile Themeroller
• Om du har problem med något av dessa steg, be enfråga för mer hjälp, eller post i kommentarerna nedan.