Share
De officiële release van jQuery Mobile 1.0 is onlangs aangekondigd en deze tutorial zal u een overzicht geven van hoe dit populaire framework u kan helpen bij uw cross-platform en webgebaseerde app-ontwikkeling!
jQuery Mobile is een uitbreiding op het populaire jQuery JavaScript-framework. Zoals de naam al doet vermoeden, is het een implementatie die specifiek is gericht op mobiele apparaten en het afgelopen jaar heeft het een lange weg afgelegd. Het is nu een van de meer populaire frameworks voor het ontwikkelen van webgebaseerde applicaties op mobiele apparaten. Naast een geweldige oplossing voor op zichzelf staande webgebaseerde apps, wordt deze ook vaak verpakt in een SDK zoals PhoneGap om te dienen als een essentieel onderdeel voor veel native applicaties..
Het team achter jQuery Mobile heeft hard gewerkt om het framework te krijgen waar het nu is, en de laatste drie maanden hebben het specifiek van een beta naar een officiële release gereden.
Laten we eens kijken naar enkele functies die jQuery Mobile biedt, zodat u snel kunt zien dat u een eenvoudige app kunt instellen met deze geweldige oplossing!
Voordat we beginnen, moeten we ervoor zorgen dat we een aantal dingen op de juiste plaats hebben staan. Ten eerste moeten we ervoor zorgen dat we de viewport voor ons apparaat instellen met behulp van de meta label.
Om ervoor te zorgen dat we dit als een startpagina op iOS kunnen gebruiken, kunnen we de metatag instellen app-capable.
De bovenstaande metatags zijn niet strikt noodzakelijk, maar ik denk dat ze vaak een goed idee zijn.
Vervolgens moeten we de CSS en Javascript voor jQuery Mobile opnemen. Op dit moment gebruiken we de standaard CSS, hoewel we later zullen bespreken hoe de structuur van de stijl wordt gescheiden. Voor JavaScript moeten we ervoor zorgen dat we versie 1.6.4 van jQuery en jQuery mobile 1.0 opnemen. jQuery is een afhankelijkheid van jQuery Mobile, dus u moet eerst de kernbibliotheek opnemen. Op het moment van schrijven is de nieuwste versie van jQuery Core 1.7, maar jQuery Mobile biedt momenteel alleen ondersteuning voor 1.6.4. Volgens het team achter het project komt echter binnenkort ondersteuning voor 1.7!
Nu kunnen we naar de hoofdtekst van het document gaan en de typische structuur van een pagina maken. jQuery Mobile gebruikt de HTML5 gegevens- atributeren om specifieke gedragingen aan elementen toe te wijzen, data-rol het meest populair zijn omdat het de elementenrol definieert binnen de applicatie. Voeg het kenmerk toe data-role = "pagina" naar uw eerste element op de pagina.
Het hoeft geen div te zijn, het kan een sectie zijn als dat de voorkeur heeft, maar het eindresultaat is hetzelfde - je hebt je eerste pagina gemaakt met jQuery Mobile.
Voor nu kun je je pagina bouwen met alleen de data-rol attributen. Je kunt gebruiken data-role = "header" en data-role = "footer" voor de kop- en voettekst respectievelijk, en data-role = "content" voor de inhoud van het hoofdgedeelte.
jQuery Mobile-pagina De kop
Dit is een boilerplate-sjabloon met één pagina die u kunt kopiëren om u de eerste jQuery Mobile-pagina te maken. Elke link of elk formulier zal vanaf hier een nieuwe pagina binnenhalen via Ajax om de geanimeerde pagina-overgangen te ondersteunen.
Bekijk gewoon de bron en kopieer de code om aan de slag te gaan. Alle CSS en JS zijn gekoppeld aan de jQuery CDN-versies, dus dit is super eenvoudig in te stellen. Vergeet niet om een meta viewport-tag in de kop op te nemen om het zoomniveau in te stellen.
Deze sjabloon is een standaard HTML-document met daarin een enkele "pagina" -container, in tegenstelling tot een sjabloon met meerdere pagina's die meerdere pagina's bevat. We raden u ten zeerste aan om uw site of app te maken als een reeks afzonderlijke pagina's zoals deze, omdat deze schoner, lichter is en beter werkt zonder JavaScript.
Uw app moet nu op het volgende lijken.
En de volledige code hiervoor is hieronder:
Sjabloon voor één pagina De kop
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet odio ipsum, non volutpat sapien. Sed consequent gravida eros, vitae convallis dui rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar
De voettekst
Dit is voor webapps vrij eenvoudig, maar het is een begin. Alles met jQuery Mobile kan snel worden gedaan en het is fantastisch voor zowel de snelle ontwikkeling van een prototype als de ontwikkeling van volledig uitgeruste apps.
Het gebruik van een hele bibliotheek voor een app met één pagina is natuurlijk een beetje overdreven, dus laten we beginnen met de zoete dingen en een paar pagina's toevoegen aan onze app.
U kunt twee extra div-containers toevoegen na de afsluitende tag van de div met data-role = "content" en data-role = "pagina", maar de paginadata-rol zou het id-attribuut moeten hebben ingesteld op respectievelijk "twee" en "drie". Ik weet zeker dat je ziet waar we naartoe gaan, dus ga je gang en voeg ook een ID van "één" toe aan onze eerste pagina. Voeg kopteksten, inhoud en voetteksten toe aan de extra pagina's zoals gewenst.
De aanvullende code moet er ongeveer als volgt uitzien:
De kop
Dit is de tweede pagina
De voettekst
De kop
Dit is de derde pagina-inhoud
De voettekst
Als je nu je app controleert, zie je geen verschil. Dat komt omdat we door moeten gaan en naar die pagina's moeten linken vanaf de eerste pagina voordat ze worden weergegeven. Voeg enkele willekeurige links toe op de eerste pagina, zoals deze:
Pagina twee pagina drie
Als u de eerste link naar pagina twee opent, ziet u uw eerste paging-animatie, maar op dit moment is er geen manier om terug te gaan naar de eerste pagina. Ga je gang en voeg een link toe naar pagina's twee en drie die teruggaat naar pagina één.
Alles zou nu mooi heen en weer moeten bladeren. Zoet!
Nu zijn onze links op dit moment een beetje saai, maar zonder al te veel moeite kunnen we doorgaan en deze veranderen in een aantal mooie knoppen.
Als u het kenmerk toevoegt data-role = "button" naar de links op elk van de pagina's en uw app verversen, u zou nu een aantal mooie knoppen moeten hebben.
Op dit moment is onze paginaweergave prima en kunnen we door een aantal pagina's navigeren, maar het ziet er allemaal een beetje saai uit. Gelukkig wordt jQuery Mobile geleverd met thema's. Met deze thema's kan de ontwikkelaar snel kleuren en het algemene uiterlijk van de app wijzigen. Dit wordt gedaan door de data-theme attribuut. Ga je gang en voeg toe data-theme = "a", data-theme = "b" en data-theme = "a" naar elk van de pagina-divs die we hierboven hebben gemaakt. Vernieuw je app en je ziet wat er is gebeurd. Elk van uw pagina's zou er iets anders uit moeten zien!
Tot voor kort was de enige manier om uw eigen aangepaste thema te maken, een extra stylesheet op te nemen en de CSS te overschrijven die is geïmporteerd met de jQuery-CSS. Gelukkig, toen de tweede Release Candidate voor jQuery Mobile in oktober uitkwam, werd het stylesheet gescheiden in twee aparte entites, die plaats maakten voor de nieuw uitgebrachte ThemeRoller. Het eerste stylesheet behandelt de structuur van de applicatie en de tweede behandelt alle thema's voor de app.
Ga naar de Theme Roller-pagina en je wordt begroet door het onderstaande scherm:
Aan de linkerkant heb je je thema-instellingen. Je kunt ervoor kiezen om elk van de secties één voor één te filteren en aan te passen wat je wilt, of, zoals ik graag doe, sleep de kleuren van boven naar beneden om de gewenste stijl te geven en verfijn je selectie met het zijmenu. U kunt uw thema's met maximaal 26 opbouwen en vervolgens uw themabestand downloaden dat in uw toepassing wordt gebruikt.
Wanneer u het ZIP-bestand download en de inhoud ervan extraheert, heeft u een index.html bestand dat enkele basisstijlen bevat en een bevestiging dat uw stylesheet correct is gedownload. Je hebt dan een themamap en binnenin vind je een afbeeldingenmap en twee stylesheets met de naam die je het thema bij export hebt gegeven. Er is een verkleinde versie voor de productie of een volledige versie voor eventuele bewerkingen die u wilt maken.
Wanneer u nu aan uw mobiele project begint, neemt u deze Themarollen-stylesheet op in plaats van de standaardthema-CSS.
jQuery Mobile
Nu, wanneer u toegang krijgt tot de stalen die u op de gebruikelijke manier hebt gemaakt met jQuery Mobile hierboven door de data-theme attribuut, verwijst u naar de Theme Roller CSS die u hebt gemaakt in plaats van de standaardinstellingen.
jQuery Mobile De kop
Pagina-inhoud komt hier.
De voettekst
U kunt de data-theme attribuut aan elk element op de pagina. Als u het aan de div met de data-role = "pagina" element, dan wordt dat themastaal toegepast op alle elementen binnen die pagina. Je zult waarschijnlijk niet helemaal tot 26 verschillende stalen gaan, maar je zult waarschijnlijk 3 of 4 verschillende stalen gebruiken om een mooie mix van verschillende kleuren in je applicatie te krijgen. Speel met de ThemeRoller, er zijn veel meer opties dan alleen de standaardkleuren slepen en neerzetten! U kunt hellingen aanpassen, schaduwen laten vallen en zelfs de lichtheid en verzadiging van de kleuren wijzigen.
In de afgelopen drie RC-releases zijn er een aantal belangrijke toevoegingen aan het framework toegevoegd, dus als je nog steeds een van de bèta-releases gebruikt of gewoon niet wist dat RC1, RC2 of RC3 was uitgebracht, is het volgende een beetje Inhaalslag op de veranderingen.
RC1 introduceerde enkele ontwerp-tweaks voor de Collapsibles, verwijderde de extra knopstijl rond het +/- pictogram en voegde de mogelijkheid toe aan de inklapbare inhoudscontainer. Het attribuut toevoegen data-inhoud-thema naar de inklapbare container ook kwadraat uit de hoeken van de header aan de onderkant, waardoor het uiterlijk van de container een meer vloeibare esthetiek.
Als u aan de slag wilt met collapsables, is hier de basiscode. Het volgende geeft je een enkele inklapbare container:
Kop in de titelbalk
Inhoud binnen de inklapbare container.
Als u een stapel inklapbare containers wilt samenvoegen en het populaire accorrdion-effect wilt bereiken, hoeft u alleen maar een groep inklapbare containers in een verpakking te wikkelen div met de data-rol van inklapbare-set.
De iOS 5-positie-vaste opties zijn verbeterd van de beta-release met deze RC, maar ze waren standaard nog steeds uitgeschakeld. Om deze functie te gebruiken, moet u de overschrijving toepassen wanneer de mobileinit gebeurtenis is geactiveerd. Standaard past jQuery Mobile een aantal markupverbeteringen toe wanneer het is geladen en is het eerder geladen document.ready vuren. Gelukkig is een van de geweldige dingen over jQuery Mobile dat de instellingen gemakkelijk kunnen worden geconfigureerd met behulp van jQuery's $ .extend methode en bindend aan de mobileinit evenement. Zorg ervoor dat het scriptbestand met uw opties is opgenomen na jQuery, maar vóór jQuery Mobile. Om dit te doen, zou uw code er ongeveer zo uitzien:
Accentsconagua
$ (document) .bind ("mobileinit", function () $ .extend ($. mobile, touchOverflowEnabled: true);); Er zijn een heleboel configureerbare opties die je hier kunt lezen. Sommige daarvan die ik regelmatig heb gebruikt zijn:
loadingMessage wat een string is en standaard is deze ingesteld op "laden". pageLoadErrorMessage opnieuw is een string en deze staat standaard ingesteld op "Fout bij laden van pagina". defaultPageTransition is een string en is standaard ingesteld op "slide". RC2 werd midden oktober heropend en kocht een aantal goede belangrijke wijzigingen. Er waren toevoegingen aan de HTML5-ondersteuning voor invoertypen, waaronder tijd, datum en kleur. Dit zorgde er alleen voor dat die elementen werden gestyled wanneer ze op de pagina werden weergegeven. De mogelijkheid om aangepaste selecties te hebben als onderdeel van een groep - zodat ze er meer geïntegreerd uitzagen - werd geïntroduceerd. Als je je wikkel fieldset in een div met de data-role = "controlegroep" attribuut, uw velden verschijnen in een enkele module samen gegroepeerd. Het toevoegen datatype = "horizontale" groepeert ze horizontaals.
Een van de grootste veranderingen in de vorige release was het scheiden van de stylesheets voor thema's en structuur. Vroeger was het zo dat u één stylesheet uit jQuery zou opnemen met daarin alle gestructureerde CSS en de stijlen voor de verschillende thema's. Als u maatwerk aan de CSS zou willen toevoegen, zou u uw eigen stlye-sheet moeten hebben dat al het reeds ingestelde zou overschrijven. Natuurlijk, aangezien we ons ontwikkelen voor mobiel en bandbreedte belangrijk is, zijn de structuur- en thema-stylesheets nu gescheiden.
Er waren andere toevoegingen en bugfixes, waaronder standaard vormen van 100% breedte, dialogen met een maximale breedte en een nieuwe helperklasse om elementen op een manier te verbergen, zodat ze nog steeds kunnen worden geopend door ondersteunende technologieën zoals schermlezers. Controleer de release-opmerkingen en het wijzigingslogboek voor alle details.
Het uitkomen van RC3 kwam als een schok voor sommigen op 13 november, omdat het team had gezegd dat de officiële versie 1.0 direct na RC2 zou komen. RC3 was het zeker waard, omdat er een hele reeks prestatieverbeteringen werden gemaakt, wilde het team gewoon zeker weten dat de code goed draaide voordat ze een definitieve versie uitdeden. Je kunt hier over de RC3-release lezen en het eerste dat je zal opvallen, zijn de prestatieverbeteringen. Er waren ook een paar nieuwe toevoegingen:
U kunt nu instellen linkBindingEnabled naar false (true by default) als u alle klikgebeurtenissen met een andere bibliotheek of met behulp van een aangepaste code wilt afhandelen. U kunt ook de overlay die wordt weergegeven in het dialoogvenster opmaken met de instelling data-overlay-thema op de overlay-pagina-wrapper of op de select-module.
Ten slotte kreeg de documentatie een goed benodigde revisie en was update met demo's van alle functies, enkele tips om aan de slag te gaan en een paar tips voor het bouwen van jQuery-apps samen met Phonegap die hier te vinden is.
jQuery Mobile heeft de afgelopen maanden een lange weg afgelegd, laat staan het afgelopen jaar, en als het een soort ouderbibliotheek is, zal het de nummer één keuze worden voor veel ontwikkelaars om meteen te duiken in het bouwen van mobiele web-apps. De leercurve is veel minder dan een oplossing als SenchaTouch of Titanium Mobile, en naar mijn mening zal dit feit ervoor zorgen dat de acceptatie omhoog schiet. ThemeRoller en de algemene configuratieopties bieden ook een aanpassingsniveau dat zo gebruiksvriendelijk is dat zelfs de meest amateurs van coders het snel kunnen vinden en aan de slag kunnen met aangepaste thema's.
Er zijn enkele dingen waarvan ik zeker ben dat we ze allemaal graag toegevoegd zien, en na verloop van tijd - net als bij jQuery - twijfel ik er niet aan dat er nog meer verbeteringen zullen worden aangebracht. Ik dring er bij u op aan om jQuery Mobile te gaan bekijken als u dat nog niet gedaan heeft en als u een oudere versie van het programma gebruikt, controleer dan het changelog voor de release-informatie voor elke versie waarop u staat voordat u een upgrade uitvoert..
We houden je zeker op de hoogte van Mobiletuts + terwijl jQuery Mobile vordert, maar als je meer tips en tutorials van jQuery Mobile wilt zien, laat het ons dan weten in de comments!
