De bouw van een mobiele website met jQuery Mobile

jQuery Mobile is een touch-geoptimaliseerde HTML5-gebaseerde gebruikersinterface systeem.Het is gebouwd op de jQuery en jQuery UI platform, en het is ideaal voor een snelle mobiele ontwikkeling.De jQuery Mobile kader maakt gebruik van speciale attributen om te helpen bij het definiëren en uw elementen stijl, zonder zelf te hoeven gedetailleerde klasse schrijven regels.

1. 1
   Navigeer naar jQuery Mobile homepageen klik vervolgens op het tabblad "Download" in het hoofd navigatiemenu.

   Advertentie

   Was deze stap nuttig?Yes |geen |Ik help
2. 2
   Scroll naar beneden op de Download pagina totdat je hebt een Copy-en-plakken Snippet voor CDN-gehoste bestanden sectie .

   Kopieer de regels code op uw klembord.Deze drie referentiebestanden zijn alles wat je nodig hebt om het kader te implementeren.

   instagram viewer

   Advertentie

   Was deze stap nuttig?Yes |geen |Ik help
3. 3
   Open de gewenste ontwikkeling van software en maak een nieuwe HTML-document nodig.

   Als u niet beschikt over de ontwikkeling van software, opent u de Notepad applicatie op uw computer.

   Was deze stap nuttig?Yes |geen |Ik help
4. 4
   Voeg de verwijzingen naar uw HTML-document nodig.

   Binnen uw hoofd labels, plak de CDN-gehoste bestandskoppelingen.

   Was deze stap nuttig?Yes |geen |Ik help
5. 5
   Uw eerste "pagina" nodig.

   Met het jQuery Mobile kader van meerdere pagina's binnen dezelfde HTML-document te maken u.Binnen het lichaam -tags, het creëren van een div container.Voeg de data-rol attribuut, en ken het een waarde van pagina .Tot slot, voeg de ID attribuut, en ken het een waarde van huis .

   Was deze stap nuttig?Yes |geen |Ik help
6. 6
   Voeg de header , inhoud en footer div containers nodig.

   Binnen uw pagina div container, creëren drie div-tags.Met behulp van de data-rol attribuut, toewijzen waarden van header , inhoud en voettekst respectievelijk.Dit is de basisstructuur van een jQuery Mobile pagina.

   Was deze stap nuttig?Yes |geen |Ik help
7. 7
   Voeg kop- en voetteksten titels nodig.

   Met behulp van de h1 rubriek tag, creëren post titels voor uw kop- en voettekst-tags.

   Was deze stap nuttig?Yes |geen |Ik help
8. 8
   Maak een tweede pagina nodig.

   Buiten de div container die haar data-rol attribuut ingesteld op pagina heeft, maak een nieuwe div container.Voeg de data-rol attribuut, en stel deze vervolgens naar pagina.Voeg de ID attribuut, en stel deze vervolgens naar pagina 2. Voeg tenslotte div containers voor de header, content en footer, zodat de structuur lijkt op de home page.

   Was deze stap nuttig?Yes |geen |Ik help
9. 9
   Maak een menu pagina nodig.

   Het menu pagina gaat op dezelfde manier worden gemaakt als de eerste twee pagina's, maar zonder een voettekst.Maak een div container, en stel de data-rol attribuut pagina.Voeg de ID attribuut, en geef het een waarde van main_nav.

   Was deze stap nuttig?Yes |geen |Ik help
10. 10
    Maak de navigatie-menustructuur nodig.

    Inside the inhoud div container, zorgen voor een ongeordende lijst.Voeg de data-rol attribuut, en stel de waarde in lijstweergave.Voeg de data-bijvoegsel attribuut, en stel de waarde in op true.Binnen de ul tags voor de ongeordende lijst, voeg twee list-post-tags( li-tags).

    Was deze stap nuttig?Yes |geen |Ik help
11. 11
    Maak het menu koppelingen nodig.

    In de eerste lijst-punt-tags, maakt u een anchor tag.Voeg de href attribuut om de anchor tag.Gebruik de hashtag symbool om een ​​ ID attribuut richten, en typ "thuis".Deze richt zich op de "home" div container.Volg deze hetzelfde proces voor de tweede lijst-punt, maar deze keer soort hashtag "page2" naar de tweede pagina te richten.

    Was deze stap nuttig?Yes |geen |Ik help
12. 12
    toevoegen menu links naar andere pagina nodig.

    Nu uw menu is gemaakt, moet u ankertags te stellen op uw "home" en "pagina 2" pagina's om toegang te krijgen.Scroll omhoog en vind de header deel van uw startpagina.Voeg een anker-tag in de header container, net voor de h1 tag.Met behulp van dezelfde linking proces als je deed met het menu, stel de href attribuut "main_nav" hashtag.Voeg de data-rol attribuut, en geef het een waarde van knop.Voeg de data-icoon attribuut, en geef het een waarde van bars.Tot slot, voeg de data-iconpos attribuut, en geef het een waarde van notext.Dit creëert een knop aan de linkerkant van uw header titel.Herhaal deze stap voor de pagina2 pagina.

    Was deze stap nuttig?Yes |geen |Ik help
    Advertentie

• Maak zoveel pagina's binnen dezelfde HTML-document als je nodig hebt.jQuery Mobile maakt gebruik van een AJAX-navigatiesysteem dat automatisch kicks in wanneer u meerdere pagina's binnen hetzelfde document te creëren.
• Voeg de data-overgang attribuut om ankers voor een visueel sussen overgang tussen pagina's.De beschikbare overgangen zijn fade, pop, tik, draai, flow, slidefade, glijbaan, slideup en slideDown.
• Gebruik de data-thema toeschrijven aan bijna elk element in uw project stylen.Standaard, jQuery Mobile wordt geleverd met vijf kleurstalen die u kunt gebruiken.De theming systeem maakt gebruik van letters als waarden.Bijgevolg is de data-thema attribuut accepteert waarden van a, b, c, d en e wanneer je voor het eerst downloaden.Check out de jQuery Mobile ThemeRoller om een ​​aangepast thema, met maximaal 26 verschillende kleurstalen te maken!
• Gebruik de data-positie toeschrijven aan "sticky" of vaste kop- en voetteksten te maken voor uw website.Voeg dit kenmerk een div container die haar data-rol ingesteld op kop- of voettekst en de data-positie waarde vast heeft.
• Check out de jQuery Mobile Color Kit te beginnen met het ontwikkelen met 26 verschillende thema stalen.

• Zorg ervoor dat u HTML commentaar te gebruiken om uw jQuery Mobile pagina's te scheiden.Dit bespaart u een hoop tijd op de weg, als een HTML-document met meerdere "pagina's" wordt vrij snel opgeblazen.

• jQuery Mobile Color Kit
• jQuery Mobile
• jQuery Mobile ThemeRoller
• Als u problemen met een van deze stappen hebben, vraag dan eenvraag voor meer hulp, of post in de commentaren hieronder.