jQuery Mobile
jQuery Mobile is een JavaScript-framework voor smartphones en tablets dat momenteel wordt ontwikkeld door het jQuery-projectteam. De focus ligt op het ontwikkelen van een eenvoudig te implementeren en breed toegankelijke user interface bibliotheek die compatibel is met de grote verscheidenheid aan toestellen[1] die zijn ontstaan door de steeds groeiende smartphone- en tabletmarkt. jQuery Mobile is compatibel met andere frameworks en platformen zoals bijvoorbeeld PhoneGap.
Het jQuery Mobile framework vereenvoudigt de ontwikkeling van websites en applicaties voor mobiele toestellen en platformen. Waar eerder voor iedere smartphone of tablet een aparte, aangepaste versie gebouwd werd geeft jQuery Mobile nu de mogelijkheid slechts één website of applicatie te ontwikkelen die werkt op alle populaire browsers en platformen.[2]
Eigenschappen
[bewerken | brontekst bewerken]- Gebouwd op de kern van jQuery voor herkenbare en consistente jQuery syntaxis en een lage leercurve
- Maakt gebruik van de broncode en patronen van jQuery UI
- Werkt op alle populaire smartphone-, tablet-, e-reader- en desktopplatformen en moderne (mobiele) browsers: iOS, Android, BlackBerry OS, PalmOS, WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Opera Mini, Firefox Mobile, Kindle, Nook
- Ondersteunt door de benadering van progressive enhancement op oudere platformen en browsers de kerninhoud en -functionaliteit en biedt op nieuwe platformen en browsers een gebruikersbeleving die gelijk is aan een native applicatie
- Hoge snelheid door een kleine bestandsomvang en minimale afhankelijkheid van afbeeldingen
- Modulaire architectuur voor het bouwen van geoptimaliseerde applicaties met specifieke componenten
- Snelle en eenvoudige configuratie van pagina's en handelingen door gebruik van HTML5 markup
- Gebruik van responsive webdesign technieken en hulpmiddelen maakt automatisch schalen van smartphone tot desktop mogelijk
- Krachtig Ajax-gedreven navigatiesysteem met geanimeerde paginaovergangen
- Geoptimaliseerd voor assistieve technologieën zoals schermlezers als VoiceOver in iOS
- Uniforme en platformonafhankelijke UI widgets die zijn geoptimaliseerd voor touchscreens
- Gebruik van thema's om snel een hoogwaardige gebruikersbeleving te creëren en ThemeRoller om eenvoudig nieuwe thema's aan te maken[3]
Ontstaan
[bewerken | brontekst bewerken]In 2009 doen John Resig en zijn team in het kader van de ontwikkeling van TestSwarm onderzoek naar het testen van JavaScript op mobiele browsers. Webontwikkeling voor mobiele apparaten is een opkomend thema binnen de gemeenschap en wint snel aan populariteit. Het team werkt hard aan het bepalen van de strategie en richting die het jQuery project op gaat. Het onderzoek begint met een simpele doelstelling: zorgen dat jQuery werkt op alle populaire mobiele browsers en platformen.[4] Dit resulteert in een overzicht van browsers en platformen van hoge kwaliteit en met een groot marktaandeel waar de ontwikkeling op wordt gericht.[5] De kern van jQuery wordt aangepast en geschikt gemaakt om te werken op mobiele browsers. Daarnaast wordt gewerkt aan de introductie van een framework voor een complete en uniforme gebruikersinterface voor mobiele apparaten. Op 11 augustus 2010 gaat het jQuery Mobile project van start.[6]
De oorspronkelijke matrix met browsers en platformen wordt in de loop van het project aangepast. Door het toepassen van progressive enhancement krijgt iedere gebruiker toegang tot dezelfde functionaliteit. Oudere browsers geven de basisfunctionaliteit weer terwijl gebruikers met een moderne browser een meer geavanceerde en verbeterde versie van de website te zien krijgen. Het meest recente overzicht van ondersteunde browsers en platformen is te vinden onder browserondersteuning.[7]
Opbouw
[bewerken | brontekst bewerken]Iedere website die jQuery Mobile gebruikt is min of meer hetzelfde opgebouwd. In de volgende paragrafen wordt omschreven hoe basisfunctionaliteit aan een jQuery Mobile website kan worden toegevoegd.
Data-attribute
[bewerken | brontekst bewerken]Het jQuery Mobile framework maakt gebruik van HTML5 data-attributen om widgets te configuren.[8] Deze data-attributen kunnen in bijna ieder element worden gebruikt, een overzicht hiervan staat in de bibliotheek.[9]
Standaard paginaopbouw
[bewerken | brontekst bewerken]Een standaard jQuery Mobile document is als volgt opgebouwd. In de head past de metatag viewport de breedte van de pagina aan de schermbreedte van het toestel aan en wordt verwezen naar de jQuery en jQuery Mobile bibliotheken en stylesheets. In de body wordt een div element met data-role="page" gebruikt om een nieuwe pagina te definiëren. Daarbinnen kunnen optioneel een header (date-role="header") en ruimte voor content (data-role="content") worden toegevoegd.[8]
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Een HTML document kan meerdere data-role="page" elementen, en daarmee dus meerdere pagina's, bevatten, hierdoor hoeft er slechts een bestand geladen te worden. Binnen het bestand kan naar een andere pagina verwezen worden door het gebruik van "#" met de ID (bijvoorbeeld href="#second").[10]
Lijstweergaven
[bewerken | brontekst bewerken]jQuery Mobile bevat een set veelgebruikte lijstweergaven die met data-role="listview" worden toegevoegd. Door data-inset="true" toe te voegen wordt de lijst weergegeven als een blok met ronde hoeken en rondom een marge. Het attribuut data-filter="true" zorgt voor een dynamische zoekfunctie.[8] Er is een groot aantal typen lijstweergaven te vinden in het overzicht.[11] De volgende code geeft een eenvoudige lijst weer.
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
Sliders
[bewerken | brontekst bewerken]Het framework biedt een uitgebreide set van form elementen die automatisch worden omgezet in touch-geoptimaliseerde widgets. De onderstaande code laat een slider zien op basis van de nieuwe HTML5 attribuut type="range", een data-role attribuut is niet nodig.[8][12] Sliders moeten altijd in een form element geplaatst worden en alle elementen binnen dat formulier hebben een label nodig.[13]
<form>
<label for="slider-0">Input slider:</label>
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
</form>
Knoppen
[bewerken | brontekst bewerken]Er zijn een aantal manieren[14] om knoppen te maken. Bij de onderstaande manier wordt een link omgevormd naar een knop door data-role="button" aan het element toe te voegen.[8] Er kan optioneel een icon aan de knop worden toegevoegd door het attribuut data-icon te gebruiken, de positie ervan kan worden bepaald door het attribuut data-iconpos toe te voegen.[15]
<a href="#" data-role="button" data-icon="star" data-iconpos="left" >Star button</a>
Thema's
[bewerken | brontekst bewerken]jQuery Mobile ondersteunt maximaal 26 verschillende thema's om toolbars, content en knoppen vorm te geven.[8] Het "data-theme" attribuut vertelt jQuery Mobile welk thema gebruikt moet worden. Het toevoegen van data-theme="e" aan een van de widgets (pagina, header, lijst, slider, knop) zal die elementen geel weergeven. Standaard kan gekozen worden uit thema A t/m E om stijlen te combineren.
<a href="#" data-role="button" data-icon="star" data-theme="a">Button</a>
Het toevoegen van een thema aan een pagina zorgt dat alle widgets daarbinnen het thema overerven. Headers zijn standaard thema A en erven niet over. De ThemeRoller kan gebruikt worden om zelf een thema te ontwikkelen.[16]
<div data-role="page" data-theme="a"></div>
Pagina's koppelen
[bewerken | brontekst bewerken]Een HTML document kan uit meerdere pagina's bestaan, jQuery laat bij het laden de eerste pagina (data-role="page") zien die het in het bestand tegenkomt. Als een link in een document verwijst naar een anker (#foo) zoekt het framework naar een pagina met die ID, waarna die wordt geladen. Als het attribuut data-rel="back" aan een link wordt toegevoegd wordt terugverwezen naar de pagina waar de gebruiker vandaan kwam. Met het attribuut data-add-back-btn="true" kan er een terugknop aan de pagina of in de header worden toegevoegd.[17]
Om geanimeerde paginaovergangen te activeren worden alle links die verwijzen naar een pagina geladen via Ajax. De gebruiker ziet een spinner en als de actie succesvol is wordt de paginacontent toegevoegd aan de DOM. De pagina wordt geopend met een geanimeerde paginaovergang. Lukt dit niet wordt er een foutmelding getoond. Links die verwijzen naar andere domeinen of die rel="external", data-ajax="false" of target-attributen hebben worden niet met Ajax geladen. In plaats daarvan worden deze links nieuw ingeladen zonder geanimeerde overgang.[10]
Paginaovergangen
[bewerken | brontekst bewerken]Het framework bevat een set van zes op CSS gebaseerde overgangseffecten die kunnen worden toegepast op iedere pagina met Ajax-navigatie. Standaard past het framework de rechts-naar-links-overgang toe maar als het attribuut data-transition wordt toegevoegd aan een link kan een aangepast effect gebruikt worden. Als op de terugknop wordt gedrukt wordt automatisch het omgekeerde effect gebruikt.[18]
<a href="index.html" data-transition="pop">I'll pop</a>
Dialoogvensters
[bewerken | brontekst bewerken]Iedere pagina kan als dialoogvenster worden weergegeven door het attribuut data-rel="dialog" toe te voegen aan de link van een anker. Het framework stelt automatisch ronde hoeken, marges en een donkere achtergrond in zodat het dialoog boven de pagina zweeft. Standaard opent het venster met "pop" effect, door het attribuut data-transition toe te voegen kan ook worden gekozen voor "slideup" of "flip". Om een cancelknop aan het venster toe te voegen kan het attribuut data-rel="back" worden toegevoegd.[19]
<a href="foo.html" data-rel="dialog" data-rel= "back" data-transition="pop">Open dialog</a>
Ervaren ontwikkelaars
[bewerken | brontekst bewerken]Voor de ontwikkelaars die geen gebruik willen maken van data-attribuut markup om widgets te configureren is er de mogelijkheid om in JavaScript direct plugins aan te roepen. Voor hen heeft jQuery Mobile informatie over configuratie, events en methoden die gebruikt kunnen worden bij de ontwikkeling. Daarnaast is er informatie te vinden over het scripten van pagina's, het genereren van dynamische pagina's en het bouwen van applicaties met PhoneGap.[8]
Versies
[bewerken | brontekst bewerken]In de onderstaande tabel staan alle uitgebrachte versies van jQuery Mobile.[20]
| Versie | Releasedatum |
|---|---|
| 1.3.0 Final | 20 januari 2013 |
| 1.3.0 Beta | 14 januari 2013 |
| 1.2.0 Final | 2 oktober 2012 |
| 1.1.0 RC1 | 28 februari 2012 |
| 1.0.1 | 26 januari 2012 |
| 1.0 | 16 november 2011 |
| RC3 | 13 november 2011 |
| RC2 | 19 oktober 2011 |
| RC1 | 29 september 2011 |
| Beta 3 | 8 september 2011 |
| Beta 2 | 3 augustus 2011 |
| Beta 1 | 20 juni 2011 |
| Alpha 4.1 | 7 april 2011 |
| Alpha 4 | 31 maart 2011 |
| Alpha 3 | 4 februari 2011 |
| Alpha 2 | 21 november 2010 |
| Alpha 1 | 16 oktober 2010 |
Browserondersteuning
[bewerken | brontekst bewerken]jQuery Mobile wordt ondersteund op de grote meerderheid van alle moderne desktop-, smartphone-, tablet- en e-reader-platformen. Door de focus op universele toegankelijkheid en brede ondersteuning voor alle populaire platformen worden ook oudere toestellen en browsers ondersteund. Er worden drie niveaus van platformondersteuning gebruikt: A (volledige ondersteuning), B (volledige ondersteuning zonder Ajax) en C (basis).[7]
Niveau A
[bewerken | brontekst bewerken]Volledige ondersteuning met Ajax-geanimeerde paginaovergangen. Een browser die minimaal in staat is gebruik te maken van mediaquery's (een vereiste voor jQuery Mobile). Deze browsers worden uitgebreid getest maar kunnen in sommige gevallen niet een pixel-perfecte weergave tonen. De weergave is afhankelijk van hoe de CSS door het toestel in combinatie met het platform wordt gerenderd.
- Apple iOS 3.2 - 5.0
- Android 2.1 - 2.3. Functioneert op 1.5 en 1.6 maar uitvoering kan traag zijn.
- Android Honeycomb
- Windows Phone 7 - 7.5
- Blackberry 6.0
- Blackberry 7
- Blackberry Playbook 1.0.1 / 1.0.5
- Palm WebOS 1.4 - 2.0
- Palm WebOS 3.0
- Firebox Mobile (Beta)
- Opera Mobile 11.0
- Meego 1.2
- Kindle 3 and Fire
- Chrome Desktop 11 - 15
- Firefox Desktop 4 - 8
- Internet Explorer 7 - 9. Kleine CSS problemen.
- Opera Desktop 10 - 11
Niveau B
[bewerken | brontekst bewerken]Verbeterde ondersteuning zonder Ajax-navigatie. Een browser die in staat is jQuery Mobile uit te voeren maar niet genoeg marktaandeel heeft om gegarandeerd getest te worden. Er worden bug fixes uitgebracht om deze browsers te helpen.
- Blackberry 5.0
- Opera Mini 5.0 - 6.0
- Nokia Symbian^3
Niveau C
[bewerken | brontekst bewerken]Basis HTML ondersteuning. Een browser die niet in staat is gebruik te maken van mediaquery's. Er wordt geen scripting uitgevoerd en pagina's worden weergegeven in HTML en eenvoudige CSS. Alle oudere toestellen die geen mediaquery's ondersteunen krijgen standaard de niveau C-stempel.
- Blackberry 4.x
- Windows Mobile
Roadmap
[bewerken | brontekst bewerken]Een overzicht van verbeteringen en nieuwe functies die de komende maanden doorgevoerd worden.[21]
Versie 1.1
[bewerken | brontekst bewerken]- Ondersteuning van AMD, een CommonJS standaard die steeds breder wordt toegepast
- Vast menubalken die niet meer meebewegen tijdens het scrollen
- Verbeterde AJAX paginaovergangen: sneller en soepeler
Versie 1.2
[bewerken | brontekst bewerken]- Nieuwe componenten en verfijnen van bestaande widgets
Plugins
[bewerken | brontekst bewerken]Naast standaard de widgets van jQuery Mobile is er een breed scala aan plugins te vinden die diverse functionaliteit toevoegen aan jQuery Mobile.
- jQuery Mobile Pagination Plugin
- Photo Swipe
Prijzen
[bewerken | brontekst bewerken]In november 2011 heeft het framework een Packt 2011 Open Source Award gewonnen in de categorie Open Source Mobile Toolkits and Libraries.
Zie ook
[bewerken | brontekst bewerken]Verder lezen
[bewerken | brontekst bewerken]- Bai, Giulio (June 23, 2011). jQuery Mobile First Look, 1st. Packt Publishing, p. 216. ISBN 1849515905.
- Broulik, Brad (30 november 2011). Pro jQuery Mobile, 1st. Apress, p. 350. ISBN 1430239662.
- David, Matthew (21 september 2011). HTML5 Mobile Websites: Turbocharging HTML5 with jQuery Mobile, Sencha Touch, and Other Frameworks, 1st. Focal Press, p. 250. ISBN 024081813X. Gearchiveerd op 7 april 2013.
- Doyle, Matt (August 6, 2011). Master Mobile Web Apps with jQuery Mobile, 1st. Elated Communications Ltd, p. 345. ISBN 9780956921802. Gearchiveerd op 7 juni 2023.
- Firtman, Maximiliano (January 31, 2012). jQuery Mobile: Up and Running, 1st. O'Reilly Media, p. 250. ISBN 1449397654.
- Holzner, Steven E. (January 2, 2012). Sams Teach Yourself jQuery Mobile in 10 Minutes, 1st. Sams, p. 240. ISBN 0672335573.
- Reid, Jon (July 7, 2011). jQuery Mobile, 1st. O'Reilly Media, p. 130. ISBN 1449306683.
Externe links
[bewerken | brontekst bewerken]- ↑ Introduction. The jQuery Project. Gearchiveerd op 24 december 2011. Geraadpleegd op 30 december 2011.
- ↑ jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets. The jQuery Project. Geraadpleegd op 30 december 2011.
- ↑ Key Features. The jQuery Project. Gearchiveerd op 17 december 2010.
- ↑ Testing Mobile JavaScript. John Resig. Geraadpleegd op 29 december 2011.
- ↑ Original Graded Browser Matrix. The jQuery Mobile Project. Gearchiveerd op 25 december 2011. Geraadpleegd op 29 december 2011.
- ↑ Announcing the jQuery Mobile Project. John Resig. Geraadpleegd op 30 december 2011.
- ↑ a b Mobile Graded Browser Support. The jQuery Mobile Project. Geraadpleegd op 29 december 2011.
- ↑ a b c d e f g Quick start guide. The jQuery Mobile Project. Gearchiveerd op 30 december 2011. Geraadpleegd op 29 december 2011.
- ↑ Data Attributes. The jQuery Mobile Project. Gearchiveerd op 3 januari 2012. Geraadpleegd op 29 december 2011.
- ↑ a b Anatomy of a Page. The jQuery Mobile Project. Gearchiveerd op 30 december 2011. Geraadpleegd op 29 december 2011.
- ↑ Lists. The jQuery Mobile Project. Gearchiveerd op 3 december 2010. Geraadpleegd op 29 december 2011.
- ↑ Slider. The jQuery Mobile Project. Gearchiveerd op 30 december 2011. Geraadpleegd op 29 december 2011.
- ↑ Forms. The jQuery Mobile Project. Gearchiveerd op 7 januari 2012. Geraadpleegd op 29 december 2011.
- ↑ Button basics. The jQuery Mobile Project. Gearchiveerd op 30 december 2011. Geraadpleegd op 29 december 2011.
- ↑ Button icons. The jQuery Mobile Project. Gearchiveerd op 20 december 2011. Geraadpleegd op 29 december 2011.
- ↑ Themes. The jQuery Mobile Project. Gearchiveerd op 22 december 2011. Geraadpleegd op 29 december 2011.
- ↑ Linking pages. The jQuery Mobile Project. Gearchiveerd op 31 december 2011. Geraadpleegd op 29 december 2011.
- ↑ Transitions. The jQuery Mobile Project. Gearchiveerd op 30 december 2011. Geraadpleegd op 29 december 2011.
- ↑ Dialogs. The jQuery Mobile Project. Gearchiveerd op 23 december 2011. Geraadpleegd op 29 december 2011.
- ↑ Announcing jQuery Mobile 1.0. Todd Parker. Geraadpleegd op 29 december 2011.
- ↑ Upcoming Releases: 1.0.1, 1.1, and beyond. Todd Parker. Geraadpleegd op 21 januari 2012.