Som med enhver ny teknologi er det ofte den sværeste del at komme i gang.

Med denne frustration i tankerne har vi sammensat nogle af mine handyste tips, tricks og kodeuddrag relateret til jQuery Mobile bibliotek .

Fordi dette ikke er en komplet primer til brug af biblioteket, vil vi springe over nogle af de ting, der bliver ret oplagte, når du kommer i gang, og i stedet kommer direkte til de ting, der bliver temmelig frustrerende eller besværlige.

Sørg også for at lade os vide i de kommentarer, som du har fundet nyttige, og af andre, som du ved, kan være nyttige.

1. En komplet grundlæggende side

Jeg finder mig selv brug for den fulde markering for en grundlæggende side igen og igen. Som sådan er her al den kode, du skal bruge til at oprette en grundlæggende enkelt side.

Header
Content goes here
Footer

2. Hvor skal du tilføje traditionelle jQuery-opkald

Da jeg begyndte at bruge denne fantastiske udvidelse til jQuery, fandt jeg straks mig selv, der ville ændre ting på siden, før mobil plug-in blev udløst.

Som det viser sig, er den anbefalede løsning simpelthen at sætte traditionelle jQuery-opkald inden den reference, der indlæser den mobile plug-in. På denne måde har jQuery-kommandoerne en chance for at køre, før biblioteket læses. Her følger mønsteret:

3. Deaktiver AJAX navigation for alle links på én gang

Så fantastisk som AJAX navigation er der tidspunkter, hvor du bare vil deaktivere den. Brug denne bit af jQuery til at fortælle mobilbiblioteket ikke at bruge AJAX navigation.

Placer det efter henvisningen til jQuery-mobilbiblioteket i sidens overskrift. Med andre ord skal biblioteket allerede indlæses, før denne kode henvises.

4. Stop nogle nøgleelementer fra at blive afkortet

En funktion i biblioteket (eller fejl afhængigt af dine behov) er, at det intelligent afkorter lange emner, så de passer til UI-elementer.

Jeg har fundet to situationer, hvor dette kan være irriterende. Først i listeposter, hvor jeg foretrækker at se den fulde tekst. Og for det andet, i footer-teksten. Det ser ud til, at når du har mere end blot et par tegn der nede, begynder det at blive afkortet med "...". Brug denne simple CSS til at tilsidesætte begge disse standardindstillinger.

For lister:

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

Til footer indhold:

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

5. Brug medieforespørgsler til at målrette enheder

Et af de første spørgsmål jeg havde med dette bibliotek var hvordan man målretter enheder i CSS (baseret på skærmstørrelse). For eksempel ønskede jeg et to-kolonne layout til iPad og en enkelt kolonne for smartphones. Den absolut bedste måde at opnå dette på er medieforespørgsler.

Med nogle enkle medieforespørgsler på plads kan du hurtigt lave CSS målskærmstørrelser. Og med denne type målretning kan vi hurtigt oprette forskellige layouter baseret på det tilgængelige skærmrum ved at stole på konventionelle CSS-teknikker.

To fantastiske ressourcer til dette er:

• ” CSS-mediesøgninger og brug af ledig plads , "CSS-tricks;
• Hardboiled CSS3 Media Queries ," Ting og nonsens.

6. Målplatforme med jQuery

Meget som vi måske vil udføre visse CSS for bestemte enheder, kan vi også kun køre jQuery på bestemte enheder. Her er en tilpasning af nogle kode fra Snipplr Det giver mig mulighed for nemt at segmentere dele af jQuery til at køre afhængigt af brugerens enhed.

 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. Brug fuld stier til målene for form handling egenskaber

Et udsnit af biblioteket synes at være dets vanskeligheder med at finde målsider til at indsende formularer til ... det vil sige, medmindre du bruger den fulde sti fra webstedets rod.

For eksempel har jeg fundet ud af, at denne formular tag aldrig finder sit mål:

Mens en fuld sti som denne virker som forventet:

Sørg også for, at resultaterne fra formularhåndtereren producerer en fuld, gyldig jQuery-mobilside, som vist i tip # 1.

8. Opret popup-dialoger

En praktisk funktion i biblioteket er dens indbyggede pop-up eller dialogboks funktion. Opsætning af denne praktiske funktion er død, enkel. I bund og grund tilføj en attribut til link til, som følger: data-rel="dialog" .

Bemærk to ting. For det første skal målsiden være en fuldt blæst jQuery-mobilside, som beskrevet i tip # 1. For det andet vil dette kun fungere for eksterne sider; det skal være en komplet separat side for at fungere korrekt.

9. En "Annuller" + "Gem" knap combo

Denne bit kode rummer to grundlæggende behov. Den første er at have to knapper ved siden af ​​hinanden. Heldigvis har biblioteket en indbygget søjlestruktur, der let kan sættes på arbejde ved hjælp af et feltsæt tag og de rigtige klasser, som det ses nedenfor. Det andet er at have to knapper med forskellige temaer. Denne kode er direkte fra dokumentationen , og jeg holder den praktisk til hyppig brug.

Cancel
Submit

10. Opret en kolonne struktur på egen hånd

I min bestræbelse på at optimere strukturere en enkelt side for flere enheder, fandt jeg mig selv at kombinere ovenstående mediequery-tricks med "kolonner i en hvilken som helst rækkefølge" -teknik.

Heldigvis regnede webudviklere for længe siden, hvordan man flyttede kolonner rundt. Ved at kombinere denne teknik med medieforespørgsler kan vi meget nemt oprette forskellige strukturer afhængigt af den skærmstørrelse, vi arbejder med.

Position er alt udstikker et af de nemmeste systemer til at arbejde med.

Konklusion

JQuery mobilbiblioteket er et blast at arbejde med. Det giver fantastiske resultater med meget lidt indsats. Og i betragtning af det er stadig i alfa, er det godt til en god start. Forhåbentlig vil disse hurtige tip holde dig i bevægelse fremad som du graver ind i dette nye bibliotek.

Skrevet udelukkende til WDD af Patrick McNeil. Han er freelance skribent, udvikler og designer. Han elsker især at skrive om webdesign, uddanne folk på webudvikling og opbygge hjemmesider. Patricks seneste bogprojekt er Designerens Webhåndbog ; lære om hans andre bøger om TheWebDesignersIdeaBook.com . Følg Patrick på Twitter @designmeltdown .

Hvad synes du om jQuery Mobile-rammerne? Hvilke nyttige kodestykker har du fundet nyttige?