Fem grunde til at bruge jQuery mobile

Med udbredelsen af ​​berøringsskærme på telefoner, tablets og bærbare computere står vi over for et presserende behov for at oprette berøringsvenlige websteder. Ikke kun det, men webstedsejere skal sikre, at deres indhold kan ses af et stadigt stigende, forskelligartet sæt enheder. Det er her jQuery Mobile kommer ind. JQuery Mobile-rammen er i stand til at forbedre websteder ved at tilføje berøringsvenlige formindgange, mere effektive sideindlæsninger og bredere enhedsunderstøttelse ved brug af progressiv forbedring.

Jeg har været en mangeårig fortaler for jQuery, men var ikke straks overbevist om, at jQuery Mobile's tilgang var den rigtige. Jeg besluttede at undersøge nærmere ved at tale med skaberne af jQuery Mobile, Scott Jehl og Todd Parker fra Filament Group . Jeg spurgte dem, hvorfor jQuery Mobile opfører sig som den fungerer, og som et resultat trak fem hoved ting ud, som jQuery Mobile gør for at hjælpe dig med at opbygge mere berøringsvenlige websteder, der fungerer på tværs af en bred vifte af browsere og enheder:



hvordan man laver brugerdefinerede figurer i illustratoren
  1. Bred browser- og enhedsdækning - ved hjælp af progressiv forbedring kan dit websted ses af det bredeste antal browsere og enheder.
  2. Berøringsvenlig formindgange og UI-widgets - formindgange forbedres til at være berøringsvenlige, herunder tilføjelsen af ​​et sæt berøringsvenlige UI-widgets.
  3. Responsivt webdesign klar - jQuery Mobile er en 'mobil-første' ramme, ikke 'kun mobil'.
  4. Layout og tema motor - meget udvidelig og tilpasselig tema og layoutmotor.
  5. Ajax-navigationsmodel til siden - indlæs nye sider hurtigere ved hjælp af Ajax og HTML5 pushstate i stedet for opdatering af fuld side.

Lad os dykke ned i hver af disse fem grunde:



1. Bred browser- og enhedsdækning

'Don't break the web' har været jQuery Mobile's mantra. Internets store løfte var, at enhver, hvor som helst i verden, kunne få adgang til indhold ved at skrive en URL eller klikke på et link.

jQuery Mobile er den eneste store brugergrænseflade, der er i tråd med at sikre, at alle i verden kan få adgang til indhold via en URL eller et link. jQuery Mobile omfavner begreberne på nettet og arbejder med det, ikke imod det. Det omfatter progressiv forbedring, hvor den leverer grundlæggende HTML til enheder, der ikke kan håndtere CSS og Ajax, og derefter forbedrer de enheder, der understøtter det.



Alle enheder i alle dele af verden vil kunne se dit indhold, hvis du bruger jQuery Mobile

Alle enheder i alle dele af verden vil kunne se dit indhold, hvis du bruger jQuery Mobile

2. Berøringsvenlig formindgange og UI-widgets

Hvis du nogensinde har forsøgt at trykke på et afkrydsningsfelt i en ikke-mobilvenlig form, ved du, hvilken smerte det kan være at skulle zoome ind og ud for at ramme dårligt designede formelementer. Du vil sikre dig, at dine formelementer og UI-widgets fungerer godt med berøring. Touch er nu i bærbare computere og desktops så det er nu helt uskyldigt at lave websteder, der ikke er designet til at understøtte angreb på nye berøringsdygtige enheder, der rammer markedet. jQuery Mobile er designet touch-first (alligevel fungerer det stadig godt med en mus), så du får store, klumpede trykmål, der er fingervenlige for alle dets formelementer og UI-widgets.

jQuery Mobile forbedrer automatisk dine formularer, så de bliver berøringsvenlige. Afkrydsningsfelter er pakket i en meget generøs etiket for at skabe en dejlig tapzone, så det er let at ramme det tilsigtede afkrydsningsfelt. Tekstområder er problematiske på mobil, når du går forbi det tildelte tekstrum (du skal rulle med to fingre for at se indhold i et rullebart tekstområde), så jQuery Mobile vokser automatisk tekstområder, så brugeren let kan se det indhold, de har indtastet på alle tider.



I denne figur ser vi en brugervenlig skyder, dip-switch og afkrydsningsfelter

I denne figur ser vi en brugervenlig skyder, dip-switch og afkrydsningsfelter

Mange typer let formaterede og forbedrede formelementer findes i jQuery Mobile, såsom skyderen, afkrydsningsfeltet og radioapparater, søgeinput og vælg menuer. Hver af disse formelementer leveres også med en alternativ 'mini' version, som er ideel til at indsætte i sidehoved- og sidefodselementer på din side (såsom et mini-valgelement til navigation).

jQuery Mobile har også widgets som f.eks vedvarende værktøjslinjer , knapper, dialoger og min personlige favorit er den nye popup-widget , som giver dig mulighed for at poppe enhver form for indhold, hvorfra du udløser det. Dette er nyttigt til visning af formularer på siden, dialoger, fotos, kort og video osv. Flere widgets tilføjes med hver version af jQuery Mobile, som alle er berøringsvenlige og fungerer på tværs af et utal af enheder og browsere.

3. Responsivt webdesign venligt

Du har altid været i stand til at udvikle responsive websteder oven på jQuery Mobile, fordi det er en 'mobil-første ramme ... IKKE' kun mobil '. Og i 1.3-versionen af ​​jQuery mobile gives der meget mere fokus på responsive webdesignfunktioner.

Ny panelwidget

Kender du de menuer, der glider ud fra siden? Populært af Facebooks mobilapplikation er dette brugergrænseflademønster meget kendt for de fleste brugere på mobil. Se paneler i aktioner .

Responsive tabeller

Tabeller kan skifte til en stabelet etiket- / datastilpræsentation i smalle skærmbredder. jQuery Mobile kalder dette tabel reflow .

Responsivt gitter

Det gitre til jQuery Mobile består af enkle gitterblokke, der kan stables oven på hinanden, når de ses på mindre skærme.

videoredigering på ipad pro 2018

4. Layout og temamotor

jQuery Mobile ser på din data-* attributter i din HTML og forbedrer den med adfærd og stil. For eksempel ved at ansøge data-role = ”listview” til dine ikke-ordnede lister indsprøjtes CSS-klasser automatisk på dine lister, så det ligner en mobiliseret liste. Og hvis der er links inde i dine listeelementer, tilføjer den pilen på listen for at vise, at du kan klikke for at gå til en ny side ved at røre ved det pågældende emne.

Det data-* attributter giver dig grundlæggende formatering og struktur, men alt i jQuery Mobile er valgfrit, og CSS-klasser er udvidelige, så du er ikke låst inde i standardtemaet.

Den første ting du skal gøre for at starte med at tilpasse din applikation er at starte med jQuery Mobile Themeroller . Det er det så let for at oprette dine egne temafarver ved at trække og slippe farver fra farvepaletten direkte på det element, du styler. Themeroller har endda integreret Adobes Kuler værktøj, der giver de bedste brugerrangerede farveskemaer at vælge imellem.

To temaer, jeg oprettede på mindre end fem minutter ved hjælp af Kuler-farveskemaer

To temaer, jeg oprettede på mindre end fem minutter ved hjælp af Kuler-farveskemaer

I ovenstående eksempel har jeg bygget et 'A' og 'B' tema. jQuery Mobile har evnen til rekursivt at anvende dine temaer til elementer ved hjælp af datatema attribut . Hvis jeg ville have, at min side skulle bruge standardtemaet 'A' og min formular til at bruge 'B' -temaet, ville jeg bare anvende data-tema = ”b” til mit formelement, og alle elementerne inde i formularen vil automatisk blive stylet med 'B' -temaet.

5. Ajax-sidens navigationsmodel

I stedet for genindlæsning af fuld side søger jQuery Mobile efter links lokalt til det domæne, du er på, og henter det nye sideindhold med Ajax. Når en bruger klikker på et link, indlæses indholdet af den nye side det i et nyt div og derefter overgået til den aktuelle visningsport.

Lad os sige, at du er i gang index.html og derefter klikker du på et link til side.html og linket til side.html har følgende markering:

Link

Bemærk: dataovergang attribut her er ikke påkrævet, dette er bare en demo af at ændre sideovergangsanimationen til at glide i stedet for standardfade-sideovergangen. Der er mange andre sideovergange indbygget i jQuery mobile fra en simpel fade til en mere kompleks flowovergang.

Hvordan den nye side, side.html-indholdet først indlæses til siden i jQuery Mobile og derefter glides ind i visningen

Hvordan den nye side, side.html-indholdet først indlæses til siden i jQuery Mobile og derefter glides ind i visningen

Hvis den browser, du bruger, understøtter HTML5 pushstate, opdateres URL-adressen i dit browservindue til ditdomæne.dk/side.html når den nye side er færdig med at glide ind. Der vises også en indikator for centrifugeringsindlæsning, mens den nye side indlæses for at give brugeren feedback om, at linket blev ramt.

Den største fordel ved denne måde at indlæse sider på er, at du ikke behøver at initialisere alle JavaScript- og CSS-anmodninger på din anden sideindlæsning. Selvom disse aktiver indlæses fra cachen, spares der udførelsestid på mobile enheder.

I tilfælde af indlæsning af den første side ved hjælp af jQuery Mobile, er alle dine scripts og typografier allerede initialiseret på din enhed, så vi behøver ikke at udføre det arbejde igen, når du indlæser en ny side. Det eneste, der er nødvendigt for at gengive en ny side, er det nye HTML-fragment. Med denne metode til indlæsning af sider vil du ende med hurtigere efterfølgende sideanmodninger, der er vigtige for at udvikle en fantastisk mobiloplevelse.

hvordan man animerer i adobe eftervirkninger

Læs mere om jQuery Mobile side navigationsmodel .

Tip: Indlæs straks nye sider (ingen indlæsningsindikator)

Der er et par måder, du kan få indlæsning af nye sider til at indlæses endnu hurtigere ... øjeblikkelig. Den første måde er, hvis du ved, at brugeren sandsynligvis besøger en bestemt side næste, kan du tilføje i forudhentning dataattribut til dine links for at få jQuery Mobile til at indlæse dem, når den aktuelle side er indlæst.

Link

Dette indlæses i den nye side lydløst i baggrunden efter vinduesindlæsning.

Den anden måde er at ændre strukturen på siden og integrere siderne i den aktuelle side. Vær forsigtig med dette, fordi det øger din oprindelige nyttelast og ikke er tilgængelig direkte via URL. Men med at skabe separat divs med unikke id'er og datarolle-side (flersidet struktur) indlæses dine nye sider med det samme, når du klikker på et link. Bare sørg for, at disse sider er på samme DOM-niveau som din hovedside.

New page

Link derefter til den integrerede side med en hash og side-id på din aktuelle side.

View new page

Dette indlæses i sideindholdet inde i div med id ny side .

Med disse to metoder vil alt nyt sideindhold være tilgængeligt med det samme, og der bør ikke vises nogen indlæsningsindikator.

hvordan man redigerer privatlivets fred på Facebook

Den nye sidenavigationsmodel, der er givet til os af jQuery Mobile, arbejder med internettet for at få nye sider til at indlæses endnu hurtigere end traditionelle helsidesindlæsninger ved kun at indlæse det fragment af HTML, som du har brug for til at gengive nye sider, og giver dig også et par måder at få denne proces til at virke øjeblikkelig for brugeren.

Weblevering for alle

jQuery Mobile er et eksempel på, at internettet lever op til sit løfte om, at alle har lige adgang til gratis og offentligt indhold, der er sendt på nettet, uanset hvilken enhed de bruger. Det er ikke kun til mobil, det er 'mobil-først', IKKE 'kun mobil', så det kan bruges som en base for responsivt webdesign. Alle disse fantastiske berøringsvenlige formindgange og widgets er fuldt temaer og fungerer godt, uanset hvilken enhed (mobil eller desktop).

For information og dykning i hvert af disse punkter mere dybtgående, tjek min tale på YouTube med titlen ' jQuery Mobile, Web Delivery for ALL '.