Som med hvilken som helst ny teknologi, er det ofte vanskelig å komme i gang.

Med denne frustrasjonen i tankene har vi satt sammen noen av mine håndigste tips, triks og kodestykker relatert til jQuery mobilbibliotek .

Fordi dette ikke er en fullstendig primer for bruk av biblioteket, vil vi hoppe over noen av de tingene som blir ganske åpenbare når du kommer i gang, og i stedet kommer rett til elementene som blir ganske frustrerende eller plagsomme.

Sørg også for å gi oss beskjed i kommentarene som du har funnet nyttig og av andre som du vet om det kan være nyttig.

1. En fullstendig grunnside

Jeg finner meg selv som trenger full oppslag for en grunnleggende side om og om igjen. Som sådan er her all koden du trenger for å sette opp en enkel enkeltside.

Header
Content goes here
Footer

2. Hvor skal du legge til tradisjonelle jQuery-anrop

Da jeg begynte å bruke denne fantastiske utvidelsen til jQuery, fant jeg umiddelbart at jeg ønsket å endre ting på siden før mobilplugg-modulen ble utløst.

Som det viser seg, er den anbefalte løsningen å ganske enkelt sette tradisjonelle jQuery-anrop før referansen som laster den mobile plugin-modulen. På denne måten har jQuery-kommandoen din sjansen til å kjøre før biblioteket lastes inn. Her er mønsteret som følger:

3. Deaktiver AJAX-navigasjon for alle koblinger samtidig

Så fantastisk som AJAX-navigasjon er det tider hvor du bare vil deaktivere den. Bruk denne delen av jQuery til å fortelle mobilbiblioteket ikke å bruke AJAX-navigasjon.

Plasser den etter referansen til jQuery-mobilbiblioteket i overskriften til siden. Biblioteket må med andre ord allerede lastes inn før denne koden refereres.

4. Stopp noen nøkkelelementer fra å bli avkortet

En funksjon i biblioteket (eller feil, avhengig av dine behov) er at den intelligent avkorter lange gjenstander for å passe inn i UI-elementene.

Jeg har funnet to situasjoner hvor dette kan være irriterende. Først i listeposter, hvor jeg foretrekker å se hele teksten. Og for det andre, i tekstteksten. Det virker når du har mer enn bare noen få tegn der nede, begynner det å bli avkortet med "...". Bruk denne enkle CSS til å overstyre begge disse standardinnstillingene.

For listeposter:

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

For bunntekstinnhold:

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

5. Bruk medieforespørsler til målrettede enheter

Et av de første spørsmålene jeg hadde med dette biblioteket var hvordan du målretter mot enheter i CSS (basert på skjermstørrelse). For eksempel ønsket jeg en to-kolonne layout for iPad og en enkelt kolonne for smartphones. Den absolutte beste måten å oppnå dette på er med media spørringer.

Med noen enkle medieforespørsler på plass, kan du raskt lage CSS målskjermstørrelser. Og med denne typen målretting kan vi raskt sette opp forskjellige oppsett basert på tilgjengelig skjermrom ved å stole på konvensjonelle CSS-teknikker.

To fantastiske ressurser for dette er:

• “ CSS-mediesøk og bruk av ledig plass , "CSS-triks;
• Hardboiled CSS3 Media Queries ," Tull og tøys.

6. Målplattformer med jQuery

Mye som vi kanskje vil utføre visse CSS for bestemte enheter, kan vi også bare kjøre jQuery på bestemte enheter. Her er en tilpasning av noen kode fra Snipplr som lar meg enkelt segmentere deler av jQuery å kjøre avhengig av brukerens 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. Bruk full stier for målene for form handling egenskaper

En sirkel på biblioteket ser ut til å være vanskelig å finne mål sider for å legge inn skjemaer til ... det vil si, med mindre du bruker den fullstendige banen fra roten til nettstedet.

For eksempel har jeg funnet ut at denne skjemaetiketten aldri finner sitt mål:

Mens en full bane som dette virker som forventet:

Sørg også for at resultatene fra skjemahåndtereren produserer en full, gyldig jQuery-mobilside, som vist i tips nr. 1.

8. Lag popup-dialoger

En praktisk funksjon i biblioteket er den innebygde popup- eller dialogboksfunksjonen. Sette opp denne praktiske funksjonen er død enkel. I utgangspunktet legger du til et attributt for å koble til, som følger: data-rel="dialog" .

Merk to ting. Først må målsiden være en fullblåst jQuery-mobilside, som beskrevet i tips nr. 1. For det andre vil dette bare fungere for eksterne sider; Det må være en fullstendig separat side for å fungere skikkelig.

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

Denne delen av koden har plass til to grunnleggende behov. Den første er å ha to knapper ved siden av hverandre. Heldigvis har biblioteket en innebygd kolonnestruktur som enkelt kan settes i bruk ved hjelp av et feltsett og de riktige klassene, som vist nedenfor. Den andre er å ha to knapper med forskjellige temaer. Denne koden er direkte fra dokumentasjonen , og jeg holder den praktisk for hyppig bruk.

Cancel
Submit

10. Opprett en kolonnestruktur på egen hånd

I mitt forsøk på å optimalisere en enkelt side for flere enheter, fant jeg meg selv å kombinere spørreskjemaene for media ovenfor med "kolonner i hvilken som helst rekkefølge" -teknikk.

Heldigvis regnet webutviklere for lenge siden hvordan de beveger seg rundt. Ved å kombinere denne teknikken med medieforespørsler, kan vi veldig enkelt sette opp ulike strukturer avhengig av skjermstørrelsen vi jobber med.

Stilling er alt legger ut et av de enkleste systemene å jobbe med.

Konklusjon

JQuery mobilbiblioteket er et blast å jobbe med. Det gir fantastiske resultater med svært liten innsats. Og vurderer det er fortsatt i alfa, det går bra til en god start. Forhåpentligvis vil disse raske tipsene holde deg i bevegelse fremover når du graver inn i dette nye biblioteket.

Skrevet utelukkende for WDD av Patrick McNeil. Han er freelance skribent, utvikler og designer. Spesielt elsker han å skrive om webdesign, trene folk på webutvikling og bygge nettsteder. Patricks siste bokprosjekt er Designerens netthåndbok ; lære om hans andre bøker på TheWebDesignersIdeaBook.com . Følg Patrick på Twitter @designmeltdown .

Hva synes du om jQuery Mobile-rammen? Hvilke nyttige kodestykker har du funnet nyttig?