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]
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]
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.
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]
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]
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>
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>
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>
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>
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]
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>
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>
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]
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 |
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]
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.
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.
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.
Een overzicht van verbeteringen en nieuwe functies die de komende maanden doorgevoerd worden.[21]
Naast standaard de widgets van jQuery Mobile is er een breed scala aan plugins te vinden die diverse functionaliteit toevoegen aan jQuery Mobile.
In november 2011 heeft het framework een Packt 2011 Open Source Award gewonnen in de categorie Open Source Mobile Toolkits and Libraries.