För inte så länge släppte jQuery-teamet jQuery Mobile 1.2. Den här nya versionen har några fantastiska förändringar! I den här artikeln kommer vi att granska några av de nya widgets som finns tillgängliga för utvecklare, titta på ändringar gjorda i befintliga widgets och titta på några få effektiva förbättringar som kan påverka din jQuery Mobile-applikation. Låt oss komma igång, ska vi?

För det första måste vi ladda ner bitarna och byte. Gå vidare till jQuery Mobile nedladdningssidan och ladda ner det alternativ som bäst motsvarar dina behov. Alternativt kan du bara använda pannkodskoden som anges nedan.

Dessutom kan det vara en bra tid att snabbt diskutera Download Builder som jQuery Mobile-teamet bygger. Det är fortfarande i Alpha, men det låter dig anpassa din nedladdning för att bara inkludera de delar av jQuery Mobile som du behöver, och ingenting mer. Du kan utesluta specifika händelser, övergångar, formulärelement eller widgets som du inte bryr dig om. Det är tänkt för utvecklarna som är oroade för att fånga den högsta prestandan utifrån hans eller hennes ansökan.

---

widgets

Det slående hjärtat av alla jQuery Mobile-applikationer är dess widgets. Förmodligen är de den mest synliga delen av sidan, och den del som tillåter användare att interagera med sidan på så enkelt sätt. Teamet jQuery Mobile har spenderat otaliga timmar testning, byggnad och raffinering av sina widgets för att se till att de är de bästa de kan vara. I version 1.2 har laget verkligen slagit det ur parken med en widget som utvecklare har bett om sedan ramverket släpptes för första gången: popup-modeller.

popups

En popupmodal är en liten del av sidan som överlägger andra delar av sidan. De brukar användas som verktygstips, eller för att visa foton, kartor och ytterligare innehåll. Denna information är vanligtvis inte tillräckligt viktig för att motivera en annan sida, men det är fortfarande viktigt att visa sig själv. Det sätt på vilket jQuery Mobile 1.2 har implementerat popup-filer är perfekt. Låt oss lära oss hur lätt det är att lägga till popup-fönster till ett projekt.

En snabb notering, för korthetens skull: Alla kodprover nedan kommer att använda följande boilerplate HTML. JQuery Mobile CSS och JS-filerna (inklusive jQuery) är hotlinked med jQuery CDN för din bekvämlighet.

Att lägga till en popup till en sida i din ansökan är en tvåstegsprocess. Först behöver du några sätt att utlösa popupen. Det här är i allmänhet en länk, eller en knapp eller något som användaren interagerar med. För att utlösa element lägger vi till följande attribut:

data rel = "popup"

För det andra behöver du innehållet som ska visas. Detta kan sträcka sig från en enda div till a meny, en form, eller till och med bilder. Innehållselementet får sitt eget attribut:

data role = "popup"

Slutligen, för enkla länkknappar, href attributet måste motsvara id av innehållet som ska visas. Låt oss granska det fullständiga genomförandet.

Öppna popup 
 
Detta är en helt grundläggande popup, inga alternativ inställda.
 

Vad du ser på sidan borde se något liknande det här:

verktygstips

Nu när du vet hur man skapar en popup, låt oss titta på andra möjligheter. En vanlig användning är ett verktygstips; hjälptext eller utökad text som visas när en användare klickar på en knapp. Ställ in koden på samma sätt som tidigare:

Få reda på mer 
 
Du fick reda på mer!.
 

Den här gången stylar vi det resulterande innehållet med e swatch från jQuery Mobile för att ge det ett trevligare utseende. Det hjälper oss att komma ihåg att popup-filer är förstklassiga jQuery Mobile-medborgare, och kan behandlas precis som allt annat på sidan.

menyer

Låt oss gå vidare till något lite mer komplicerat: en meny. Det är ett populärt sätt att navigera på sidan. Ge användaren en meny direkt vid sina fingertoppar. Så hur ser det ut med popup-fönster?

Meny 
 
 
Min Meny
 
olänkad
 
kopplat
 
Med räkning42
 
 

Och den resulterande produktionen ska likna detta:

Du kan också använda 1.2: s hopfällbara listor i popup-fönster. Här är ett snabbt exempel:

Nested Menu 
 
 
 
Färger
 
 
Röd
 
Blå
 
 
 
 
former
 
 
Cirkel
 
Fyrkant
 
 
 
 

Och resultaten:

Det är värt att notera det data infälld = "true" krävs på Listvy eller hörnen på din lista kommer att dyka upp. Prova och du kommer att se.

formulär

Ett annat populärt UX-tillvägagångssätt är att visa ett inloggningsformulär som svävar över toppen av en sida. Det är nu möjligt med jQuery Mobile popup-fönster. Här är ett enkelt användarnamn / lösenordsformulär.

Logga in 
 
 
Var god logga in
 Användarnamn:  Lösenord:  Logga in 
 

Vilket ger dig:

Som standard centrerar popuparna sig över objektet som utlöste dem. Det finns ett valfritt attribut som du ser i de följande tre exemplen. Dess uppgifter-ställning-to = "fönster" och du applicerar den till det element som utlöser popupen. Försök lägga till det i Logga in knappen ovan för att se vad som händer.

dialog~~POS=TRUNC

Ett vanligt behov av webbapplikationer är möjligheten att interagera med användaren. Vi har bara granskat ett tillvägagångssätt: ett inloggningsformulär. Men ibland måste du uppmana användaren med frågor. En dialogruta är en perfekt lösning för detta; och vad vet du, popup har du täckt! Så hur ser den koden ut? Här är ett enkelt exempel:

Dialog 
 
 
Ta bort sida?
 
 
 
Är du säker på att du vill radera den här sidan?
 
Den här åtgärden kan inte ångras.
 Nej Ja, radera det 
 

I popup-innehållsbehållaren noterar du ett annat nytt attribut för din användning: dataöverlagring-tema = "a". Det här attributet är vad som gäller den skuggade bakgrunden till dialogrutan. Det påverkas av ditt tema, så var försiktig när du arbetar med teman skapade med ThemeRoller.

foton

Jag kan inte räkna antalet gånger jag har sett jQuery Mobile-utvecklare begär ett bättre sätt att hantera bildgallerier. Medan popup-filer inte är den perfekta lösningen för ett stort antal bilder, är de bra för en handfull bilder som måste ses större. Ännu bättre är det oerhört enkelt; Kolla in det:

Foto 
 Stänga 

Ovanstående kod ger dig ett elegant foto centrerat till fönstret, inklusive en nära fönsterknapp.

Hur gjorde de det? Inom ramen för en popup, den ankare taggen har attribut som uppför sig något annorlunda än när de används i andra platser på sidan. Specifikt ui-BTN höger klass placerar bilden i hörnet av bilden istället för sidan, medan uppgifter-icon och data iconpos attribut kan du ställa in knappen precis som du skulle ha en vanlig knapp.

Du kan bli ganska snygg med popup-fönster inklusive, men inte begränsat till, visning av inline-video och till och med interaktiva kartor. Kontrollera jQuery Mobile-dokumentationen för popup-fönster och iframes.

Foldbara listvisningar

En annan stor ny funktion är möjligheten att kombinera hopfällbara uppsättningar med listvisningar. Ring dem "Foldbara listvisningar" och du har en helt ny widget i jQuery Mobile 1.2. Hur fungerar de? Jag är glad att du frågade. Skapa bara en lista du vill, och lägg den i en hopfällbar uppsättning. Sammanfattade listvisningar stöder också flera listor - så bli galen!

 
Favorit Spice Girl?
 
 
Flott
 
Skrämmande
 
Sportig
 
Bebis
 
Ingefära
 
 

Koden ovan skulle resultera i denna sammanfogningsbara listvy:

---

förbättringar

Förutom nya widgettyper, ger jQuery Mobile 1.2 ett antal användbara förbättringar till befintlig funktionalitet. Låt oss ta en titt på några av de mer värdefulla.

jQuery Support ändringar

En av de största förbättringarna i version 1.2 är det extra stödet för jQuery 1.8. Detta ger några betydande prestandaökningar i form av en helt omskriven Sizzle.js (väljarmotorn för jQuery), tillsammans med många andra förbättringar.

Avvägningen är att jQuery Mobile-laget bestämde att det var dags att solnedgången stöder jQuery 1.6. Det kan vara olyckligt för vissa människor där ute som fortfarande använder äldre versioner av jQuery, men det är en rättvis handel.

Listavisning Autodividers

Om du någonsin har behövt hantera en lista över ständigt föränderliga personer, platser eller saker i jQuery Mobile, har du förmodligen fått skriva en knepig kod för att visa dynamiska listvyhuvuden. Bummer som du spenderade hela tiden, eftersom jQuery Mobile-teamet gjorde det lika enkelt som att släppa i en enda egenskap.

data autodividers = "true"

Det gör denna lista:

In i:

Observera att det här inte klarar av sortering, gruppering eller filtrering. För den typen av funktionalitet, överväga att prova mitt jQuery Mobile Tinysort-plugin.

Endast läsartiklar

jQuery Mobile erbjuder "läs-bara" listvisningar, men det var svårt att säga att de inte kunde klickas. Version 1.2 tar bort listgradienten, vilket gör raden en blank färg. Detta borde ge en bättre visuell signal till dina användare.

Bättre breddjusteringar på formulärelement

Version 1.2 fixar en semi-irriterande fråga med formelement, varigenom de inte skulle ta upp hela bredden av deras moderelement i vissa fall.

Ytterligare enheter tillagda

Du kanske har märkt att nya enheter läggs till nästan varje dag. JQuery Mobile-teamet gör sitt bästa för att testa mot så många av dessa enheter som möjligt. Nyligen lagt till listan A-plattformen är följande enheter / operativsystem / webbläsare: iOS 6, Android 4.1 (Jellybean), Tizen, Firefox för Android och Kindle Fire HD.

---

Full lista över ändringar

Du kan hitta en komplett lista över de ändringar som gjorts för version 1.2 på jQuery Mobile-bloggen.

Jag hoppas att några av dessa förbättringar kommer att bidra till att förbättra dina applikationer. Kom ihåg att jQuery Mobile-teamet är på din sida! Om du ser något du tycker är värdefull, fråga efter det: skapa ett problem i deras Github-arkiv och föreslå det. Bättre än, gaffel deras repo och lägg till lite kod själv!