title: JQuery Mobile
text: 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 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.
  
  Eigenschappen
   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
  
  Ontstaan
  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. Dit resulteert in een overzicht van browsers en platformen van hoge kwaliteit en met een groot marktaandeel waar de ontwikkeling op wordt gericht. 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.
  
  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.
  
  Opbouw
  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
  Het jQuery Mobile framework maakt gebruik van HTML5 data-attributen om widgets te configuren. Deze data-attributen kunnen in bijna ieder element worden gebruikt, een overzicht hiervan staat in de bibliotheek.
  
  Standaard paginaopbouw
  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.
  
  <!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").
  
  Lijstweergaven
  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. Er is een groot aantal typen lijstweergaven te vinden in het overzicht. 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
  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. Sliders moeten altijd in een form element geplaatst worden en alle elementen binnen dat formulier hebben een label nodig.
  
  <form>
       <label for="slider-0">Input slider:</label>
       <input type="range" name="slider" id="slider-0" value="25" min="0" max="100"  />
  </form>
  
  Knoppen
  Er zijn een aantal manieren 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. 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.
  
  <a href="#" data-role="button" data-icon="star" data-iconpos="left" >Star button</a>
  
  Thema's
  jQuery Mobile ondersteunt maximaal 26 verschillende thema's om toolbars, content en knoppen vorm te geven. 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.
  
  <div data-role="page" data-theme="a"></div>
  
  Pagina's koppelen
  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.
  
  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.
  
  Paginaovergangen
  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.
  
  <a href="index.html" data-transition="pop">I'll pop</a>
  
  Dialoogvensters
  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.
  
  <a href="foo.html" data-rel="dialog" data-rel= "back" data-transition="pop">Open dialog</a>
  
  Ervaren ontwikkelaars
  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.
  
  Versies
  In de onderstaande tabel staan alle uitgebrachte versies van jQuery Mobile.
  
  Browserondersteuning
  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).
  
  Niveau A
  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
  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
  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
  Een overzicht van verbeteringen en nieuwe functies die de komende maanden doorgevoerd worden.
  
  Versie 1.1
   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
   Nieuwe componenten en verfijnen van bestaande widgets
  
  Plugins
  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
  In november 2011 heeft het framework een Packt 2011 Open Source Award gewonnen in de categorie Open Source Mobile Toolkits and Libraries.
  
  Zie ook
  jQuery
  
  Verder lezen
  
  Externe links
   jQuery Mobile officiële website
   jQuery Mobile Gallery
   jQuery officiële website
  
  Software engineering