Som med någon ny teknik är det ofta svårt att komma igång.

Med denna frustration i åtanke har vi sammanställt några av mina häftigaste tips, knep och kodprofiler relaterade till jQuery Mobile bibliotek .

Eftersom detta inte är en komplett primer för att använda biblioteket kommer vi att hoppa över några av de saker som blir ganska uppenbara när du börjar och istället kommer rakt på de saker som blir ganska frustrerande eller besvärliga.

Också var noga med att meddela oss i kommentarerna som du hittade användbara och av andra som du vet om det kan vara användbart.

1. En fullständig grundsida

Jag tycker att jag behöver den fullständiga markeringen för en grundläggande sida om och om igen. Som sådan är här all kod du behöver för att skapa en enkel enkel sida.

Header
Content goes here
Footer

2. Var kan man lägga till traditionella jQuery-samtal

När jag började använda denna fantastiska förlängning till jQuery, fann jag omedelbart att jag ville ändra saker på sidan innan mobil plugin-modulen utlöstes.

Som det visar sig är den rekommenderade lösningen att helt enkelt sätta traditionella jQuery-samtal före den referens som laddar mobilinplugningen. På så sätt har dina jQuery-kommandon en chans att springa innan biblioteket laddas. Här är mönstret att följa:

3. Inaktivera AJAX-navigering för alla länkar samtidigt

Så jättebra som AJAX-navigering är det tillfällen där du bara hellre skulle inaktivera den. Använd den här delen av jQuery för att berätta för mobilbiblioteket att inte använda AJAX-navigering.

Placera den efter hänvisningen till jQuery-mobilbiblioteket i sidhuvudet. Med andra ord måste biblioteket redan laddas innan den här koden refereras.

4. Stoppa några viktiga objekt från att styras

En funktion i biblioteket (eller fel, beroende på dina behov) är att det intelligent avkorkar långa föremål för att passa in i UI-element.

Jag har funnit två situationer där detta kan vara irriterande. Först i listobjekt, där jag föredrar att se hela texten. Och för det andra, i sidfoten. Det verkar när du har mer än bara några få tecken där nere, börjar det bli trunkerat med "...". Använd denna enkla CSS för att åsidosätta båda dessa standardvärden.

För listobjekt:

body .ui-li .ui-li-desc {white-space: normal;}

För sidfot:

body .ui-footer .ui-title {white-space: normal;}

5. Använd mediafrågor för att rikta enheter

En av de första frågorna jag hade med det här biblioteket var hur man riktar in enheter i CSS (baserat på skärmstorlek). Till exempel ville jag ha en layout med två kolumner för iPad och en enda kolumn för smartphones. Det absolut bästa sättet att uppnå detta är med mediafrågor.

Med några enkla mediefrågor på plats kan du snabbt göra skärmstorlekarna för CSS-mål. Och med denna typ av inriktning kan vi snabbt konfigurera olika layouter baserat på tillgängligt skärmutrymme genom att förlita sig på konventionella CSS-tekniker.

Två fantastiska resurser för detta är:

• ” CSS Media Queries och använda ledigt utrymme , "CSS-Tricks;
• Hardboiled CSS3 Media Queries ," Grejer och nonsens.

6. Målplattformar med jQuery

Så mycket som vi kanske vill utföra vissa CSS för vissa enheter, kanske vi kanske bara kör jQuery på specifika enheter. Här är en anpassning av någon kod från Snipplr Det låter mig enkelt segmentera delar av jQuery att köra beroende på användarens enhet.

 var deviceAgent = navigator.userAgent.toLowerCase();var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);if(agentID.indexOf("iphone")>=0){alert("iphone");}if(agentID.indexOf("ipod")>=0){alert("ipod");}if(agentID.indexOf("ipad")>=0){alert("ipad");}if(agentID.indexOf("android")>=0){alert("android");}

7. Använd fullständiga vägar för målen för formaktivitetsattribut

Ett prick i biblioteket verkar vara svårt att hitta målsidor för att skicka formulär till ... det vill säga, om du inte använder hela sökvägen från webbplatsens rot.

Jag har till exempel funnit att den här formulärtaggen aldrig hittar sitt mål:

En fullständig väg som denna fungerar som förväntat:

Se också till att resultaten från formulärhanteraren ger en full, giltig jQuery-mobilsida, som visas i tips # 1.

8. Skapa popup-dialogrutor

En praktisk funktion i biblioteket är den inbyggda popup- eller dialogrutan. Inställningen av denna praktiska funktion är död enkel. I princip lägger du till ett attribut för att länka till, enligt följande: data-rel="dialog" .

Observera två saker. Först måste målsidan vara en fullblåst jQuery-mobilsida, som beskrivs i tips # 1. För det andra kommer detta bara att fungera för externa sidor; Det måste vara en fullständig separat sida för att fungera korrekt.

9. En "Avbryt" + "Spara" -knappen combo

Denna bit av kod rymmer två grundläggande behov. Den första är att ha två knappar bredvid varandra. Lyckligtvis har biblioteket en inbyggd kolumnstruktur som enkelt kan sättas i bruk med hjälp av en fältetikett och de riktiga klasserna, enligt nedan. Den andra är att ha två knappar med olika teman. Denna kod är direkt från dokumentationen , och jag håller den till hands för frekvent användning.

Cancel
Submit

10. Skapa en kolumnstruktur på egen hand

I min strävan att optimera strukturera en enda sida för flera enheter hittade jag mig själv att kombinera ovanstående mediaquery-tricks med "kolumner i vilken ordning som helst" -teknik.

Lyckligtvis funderade webutvecklare för länge sedan hur man flyttar kolumner runt. Genom att kombinera denna teknik med mediefrågor kan vi mycket enkelt skapa olika strukturer beroende på vilken skärmstorlek vi arbetar med.

Positionen är allting lägger ut ett av de enklaste systemen att arbeta med.

Slutsats

Mobilbiblioteket jQuery är en bra idé att arbeta med. Det ger fantastiska resultat med mycket liten ansträngning. Och med tanke på att det fortfarande finns i alf, är det bra för en bra start. Förhoppningsvis kommer dessa snabba tips att hålla dig framåt när du gräver in i det här nya biblioteket.

Skriven uteslutande för WDD av Patrick McNeil. Han är frilansskribent, utvecklare och designer. I synnerhet älskar han att skriva om webbdesign, utbilda människor på webbutveckling och bygga webbplatser. Patrick senaste bokprojekt är Designerens webbhandbok ; lära sig om hans andra böcker på TheWebDesignersIdeaBook.com . Följ Patrick på Twitter @designmeltdown .

Vad tycker du om jQuery Mobile-ramen? Vilka praktiska kodfragment har du funnit användbart?