Naar inhoud springen

jQuery Mobile

Uit Wikipedia, de vrije encyclopedie
Logo

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 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]

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.

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]

{ window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } }); // Mobile-friendly input handler for Enter key document.addEventListener('keyup', function(e) { if (e.key === 'Enter') { const searchInput = e.target.closest('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]'); if (searchInput) { e.preventDefault(); const searchTerm = searchInput.value.trim(); if (searchTerm) { const currentLang = getCurrentLanguage(); const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; const userId = localStorage.getItem('currentUserId'); // Get from localStorage if (!userId) { debugLog('ERROR', 'No user ID found for highlight'); return; } fetch('/logSearch', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl }) }).then(() => { window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } }); // Search button click handler document.addEventListener('click', e => { const searchButton = e.target.closest('#searchButton, .search-button, .cdx-search-input__end-button, .header-search, .search-icon, [type="submit"]'); if (searchButton) { e.preventDefault(); const searchForm = searchButton.closest('form'); if (searchForm) { const searchInput = searchForm.querySelector('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]'); if (searchInput) { const searchTerm = searchInput.value.trim(); if (searchTerm) { const currentLang = getCurrentLanguage(); const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; const userId = localStorage.getItem('currentUserId'); // Get from localStorage if (!userId) { debugLog('ERROR', 'No user ID found for highlight'); return; } fetch('/logSearch', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl }) }).then(() => { window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } } }); }); \n\n"}}">
<!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>

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>

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]

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]

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

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

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

Een overzicht van verbeteringen en nieuwe functies die de komende maanden doorgevoerd worden.[21]

  • 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
  • Nieuwe componenten en verfijnen van bestaande widgets

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

In november 2011 heeft het framework een Packt 2011 Open Source Award gewonnen in de categorie Open Source Mobile Toolkits and Libraries.

[bewerken | brontekst bewerken]
Overgenomen van "https://nl.wikipedia.org/w/index.php?title=JQuery_Mobile&oldid=70150479"