Saturs
- 1. Plašs pārlūka un ierīces pārklājums
- 2. Skārienam draudzīgas veidlapu ievades un lietotāja interfeisa logrīki
- 3. Labvēlīgs atsaucīgs tīmekļa dizains
- Jauns paneļa logrīks
- Reaģējošās tabulas
- Atsaucīgs režģis
- 4. Izkārtojuma un motora izkārtojums
- 5. Ajax lapas navigācijas modelis
- Padoms: nekavējoties ielādējiet jaunas lapas (bez ielādes indikatora)
- Tīmekļa piegāde visiem
Pieaugot tālruņu, planšetdatoru un klēpjdatoru skārienekrānu skaitam, mums steidzami jāizveido skārienam draudzīgas vietnes. Ne tikai tas, bet vietņu īpašniekiem ir jānodrošina, lai viņu saturu varētu apskatīt arvien pieaugošs, daudzveidīgs ierīču komplekts. Tieši šeit parādās jQuery Mobile. JQuery Mobile ietvars spēj uzlabot vietnes, pievienojot skārienam draudzīgas veidlapu ievades, efektīvāku lapu ielādi un plašāku ierīču atbalstu, izmantojot pakāpenisku uzlabojumu.
Esmu bijis ilglaicīgs jQuery aizstāvis, taču uzreiz nebiju pārliecināts, ka jQuery Mobile pieeja ir pareizā. Es nolēmu turpināt izmeklēšanu, runājot ar jQuery Mobile veidotājiem Skotu Jehlu un Todu Pārkeru no Filament Group. Es viņiem vaicāju, kāpēc jQuery Mobile izturas tā, kā rīkojas, un rezultātā izvilka piecas galvenās lietas, ko jQuery Mobile dara, lai palīdzētu jums izveidot pieskārienam draudzīgākas vietnes, kas darbojas plašā pārlūkprogrammu un ierīču klāstā:
- Plašs pārlūka un ierīces pārklājums - izmantojot pakāpenisku uzlabošanu, jūsu vietni var redzēt visplašākais pārlūkprogrammu un ierīču skaits.
- Skārienam draudzīgas veidlapu ievades un lietotāja interfeisa logrīki - veidlapu ievade ir uzlabota, lai tā būtu pieskārienam draudzīga, ieskaitot skārienam draudzīgu lietotāja interfeisu kopu pievienošanu.
- Reaģējošs tīmekļa dizains ir gatavs - jQuery Mobile ir “vispirms mobilajām ierīcēm”, nevis “tikai mobilajām ierīcēm”.
- Izkārtojums un tematiskais motors - ļoti paplašināms un pielāgojams motīvs un izkārtojuma motors.
- Ajax lapas navigācijas modelis - ātrāk ielādējiet jaunas lapas, izmantojot Ajax un HTML5 pushstate, nevis pilnas lapas atsvaidzināšanu.
Ļaujiet mums padziļināti izpētīt katru no šiem pieciem iemesliem:
1. Plašs pārlūka un ierīces pārklājums
“Nepārkāpiet tīmekli” ir bijusi jQuery Mobile mantra. Tīmekļa lielais solījums bija tāds, ka jebkurš jebkur pasaulē var piekļūt saturam, ierakstot URL vai noklikšķinot uz saites.
jQuery Mobile ir vienīgais nozīmīgais lietotāja saskarnes ietvars, kas atbilst tam, lai ikviens cilvēks visā pasaulē varētu piekļūt saturam, izmantojot vietrādi URL vai saiti. jQuery Mobile ietver tīmekļa jēdzienus un strādā ar to, nevis pret to. Tas ietver pakāpenisku uzlabošanu, kur tā nodrošina pamata HTML ierīcēm, kuras nevar apstrādāt CSS un Ajax, un pēc tam uzlabo ierīces, kas to atbalsta.
2. Skārienam draudzīgas veidlapu ievades un lietotāja interfeisa logrīki
Ja esat kādreiz mēģinājis atzīmēt izvēles rūtiņu, kas nav draudzīga mobilajām ierīcēm, jūs zināt, cik sāpīgi var būt tuvināšana un tālināšana, lai trāpītu slikti izstrādātus veidlapas elementus. Jūs vēlaties pārliecināties, vai jūsu formas elementi un lietotāja interfeisa logrīki labi darbojas, pieskaroties. Pieskāriens tagad ir klēpjdatoros un galddatoros, tāpēc tagad ir pilnīgi neattaisnojami padarīt vietnes, kas nav izstrādātas, lai atbalstītu jaunu, ar skārienjūtīgu ierīču uzbrukumu tirgū. jQuery Mobile ir izstrādāts vispirms ar pieskārienu (tomēr joprojām lieliski darbojas ar peli), lai jūs iegūtu lielus, kuplus pieskaršanās mērķus, kas ir piemēroti pirkstiem visiem tā formas elementiem un lietotāja saskarnes logrīkiem.
jQuery Mobile automātiski uzlabo jūsu veidlapas, lai kļūtu pieskārienam draudzīgas.Lai izveidotu jauku pieskaršanās zonu, izvēles rūtiņas ir iesaiņotas ļoti dāsna izmēra etiķetē, tāpēc ir viegli atzīmēt paredzēto izvēles rūtiņu. Tekošajā apgabalā mobilajā ierīcē ir problemātiska, kad dodaties garām atvēlētajai teksta vietai (lai ritināmā teksta apgabalā redzētu saturu, jums ir jātin ar diviem pirkstiem), tāpēc jQuery Mobile automātiski audzē tekstu laukumus, lai lietotājs varētu ērti redzēt ievadīto saturu visas reizes.
JQuery Mobile ir daudz veidu viegli veidojami un uzlaboti formas elementi, piemēram, slīdnis, izvēles rūtiņas un radio komplekti, meklēšanas ievade un atlasītās izvēlnes. Katram no šiem veidlapu elementiem ir alternatīva ‘mini’ versija, kas ir ideāli piemērota ievietošanai galvenes un kājenes elementos jūsu lapā (piemēram, mini select elements navigācijai).
jQuery Mobile ir arī tādi logrīki kā pastāvīgas rīkjoslas, pogas, dialoglodziņi un, mans personīgais iecienītākais, ir jaunais uznirstošais logrīks, kas ļauj jums uznirst jebkura veida saturu no vietas, no kuras to aktivizējat. Tas ir noderīgi, lai parādītu lapas formas, dialoglodziņus, fotoattēlus, kartes un video utt. Katrai jQuery Mobile versijai tiek pievienoti vairāk logrīku, kas visi ir pieskārienam draudzīgi un darbojas neskaitāmās ierīcēs un pārlūkprogrammās.
3. Labvēlīgs atsaucīgs tīmekļa dizains
Jūs vienmēr esat spējis izstrādāt atsaucīgas vietnes papildus jQuery Mobile, jo tā ir sistēma, kas vispirms ir mobilā ... NAV tikai mobilā. JQuery mobile 1.3 versijā daudz lielāka uzmanība tiek pievērsta atsaucīgām tīmekļa dizaina funkcijām.
Jauns paneļa logrīks
Vai jūs zināt tās izvēlnes, kas izslīd no sāniem? Šo lietotāja interfeisa modeli, kuru popularizē Facebook mobilā lietojumprogramma, lielākā daļa mobilo ierīču lietotāju ir ļoti labi pārzina. Skatiet paneļus darbībās.
Reaģējošās tabulas
Tabulas var pārslēgties uz sakrautas etiķetes / datu stila prezentāciju ar šauru ekrāna platumu. jQuery Mobile šo tabulu sauc par reflow.
Atsaucīgs režģis
JQuery Mobile režģi sastāv no vienkāršiem režģa blokiem, kurus var sakraut viens uz otra, skatoties uz mazākiem displejiem.
4. Izkārtojuma un motora izkārtojums
jQuery Mobile skatās uz jūsu dati - * atribūtus jūsu HTML un uzlabo to ar uzvedību un stilu. Piemēram, piesakoties data-role = ”saraksta skats” jūsu nesakārtotajos sarakstos CSS klases tiek automātiski ievadītas jūsu sarakstos, lai tas izskatās kā mobilizēts saraksts. Un, ja saraksta vienumos ir saites, tas sarakstā pievienos bultiņu, lai parādītu, ka varat noklikšķināt, lai pārietu uz jaunu lapu, pieskaroties konkrētajam vienumam.
The dati - * atribūti nodrošina pamata formatējumu un struktūru, taču viss jQuery Mobile ir neobligāts un CSS klases ir paplašināmas, tāpēc jūs neesat ieslēgts noklusējuma motīvā.
Pirmā lieta, kas jums jādara, lai sāktu pielāgot lietojumprogrammu, ir sākt ar jQuery Mobile Themeroller. Tā ir tik vienkārši lai izveidotu savas motīvu krāsas, velkot un nometot krāsas no krāsu paletes tieši uz elementa, kuru veidojat. Themeroller ir pat integrēts Adobe Kuler rīks, kas ļauj izvēlēties labāko lietotāju vērtētās krāsu shēmas.
Iepriekš minētajā piemērā esmu izveidojis tēmu “A” un “B”. jQuery Mobile nodrošina iespēju rekursīvi pielietot savas tēmas elementiem, izmantojot datu tēma atribūts. Ja es gribētu, lai manā lapā tiktu izmantota noklusējuma tēma A, bet veidlapā - tēma B, es vienkārši pieteiktos datu tēma = ”b” manam formas elementam un visi veidlapas elementi automātiski tiks veidoti ar tēmu “B”.
5. Ajax lapas navigācijas modelis
Pilnas lapas atkārtotas ielādes vietā jQuery Mobile meklē vietējās saites uz domēnu, kurā atrodaties, un ienes jauno lapu saturu, izmantojot Ajax. Kad lietotājs noklikšķina uz saites, jaunās lapas saturs tiek ielādēts jaunā div un pēc tam pārgāja uz pašreizējo skatu portu.
Pieņemsim, ka esat ieslēgts index.html un jūs pēc tam noklikšķināt uz saites uz page.html un saiti uz page.html ir šāds marķējums:
a href = "page.html" data-pāreja = "slide"> Saite / a>
Piezīme datu pāreja atribūts šeit nav nepieciešams, tas ir tikai demonstrējums par lapas pārejas animācijas maiņu uz slīdēšanu, nevis noklusētās lapas izbalēšanas lapas pārejas vietā. JQuery mobile ir iebūvētas daudzas citas lapu pārejas no vienkāršas izbalēšanas līdz sarežģītākai plūsmas pārejai.
Ja jūsu izmantotā pārlūkprogramma atbalsta HTML5 pushstate, pārlūkprogrammas logā esošā URL tiks atjaunināta uz yourdomain.com/page.html tiklīdz jaunā lapa būs pabīdījusies. Jaunās lapas ielādes laikā tiek parādīts arī vērpšanas ielādes indikators, lai sniegtu lietotājiem atsauksmes, ka saite ir trāpīta.
Galvenā šāda lapu ielādes veida priekšrocība ir tā, ka jums nav atkārtoti jāinicializē visi JavaScript un CSS pieprasījumi otrajā lapas ielādē. Pat ja šie aktīvi tiek ielādēti no kešatmiņas, mobilajās ierīcēs tiek ietaupīts izpildes laiks.
Pirmās lapas ielādes gadījumā, izmantojot jQuery Mobile, visi jūsu skripti un stili jau ir inicializēti jūsu ierīcē, tāpēc, ielādējot jaunu lapu, mums tas vairs nav jādara. Vienīgais, kas nepieciešams jaunas lapas renderēšanai, ir jauns HTML fragments. Izmantojot šo lapu ielādes metodi, jūs saņemsiet ātrākus nākamos lapu pieprasījumus, kas ir svarīgi, lai attīstītu lielisku pieredzi mobilajās ierīcēs.
Uzziniet vairāk par jQuery Mobile lapas navigācijas modeli.
Padoms: nekavējoties ielādējiet jaunas lapas (bez ielādes indikatora)
Ir vairāki veidi, kā padarīt jaunu lapu ielādi vēl ātrāku ... acumirklīgu. Pirmais veids ir, ja zināt, ka lietotājs, iespējams, nākamo reizi apmeklēs noteiktu lapu, varat to pievienot prefetch datu atribūts jūsu saitēm, lai jQuery Mobile tos ielādētu pēc pašreizējās lapas ielādes.
a href = "page.html" datu priekšpiegāde> Saite / a>
Tas tiks ielādēts jaunajā lapā klusi fonā pēc loga ielādes.
Otrs veids ir mainīt lapas struktūru un iegult lapas pašreizējā lapā. Tomēr rīkojieties uzmanīgi, jo tas palielinās jūsu sākotnējo kravu un nebūs pieejams tieši caur URL. Bet ar atsevišķu radīšanu divs ar unikāliem ID un datu lomu lapu (vairāku lapu struktūra), noklikšķinot uz saites, jūsu jaunās lapas tiks nekavējoties ielādētas. Vienkārši pārliecinieties, ka šīs lapas atrodas tādā pašā DOM līmenī kā jūsu galvenā lapa.
div id = "newpage" data-role = "page"> Jauna lapa / div>
Pēc tam saite uz iegulto lapu ar hash un lapas ID pašreizējā lapā.
a href = "# newpage"> Skatīt jaunu lapu / a>
Tas tiks ielādēts lapas saturā div ar id jauna lapa.
Izmantojot šīs divas metodes, viss jaunais lapas saturs būs pieejams uzreiz, un nedrīkst būt redzams ielādes indikators.
Jaunais lappušu navigācijas modelis, ko mums sniedza jQuery Mobile, darbojas ar tīmekli, lai jaunās lapas tiktu ielādētas vēl ātrāk nekā tradicionālās pilnas lapas ielādes, ielādējot tikai HTML fragmentu, kas jums jāveido jaunām lapām, kā arī sniedz dažas veidi, kā lietotājam šis process šķiet tūlītējs.
Tīmekļa piegāde visiem
jQuery Mobile ir piemērs tam, kā tīmeklis izpilda savus solījumus, ka ikvienam ir vienlīdzīga piekļuve tīmeklī ievietotam bezmaksas un publiskam saturam neatkarīgi no ierīces, kuru viņi izmanto. Tas nav paredzēts tikai mobilajām ierīcēm, tas ir “vispirms mobilajiem”, NAV “tikai mobilajiem”, tāpēc to var izmantot kā atsaucīga tīmekļa dizaina pamatu. Visi šie lieliskie, skārienam draudzīgie veidlapu ievades un logrīki ir pilnībā tematiski un lieliski darbojas neatkarīgi no ierīces (mobilās vai darbvirsmas).
Lai iegūtu informāciju un padziļinātu ieniršanu katrā no šiem punktiem, skatiet manu sarunu vietnē YouTube ar nosaukumu “jQuery Mobile, Web Delivery for ALL”.
