Mobile App Design / Dev Beginnershandleiding voor jQuery Mobile

In de afgelopen 2-3 jaar hebben we een enorme groei gezien in browser- en OS-ondersteuning voor mobiele websites. Het meest in het bijzonder komen Apple's iOS- en Google-Android-platforms voor de geest. Maar anderen zoals PalmOS en Blackberry zijn nog steeds in de mix. Tot voor kort was het erg moeilijk om een ​​enkel mobiel thema in al deze platforms te matchen.

JavaScript was een begin, maar er is tot nu toe geen echt eengemaakte bibliotheek. jQuery Mobile neemt de beste functies van jQuery en porteert deze naar een mobiele webbron. De bibliotheek lijkt meer op een framework met animaties, overgangseffecten en automatische CSS-stijlen voor elementaire HTML-elementen. In deze handleiding hoop ik het platform zo te introduceren dat je je op je gemak voelt bij het ontwerpen van je eigen mobiele jQuery-apps.

Functies en OS-ondersteuning

De reden dat ik stel voor het leren van jQuery Mobile over andere frameworks is eenvoud. De code is gebouwd op de kern van jQuery en heeft een actief team van ontwikkelaars die scripts schrijven en bugs bewerken. Van de vele functies zijn HTML5-ondersteuning, door Ajax aangedreven navigatielinks en gebeurtenishandlers voor aanraken / vegen.

De ondersteuning varieert per telefoon en is onderverdeeld in een grafiek van 3 categorieën van A-C. A is het hoogste niveau dat volledige ondersteuning biedt voor jQuery Mobile, B heeft alles behalve Ajax terwijl C eenvoudige HTML is met weinig tot geen JavaScript. Gelukkig worden de meeste populaire besturingssystemen volledig ondersteund - ik heb hieronder een lijst met slechts een paar voorbeelden toegevoegd.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Blackberry 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

Als u meer wilt weten, kunt u het beste op hun officiële documentpagina lezen. Het is niet geschreven in wartaal en voelt eigenlijk heel gemakkelijk om mee te volgen. Laten we ons nu concentreren op de basisprincipes van het schrijven van een mobiele pagina van jQuery en hoe we een kleine applicatie kunnen bouwen!

De standaard HTML-sjabloon

Om uw eerste mobiele app te laten werken, is er een set-sjabloon waarmee u moet beginnen. Dit omvat de jQuery-basiscode, samen met de mobiele JS en CSS, alle externe gehost van de jQuery-CDN. Bekijk mijn voorbeeldcode hieronder.

De enige buitenlandse elementen hier zouden de twee meta-tags moeten zijn. De top uitkijk postje tag update mobiele browsers om een ​​volledig zoomeffect te gebruiken. De waarde instellen width = device-width zal de paginabreedte precies op de breedte van het telefoonscherm instellen. En het beste van alles is dat de zoomfuncties niet worden uitgeschakeld, omdat jQuery Mobile zich aan verschuivende lay-outs kan aanpassen.

De volgende metatag X-UA-Compatible dwingt Internet Explorer alleen de HTML te renderen in de meest recente iteratie. Oudere browsers en in het bijzonder mobiele gebruikers proberen onbekende rendering-bugs te omzeilen.

De lichaamsinhoud construeren

Dit is waar jQuery-mobiel lastig kan worden. Elke HTML-pagina is niet noodzakelijkerwijs 1 pagina op de mobiele site. Het framework maakt gebruik van HTML5's data-attributen, die u in een bevlieging kunt creëren door toe te voegen gegevens- vooraf. Op een vergelijkbare manier data-role = "pagina" kan worden ingesteld op meerdere divs in één HTML-bestand, waardoor u meer dan één pagina krijgt.

U zou dan tussen deze pagina's gaan met ankerlinks en een unieke ID. Deze instelling is een goed idee voor eenvoudige, eenvoudige apps. Als u slechts 3-5 pagina's nodig heeft, waarom slaat u het dan niet allemaal in één bestand op? Tenzij u veel geschreven inhoud heeft, probeer in dat geval PHP-bestanden te gebruiken om tijd te besparen.

Controleer het onderstaande codevoorbeeld als je verdwaald bent.

 
 
 
Toptitelbalk
 
 
 
Laat een andere pagina zien??
 
tip: klik op de knop hieronder!
 
Over ons
 
  
 
 
 
Page 2 Hier
 
 
 
alleen wat extra inhoud.
 
Ik bedoel, dat kan ga terug te allen tijde.
 
 
   

Bekijk de ankerlink van de indexpagina even. Merk op dat ik het attribuut heb toegevoegd data-role = "button" om de link als een knop in te stellen. Maar in plaats van de standaardstijlen die we gebruiken te gebruiken data-theme = "c". Dit schakelt tussen 1 van de 5 (thema's a-e) sjablonen die standaard als CSS-stijlen binnen jQ Mobile worden verpakt.

Mijn knop omspant ook de volledige paginabreedte. Om het gedrag te verwijderen, moeten we het element instellen van blok tot regelweergave. Het attribuut om dit te doen is data-inline = "true" die je op elke ankerknop zou kunnen aanbrengen.

Kop- en voettekststangen

Langs de bovenkant en onderkant van uw toepassingen moet u kop- en voettekstinhoud toevoegen. Deze ontwerpstijl wordt vaak toegeschreven aan iOS-apps die voor het eerst populair werden in de mobiele App Store van Apple. jQ Mobile gebruikt attributen van data-role om de header, footer en pagina-inhoud te definiëren. Laten we deze gebieden eens kort bekijken.

Topbalkknoppen

Standaard ondersteunt de bovenste balk een set van twee (2) links op een vergelijkbare manier als andere mobiele apps. iOS gebruikt standaard een “terug” knop naar links en vaak een “opties” of “config” aan de rechterkant.

 
 instellingen 
Page 2 Hier
 
 

De bovenstaande code is alleen gericht op de div-container voor onze About-pagina, samen met de header-inhoud. Het extra HTML-kenmerk data-add-back-btn = "true" werkt alleen als deze is toegevoegd aan een paginarang. Het doel is om automatisch een terugknop toe te voegen die vergelijkbaar is met de terugknop van uw browser.

We hadden een terugknop handmatig kunnen toevoegen met dezelfde code als we in het inhoudsgebied gebruikten. Maar ik vind dat dit veel langer duurt om te installeren, vooral op meerdere pagina's. Alle ankerlinks binnen het kopgedeelte worden standaard ingesteld op de posities links / rechts. Door het gebruiken van class = "-ui btn-right" hierdoor heb ik mijn instellingenknop opnieuw gepositioneerd, zodat er vrije ruimte is voor de terugknop. Ook gebruik ik de secundaire themastijl om het wat extra pit te geven!

Voettekst Navigatie

Het voettekstgebied voelt in het begin niet erg nuttig. Het is een plaats waar u copyright-items en belangrijkere links kunt opslaan, maar dit kan net zo goed worden toegevoegd aan de onderkant van uw inhoudsgebied. Dus wat heb je aan het gebruik van de voettekst?

Welnu, het beste voorbeeld dat ik heb gezien, maakt gebruik van voettekstruimte als een navigatiesysteem waar tabbladen verschijnen om de paginanavigatie te besturen. Er zijn tal van opties om volledig schermeffecten te selecteren, pictogrammen toe te voegen, plaatsing aan te passen en nog een paar andere attributen. Maar laten we gewoon een eenvoudige voettekst bouwen met 3 knoppen om een ​​idee te krijgen hoe dit werkt.

• Voorbeeld van live demo

Dus hier is wat footer-code voor het gedeelte over pagina. data-role = "navigatiebalk" moet worden toegevoegd aan het containerelement dat een ongeordende lijst bevat en NIET het UL-element zelf. Elke koppeling binnen de lijst wordt behandeld als een tabbalk, die vervolgens gelijk verdeeld wordt op basis van het totale aantal links. De extra klasse van ui-body-b voegt gewoon esthetische effecten toe als we schakelen tussen de paar beschikbare stijlen.

Als je op de eerste knop ziet, heb ik het attribuut data-direction = "reverse". Hoewel ik de instelling van de back-knop als eerder kon gebruiken om terug te keren naar de startpagina, heb ik in plaats daarvan de pagina-ID gebruikt van #inhoudsopgave. Standaard zal het app-venster naar rechts overgaan, dat er behoorlijk plakkerig uitziet, omdat je verwacht dat de animatie achteruit gaat. Je kunt met nog meer van deze geanimeerde effecten spelen als je tijd hebt. Bekijk de pagina met overgangsinformatie in de documentatie van jQuery.

Ajax & dynamische pagina's

Het eerste segment heeft echt de belangrijkste punten geopend voor het bouwen van een mobiele app met jQuery. Maar ik wil een nieuwe app starten die gegevens van een externe pagina laadt. Ik zal een heel eenvoudig PHP-script gebruiken om het te bereiken $ _REQUEST [] variabele en geef dienovereenkomstig een kleine Dribbble-opname weer. De onderstaande schermweergave zou u een idee moeten geven van wat we gaan bouwen.

Eerst maak ik een index.html-pagina op de standaardsjabloon. Voor dit startscherm gebruik ik een lijstweergave-instelling om elke koppeling op volgorde weer te geven. Dit gebeurt in het inhoudsgebied met een data-role = "lijstweergave" attribuut op de lijstcontainer. Terwijl ik dezelfde kopsporen uitsneed als voorheen, voegde ik al mijn code toe vanaf deze nieuwe indexpagina hieronder.

 
 
 
Oktober 2011 Shots
 
 
 
 
Eerste afbeelding
 
Tweede afbeelding
 
Derde afbeelding
 
Vierde afbeelding
 
 
  
   

Elk van de ankerlinks in mijn lijstweergave verwijst naar hetzelfde bestand - index.php. Maar we geven de parameter door imgid als een verzoekvariabele. Op het image.php-bestand nemen we de ID en testen deze tegen 4 vooraf ingestelde waarden. Als we overeenkomen, gebruiken we de overeenkomende afbeeldings-URL en titel, anders geven we alleen een standaard Dribbble-opname weer.

Image Loader Script

Het script image.php heeft nog steeds de standaard jQuery-sjabloon voor mobiele apparaten toegevoegd aan de code. Het deelt eigenlijk een zeer vergelijkbare kop- en voettekst, met uitzondering van de toevoeging van ons kenmerk voor een backlink data-add-back-btn = "true". Merk op dat deze knop alleen verschijnt als we eerst van index.html komen! Probeer image.php direct te laden en er zal niets verschijnen omdat er geen is “terug” verhuizen naar.

Ik denk dat we de code beter kunnen begrijpen door eerst mijn PHP-logica te bekijken. We gebruiken een schakelaar / geval methode om te controleren op de 4 verschillende ID's en een headertitel, afbeeldings-URL en originele artiest bronlink te bieden.

Alles lijkt redelijk eenvoudig - zelfs een beginnende PHP-ontwikkelaar zou moeten kunnen volgen! En als je het niet begrijpt, is het toch niet belangrijk voor de jQuery-code, dus maak je geen zorgen. We moeten nu overschakelen en de sjabloon bekijken die ik op deze nieuwe pagina heb gebouwd. Alle HTML-code is toegevoegd na dat hele PHP-blok hierboven. Ik gebruikte de ID van “afbeeldingen” voor de container en stel zelfs de header in om te veranderen bij elke nieuwe foto.

 
 
 
 
 
 Bekijk het origineel
 
 
  
 

Je kunt waarschijnlijk zien hoe simplistisch deze demo is. Maar het hele doel is om de schaalbaarheid van jQuery-mobiel aan te tonen. PHP kan eenvoudig in de mix worden toegevoegd en je kunt een paar hele leuke apps maken met slechts enkele uren ontwikkeling.

Fancy Design met lijstminiaturen

Een laatste toegevoegd effect dat we kunnen implementeren, is het gebruik van miniaturen om de lijstpagina op te vrolijken. Ik ga ook tekst splitsen in een kop en beschrijving om zowel de titel van het kunstwerk als de naam van de artiest weer te geven.

Begin met het openen van Photoshop en maak een document van 80 × 80 px. Ik ga snel een nieuwe afbeelding maken en miniaturen opslaan om ze te evenaren. Vervolgens worden de items van de lijstweergave bijgewerkt. We moeten nog enkele elementen toevoegen.

Bekijk de onderstaande code en mijn voorbeeld om te zien wat ik bedoel.

[Voorbeeld live demo]

 
 
  
Wunderkit-taken
 
door Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
door Scott Hill
 
  
Forum-app voor Facebook
 
door Ionut Zamfir
 
  
tjilpen
 
door Sam Jones
 
 
 

De klassen voor ui-li-rubriek en ui-li-desc worden standaard toegevoegd aan de jQuery Mobile-stylesheet. Dit is vergelijkbaar met de afbeeldingsklasse ui-li-duim waarbij elke lijstweergavebalk automatisch wordt aangepast aan de hoogte van de afbeelding. Nu zou u vanaf hier meer kunnen bouwen op de frontend met animaties, pagina-effecten, stylesheets, enz.

Of u kunt beginnen met het bouwen van een back-endsysteem om nieuwe afbeeldingen te uploaden en automatisch miniaturen bij te snijden om op te nemen in de lijst. Er is zoveel flexibiliteit met jQuery Mobile dat je het bijna niet alleen als JavaScript-bibliotheek kunt labelen. Het is meer een volledig HTML5 / CSS / jQuery-raamwerk voor het bouwen van snelle en schaalbare mobiele apps.

Conclusie

Vanaf het moment dat dit artikel werd geschreven, heeft het team van jQuery Mobile officieel RC1.0 van de codebibliotheek uitgebracht. Dit betekent dat de meeste, zo niet alle, grote bugfixes zijn verbrijzeld en dat nu testers zich voorbereiden op een volledige release. Hierdoor zult u niet veel informatie op het web vinden.

Maar naarmate de maanden vorderden, zullen webontwikkelaars zeker de trend volgen. Mobiele applicaties en zelfs mobiele weblay-outs groeien in populariteit met de enorme toename van smartphones. Webontwikkelaars hebben niet de tijd om een ​​volledige programmeertaal te leren voor het bouwen van Android / iOS-apps. Aldus is jQuery Mobile een slank alternatief dat ondersteuning biedt voor een meerderheid van de software voor de mobiele industrie en blijft het elke dag groeien met een actieve ontwikkelaarsgemeenschap.