Nog niet zo lang geleden bracht het jQuery-team jQuery Mobile 1.2 uit. Deze nieuwe release heeft een aantal fantastische veranderingen! In dit artikel gaan we enkele van de nieuwe widgets bekijken die beschikbaar zijn voor ontwikkelaars, een blik werpen op wijzigingen die in bestaande widgets zijn aangebracht en een blik werpen op enkele belangrijke verbeteringen die van invloed kunnen zijn op uw jQuery Mobile-toepassing. Laten we beginnen, zullen we?

Allereerst moeten we de bits en bytes downloaden. Ga naar de downloadpagina van jQuery Mobile en download de optie die het beste aan uw behoeften voldoet. U kunt ook gewoon de onderstaande boilerplate-code gebruiken.

Bovendien is het misschien een goed moment om snel de Download Builder te bespreken die het jQuery Mobile-team aan het bouwen is. Het staat nog steeds in Alpha, maar het stelt je in staat om je download aan te passen om alleen de delen van jQuery Mobile op te nemen die je nodig hebt, en niets meer. U kunt specifieke gebeurtenissen, overgangen, formulierelementen of widgets uitsluiten die u niet interesseren. Het is bedoeld voor de ontwikkelaars die zich zeer zorgen maken over het maximale prestatieniveau van hun applicatie.

---

widgets

Het kloppende hart van elke jQuery Mobile-applicatie zijn de widgets. Het is ongetwijfeld het meest zichtbare deel van de pagina en het deel dat gebruikers op zo'n eenvoudige manier in staat stelt om met de pagina om te gaan. Het jQuery Mobile-team heeft talloze uren besteed aan het testen, bouwen en verfijnen van hun widgets om er zeker van te zijn dat ze het beste zijn wat ze kunnen zijn. In versie 1.2 heeft het team het echt uit het park geslagen met een widget waar ontwikkelaars om hebben gevraagd sinds het raamwerk voor het eerst werd uitgebracht: popup modals.

Pop-ups

Een popup-modaal is een klein gedeelte van de pagina dat andere delen van de pagina overlapt. Ze worden meestal gebruikt als tooltip of om foto's, kaarten en extra inhoud weer te geven. Deze informatie is meestal niet belangrijk genoeg om een ​​andere pagina te rechtvaardigen, maar het is nog steeds belangrijk dat deze op zichzelf moet worden weergegeven. De manier waarop jQuery Mobile 1.2 popups heeft geïmplementeerd, is perfect. Laten we leren hoe gemakkelijk het is om pop-ups toe te voegen aan een project.

Een korte opmerking, kortheidshalve: alle onderstaande codevoorbeelden gebruiken de volgende standaard HTML-indeling. De jQuery Mobile CSS- en JS-bestanden (inclusief jQuery) worden hotlinked met behulp van de jQuery CDN voor uw gemak.

Het toevoegen van een popup aan een pagina in uw applicatie is een proces in twee stappen. Eerst moet je een manier vinden om de pop-up te activeren. Dit is over het algemeen een link of knop, of iets waarmee de gebruiker te maken heeft. Om het element te activeren, voegen we het volgende kenmerk toe:

data-rel = "popup"

Ten tweede hebt u de inhoud nodig die wordt weergegeven. Dit kan variëren van een single div naar een menu, een het formulier, of zelfs foto's. Het inhoudselement krijgt een eigen kenmerk:

data-role = "popup"

Tot slot, voor eenvoudige linkknoppen, de href attribuut moet overeenkomen met de ID kaart van de inhoud die moet worden weergegeven. Laten we de volledige implementatie bekijken.

Open Popup 
 
Dit is een volledig standaard popup, geen opties ingesteld.
 

Wat u op de pagina ziet, moet er ongeveer zo uitzien:

tooltips

Nu je weet hoe je een pop-up maakt, laten we eens kijken naar andere mogelijkheden. Een veelgebruikt gebruik is een tooltip; helptekst of uitgebreide tekst die wordt weergegeven wanneer een gebruiker op een knop klikt. Stel de code hetzelfde in als eerder:

Meer te weten komen 
 
Je kwam er meer achter!.
 

Deze keer stylen we de resulterende inhoud met behulp van de e swatch van jQuery Mobile om het een aangenamere uitstraling te geven. Dit helpt ons te onthouden dat pop-ups eerste klas jQuery Mobile-burgers zijn en kunnen worden behandeld, net als al het andere op de pagina.

menu's

Laten we verder gaan met iets ingewikkelder: een menu. Dat is een populaire benadering van paginanavigatie. Geef de gebruiker een menu direct bij de hand. Dus hoe ziet dat eruit met pop-ups?

Menu 
 
 
Mijn menu
 
Onverbonden
 
Linked
 
Met tellen42
 
 

En de resulterende output zou op dit moeten lijken:

Je kunt ook de samenvouwbare lijsten van 1.2 gebruiken in pop-ups. Hier is een snel voorbeeld:

Genest Menu 
 
 
 
kleuren
 
 
Rood
 
Blauw
 
 
 
 
vormen
 
 
Cirkel
 
Plein
 
 
 
 

En de resultaten:

Het is de moeite waard om dat op te merken data-inset = "true" is vereist op de lijstweergave of de hoeken van uw lijst verschijnen. Probeer het en je zult het zien.

vormen

Een andere populaire UX-aanpak is om een ​​aanmeldingsformulier boven aan een pagina te tonen. Dat is nu mogelijk met pop-ups van jQuery Mobile. Hier is een eenvoudig gebruikersnaam / wachtwoord-formulier.

Log in 
 
 
Log in alstublieft
 Gebruikersnaam:  Wachtwoord:  Aanmelden 
 

Welke geeft u:

Pop-ups centreren zich standaard boven het object dat ze heeft geactiveerd. Er is een optioneel kenmerk dat u in de volgende drie voorbeelden ziet. Haar data-positie-to = "venster" en je past het toe op het element dat de pop-up activeert. Probeer dat toe te voegen aan de Log in knop hierboven om te zien wat er gebeurt.

dialogen

Een veel voorkomende behoefte aan webapplicaties is de mogelijkheid om met de gebruiker te communiceren. We hebben zojuist één aanpak bekeken: een inlogformulier. Maar soms moet u de gebruiker vragen stellen. Een dialoog is hiervoor een perfecte oplossing; en wat weet u, pop-ups hebben u gedekt! Dus hoe ziet die code eruit? Hier is een eenvoudig voorbeeld:

dialoog 
 
 
Pagina verwijderen?
 
 
 
Weet je zeker dat je deze pagina wilt verwijderen??
 
Deze actie kan niet ongedaan gemaakt worden.
 Nee Ja, verwijder het 
 

Noteer in de popup-inhoudcontainer nog een nieuw attribuut voor uw gebruik: data-overlay-theme = "a". Dit kenmerk is wat de gearceerde achtergrond van het dialoogvenster toepast. Het wordt beïnvloed door uw thema, dus wees voorzichtig wanneer u werkt met thema's die zijn gemaakt met ThemeRoller.

foto's

Ik kan het aantal keren dat ik heb gezien dat jQuery Mobile-ontwikkelaars vragen om een ​​betere manier om beeldgalerieën af te handelen niet tellen. Hoewel pop-ups niet de perfecte oplossing zijn voor grote aantallen afbeeldingen, zijn ze ideaal voor een handvol afbeeldingen die groter moeten worden bekeken. Nog beter, het is ongelooflijk eenvoudig; bekijken:

Foto 
 Dichtbij 

De bovenstaande code geeft je een elegante foto gecentreerd op het raam, inclusief een knop om het venster dicht te doen.

Hoe hebben ze dat gedaan? In de context van een pop-up, de anker tag heeft attributen die zich net iets anders gedragen dan op andere locaties op de pagina. In het bijzonder, de -Ui btn-right klasse plaatst de afbeelding in de hoek van de afbeelding in plaats van de zijkant, terwijl de data-icon en data-iconpos Met attributen kun je de knop net zo stylen als een gewone knop.

Je kunt je behoorlijk verleiden met pop-ups, inclusief, maar niet beperkt tot, het weergeven van inline video en zelfs interactieve kaarten. Controleer de jQuery Mobile-documentatie voor pop-ups en iframes.

Samenvouwbare lijstweergaven

Een andere geweldige nieuwe functie is de mogelijkheid om samenvouwbare sets met lijstweergaven te combineren. Noem ze 'inklapbare lijstweergaven' en je hebt een gloednieuwe widget in jQuery Mobile 1.2. Hoe werken ze? Ik ben blij dat je het vraagt. Maak eenvoudig elke gewenste lijst en verpak deze in een samenklapbare set. Samenvouwbare lijstweergaven ondersteunen ook meerdere lijsten - dus word gek!

 
Favoriete Spice Girl?
 
 
Chique
 
Eng
 
sportieve
 
Baby
 
Gember
 
 

De bovenstaande code zou resulteren in deze inklapbare lijstweergave:

---

verbeteringen

Naast nieuwe widgettypen biedt jQuery Mobile 1.2 een aantal nuttige verbeteringen aan bestaande functionaliteit. Laten we een paar van de waardevollere bekijken.

Wijzigingen in jQuery-ondersteuning

Een van de grootste verbeteringen in versie 1.2 is de toegevoegde ondersteuning voor jQuery 1.8. Dit brengt enkele aanzienlijke prestatieverhogingen met zich mee in de vorm van een volledig herschreven Sizzle.js (de selector-engine voor jQuery), samen met tal van andere verbeteringen.

De afweging is dat het jQuery Mobile-team besloot dat het tijd was voor ondersteuning voor zonsondergang voor jQuery 1.6. Dit kan ongelukkig zijn voor sommige mensen die nog steeds oudere versies van jQuery gebruiken, maar het is een eerlijke handel.

Lijstweergave Autodividers

Als je ooit een lijst met constant veranderende mensen, plaatsen of dingen in jQuery Mobile hebt moeten beheren, dan heb je waarschijnlijk een lastige code moeten schrijven om dynamische headers met lijstweergaven weer te geven. Afschuw dat je al die tijd hebt doorgebracht, omdat het jQuery Mobile-team het net zo eenvoudig maakte als een enkel kenmerk te laten vallen.

data-autodividers = "true"

Dat verandert deze lijst:

In:

Houd er rekening mee dat hiermee het sorteren, groeperen of filteren niet wordt beheerd. Voor dat soort functionaliteit, kunt u mijn jQuery Mobile Tinysort-plug-in proberen.

Alleen-lezen lijsten

jQuery Mobile biedt "alleen-lezen" lijstweergaven, maar het was moeilijk te zeggen dat ze niet klikbaar waren. Versie 1.2 verwijdert de lijstgradiënt, waardoor de rij een egale kleur krijgt. Dit zou uw gebruikers een beter beeld moeten geven.

Betere breedteaanpassingen op formulierelementen

Versie 1.2 lost een semi-vervelende kwestie op met formulierelementen, waarbij ze in sommige gevallen de volledige breedte van hun bovenliggende element niet zouden opnemen.

Extra apparaten toegevoegd

U hebt misschien gemerkt dat nieuwe apparaten bijna dagelijks worden toegevoegd. Het jQuery Mobile-team doet zijn best om zoveel mogelijk van deze apparaten te testen. Nieuw toegevoegd aan de A-lijst met platformladers zijn de volgende apparaten / besturingssystemen / browsers: iOS 6, Android 4.1 (Jellybean), Tizen, Firefox voor Android en Kindle Fire HD.

---

Volledige lijst met wijzigingen

U vindt een volledige lijst met de wijzigingen die zijn aangebracht voor versie 1.2 op het jQuery Mobile-blog.

Ik hoop dat enkele van deze verbeteringen zullen helpen om uw applicaties te verbeteren. Vergeet niet dat het jQuery Mobile-team aan jouw kant staat! Als u iets ziet waarvan u denkt dat het waardevol is, vraag het dan: maak een probleem in hun Github-repository en stel het voor. Beter nog, vork hun repo en voeg zelf wat code toe!