Sukurkite svetainę mobiliesiems naudodami „jQuery Mobile“

Turinys

• Kaip koduoti kelis puslapius viename HTML faile
• apibūdinimas
• Kaip naudoti dialogo langus ir perėjimus
• Galima naudoti perėjimus
• apibūdinimas
• Kaip sukurti mygtukus
• apibūdinimas
• Kaip sukurti naršymo juostą
• Kaip koduoti naršymo juostos HTML:
• Kaip formatuoti turinį naudojant „jQuery Mobile“
• Numatytieji stiliai, kuriuos naudoja „jQuery Mobile“
• apibūdinimas
• Kaip pritaikyti temas HTML elementams
• Du temos taikymo būdai:
• apibūdinimas
• Perspektyva

Tai yra redaguota Ištrauka iš 15 skyriaus Muracho HTML5 ir CSS3 pateikė Zakas Ruvalcaba ir Anne Boehm.

„jQuery Mobile“ yra nemokama, atviro kodo, daugiaplatformė „JavaScript“ biblioteka, kurią galite naudoti kurdami svetaines mobiliesiems. Ši biblioteka leidžia kurti puslapius, kurie atrodo ir atrodo kaip savosios mobiliosios programos puslapiai.

Nors šiuo metu „jQuery Mobile“ galima įsigyti kaip beta versijos versiją, ši versija jau suteikia visas funkcijas, kurių jums reikia norint sukurti puikią svetainę mobiliesiems. Dėl to galite pradėti naudoti iš karto. Taip pat galite tikėtis, kad ši versija bus nuolat tobulinama, todėl „jQuery Mobile“ bus tik geresnė.

Šiame straipsnyje sužinosite pagrindines svetainių mobiliesiems puslapių kūrimo metodikas. Tai apims dialogo langų, mygtukų ir naršymo juostų naudojimą.

Kaip koduoti kelis puslapius viename HTML faile

Priešingai nei kuriate tinklalapius ekrano svetainei, „jQuery Mobile“ leidžia jums sukurti kelis puslapius viename HTML faile. Tai iliustruoja 15-7 paveikslas. Čia galite pamatyti du svetainės puslapius kartu su šių puslapių HTML. Stebina tai, kad abu puslapiai yra užkoduoti viename HTML faile.

Kiekviename puslapyje užkoduojate vieną div elementą su „page“ kaip duomenų vaidmens atributo vertę. Tada kiekviename iš šių div elementų jūs užkoduojate kiekvieno puslapio antraštės, turinio ir poraštės div elementus. Vėliau, kai įkeliamas HTML failas, rodomas pirmasis failo turinio puslapis.

Norėdami susieti tarp HTML failo puslapių, naudokite vietos rezervavimo ženklus, kaip parodyta 7 skyriaus 7-11 paveiksle. Pavyzdžiui, šio pavyzdžio pirmojo puslapio elementas a> eina į „#toobin“, kai vartotojas paliečia h2 arba img elementas, kuris užkoduotas kaip šios nuorodos turinys. Tai nurodo elementą div, kurio atributas yra „toobin“, o tai reiškia, kad palietus nuorodą skaitytojas patenka į antrąjį failo puslapį.

Nors šiame pavyzdyje rodomi tik du puslapiai, vienu HTML faile galite užkoduoti daugybę puslapių. Nepamirškite, kad visi puslapiai kartu su jų atvaizdais, „JavaScript“ ir CSS failais yra įkelti į vieną HTML failą. Todėl įkelties laikas taps per ilgas, jei viename faile laikysite per daug puslapių. Tokiu atveju galite suskirstyti savo puslapius į daugiau nei vieną HTML failą.

Dviejų puslapių HTML vieno HTML failo tekste:

div data-role = "page"> header data-role = "header"> h1> SJV Rotušė / h1> / header> section data-role = "content"> h3> 2011–2012 m. garsiakalbiai / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 2011 m. spalio 19 d. / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - LIKĖJŲ KALBĖJŲ ELEMENTAI - -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> SJV rotušė / h1> / header> section data-role = "content"> h3> Aukščiausi devyni: br> Juodosios chalatinės paslaptys / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Kritikų pripažinto bestselerio autorius, i> The Devyni:! - KOPIJA Tęsiasi -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

apibūdinimas

• Kai naudojate „jQuery Mobile“, kiekvienam puslapiui nereikia kurti atskiro HTML failo. Vietoj to, vieno HTML failo turinio elemente, kiekvienam puslapiui užkoduojate po vieną div elementą, kurio duomenų vaidmens atributas nustatytas į „puslapis“.
• Kiekvienam „div“ elementui atributą id nustatote kaip vietos rezervavimo ženklo vertę, prie kurios gali prisijungti kitų puslapių a> elementų atributai „href“.

Kaip naudoti dialogo langus ir perėjimus

15-8 paveiksle parodyta, kaip sukurti dialogo langą, kuris atsidaro palietus nuorodą. Norėdami tai padaryti, užkoduokite dialogo langą taip pat, kaip ir bet kurį puslapį. Tačiau elemente a>, einančiame į tą puslapį, koduojate „data-rel“ atributą, kurio vertė yra „dialog“.

Kaip rodo šio paveikslo pavyzdžiai, „jQuery Mobile CSS“ failas dialogo langą formatuoja kitaip nei įprastas tinklalapis. Pagal numatytuosius nustatymus dialogo lange bus tamsus fonas su baltu priekinio plano tekstu, o antraštė ir poraštė neapleis puslapio pločio. Dialogo lango antraštėje taip pat bus „X“, kurį vartotojas turi paliesti, kad grįžtų į ankstesnį puslapį.

Kai užkoduojate elementą>, kuris eina į kitą puslapį ar dialogo langą, taip pat galite naudoti duomenų perėjimo atributą nurodyti vieną iš šešių perėjimų, kurie apibendrinti šio paveikslo lentelėje. Kiekvienas iš šių perėjimų yra skirtas imituoti efektą, kurį naudoja mobilusis įrenginys, pvz., „IPhone“.

Galima naudoti perėjimus

HTML, atidarantis puslapį kaip dialogo langą su perėjimu „pop“:

a href = "# toobin" data-rel = "dialogo langas" data-transit = "pop">

HTML, atidarantis puslapį su „išblukimo“ perėjimu:

a href = "# toobin" data-pāreja = "išnyks">

apibūdinimas

• A. HTML dialogo langas yra užkoduotas bet kokio puslapio kodavimo būdu. Tačiau į puslapį nukreipiančiame elemente a> yra duomenų rel atributas, kurio vertė yra „dialog“. Norėdami uždaryti dialogo langą, vartotojas paliečia X langelio antraštėje.
• Norėdami nurodyti puslapio ar dialogo lango atidarymo būdą, galite naudoti duomenų perėjimo atributą su viena iš aukščiau pateiktos lentelės reikšmių. Jei įrenginys nepalaiko jūsų nurodyto perėjimo, atributas nepaisomas.
• Dialogo lango stilių sukuria „jQuery Mobile CSS“ failas.

Kaip sukurti mygtukus

15-9 paveiksle parodyta, kaip naudoti mygtukus, norint pereiti iš vieno puslapio į kitą. Norėdami tai padaryti, tiesiog nustatykite elemento> duomenų vaidmens atributą į „mygtukas“, o visa kita atliks „jQuery Mobile“.
Tačiau mygtukams galite nustatyti ir keletą kitų atributų. Pavyzdžiui, jei norite, kad vienas šalia kito būtų rodomi du ar daugiau mygtukų, pavyzdžiui, pirmieji du mygtukai šiame paveikslėlyje, galite nustatyti atributą „data-inline“ į „true“.

Jei norite prie mygtuko pridėti vieną iš 18 piktogramų, kurias pateikia „jQuery Mobile“, taip pat užkoduokite duomenų piktogramos atributą. Pavyzdžiui, šiame pavyzdyje trečiajame mygtuke naudojama piktograma „ištrinti“, o ketvirtame - „namų“ piktograma. Visos šios piktogramos atrodo kaip piktogramos, kurias galite pamatyti savojoje mobiliojoje programoje. Beje, šios piktogramos nėra atskiri failai, kuriuos puslapis turi pasiekti. Vietoj to juos teikia „jQuery Mobile“ biblioteka.

Jei norite horizontaliai grupuoti du ar daugiau mygtukų, pvz., Mygtukus „Taip“, „Ne“ ir „Galbūt“, galite užkoduoti mygtukų a> elementus div elemente, kurio duomenų vaidmens atributas turi „controlgroup“ ir „Horizontalus“ kaip duomenų tipo atributas. Arba, jei norite grupuoti mygtukus vertikaliai, galite pakeisti duomenų tipo atributą į „vertikalus“.

Jei nustatysite mygtuko „data-rel“ atributą „atgal“, o „href“ atributą - svaro simboliui (#), mygtukas grįš į jį iškvietusį puslapį. Kitaip tariant, mygtukas veikia kaip mygtukas Atgal. Tai iliustruoja paskutinis puslapio turinio mygtukas.

Paskutiniai du mygtukai rodo, kaip mygtukai rodomi puslapio poraštėje. Čia piktogramos ir tekstas yra balti juodame fone. Šiuo atveju poraštės klasės atributas yra nustatytas į „ui-bar“, o tai „jQuery Mobile“ nurodo, kad aplink poraštės turinį turėtų būti šiek tiek daugiau vietos. Daugiau apie tai sužinosite 15-12 paveiksle.

Skyriuje esančių mygtukų HTML:

! - Inline mygtukams nustatykite duomenų eilutės atributą į true -> a href = "#" data-role = "button" data-inline = "true"> Atšaukti / a> a href = "#" duomenys -role = "button" data-inline = "true"> OK / a>! - Norėdami pridėti piktogramą prie mygtuko, naudokite atributą data-icon -> a href = "#" data-role = "mygtukas "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Pagrindinis / a>! - Norėdami grupuoti mygtukus, naudokite elementą div su paskesni atributai -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Taip / a> a href = "#" data-role = "button" data-icon = "arrow-d"> No / a> a href = "#" data-role = "button"> Galbūt / a> / div>! - Į koduokite mygtuką „Atgal“, nustatykite „data-rel“ atributą atgal -> a href = "#" data-role = "mygtukas" dat-rel = "atgal" data-icon = "atgal"> Grįžti į ankstesnį puslapį / a >

Poraštėje esančių mygtukų HTML:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Pridėti prie „Facebook“ / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Čivināšana šiame puslapyje / a> / footer>

apibūdinimas

• Norėdami pridėti mygtuką prie tinklalapio, užkoduokite elementą>, kurio duomenų vaidmens atributas nustatytas kaip „mygtukas“.

Kaip sukurti naršymo juostą

15-10 paveiksle parodyta, kaip galite pridėti naršymo juostą prie interneto puslapio. Norėdami tai padaryti, užkoduokite elementą div, kurio duomenų vaidmuo nustatytas kaip „navbar“. Šiame elemente užkoduojate ul elementą, kuriame yra li elementų, kuriuose yra elementai a> naršymo juostoje. Tačiau atminkite, kad nekoduojate elementų a> duomenų vaidmens atributo.

Norėdami pakeisti naršymo juostos elementų spalvą, šiame pavyzdyje pateiktame kode yra kiekvieno elemento atributas „data-theme-b“. Todėl „jQuery Mobile“ keičia kiekvieno elemento fono spalvą iš juodos, kuri yra numatytoji, į patrauklią mėlyną. Be to, šis kodas nustato aktyvaus mygtuko klasės atributą į „ui-btn-active“, todėl „jQuery Mobile“ keičia aktyvaus mygtuko spalvą į šviesiai mėlyną. Tai parodo, kaip galite pakeisti „jQuery Mobile“ naudojamą formatą, ir sužinosite daugiau apie tai toliau.

Naršymo juostos HTML:

header data-role = "header"> h1> SJV Rotušė / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Pagrindinis / a> / li> li> a href =" # garsiakalbiai "data-icon =" star "data-theme =" b "> Garsiakalbiai / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Susisiekite su mumis / a> / li> / ul> / div> / antraštė>

Kaip koduoti naršymo juostos HTML:

• Koduokite „div“ elementą antraštės elemente. Tada nustatykite elemento div duomenų vaidmens atributą į „navbar“.
• „Div“ elemente užkoduokite ul elementą, kuriame kiekvienai nuorodai yra vienas li elementas.
• Kiekviename li elemente užkoduokite elementą a> su „href“ atributu, kuris naudoja vietos rezervavimo ženklą puslapyje, į kurį turėtų nukreipti nuoroda. Tada nustatykite duomenų piktogramos atributą prie pasirinktos piktogramos.
• Aktyviam elementui naršymo juostoje nustatykite klasės atributą į „ui-btn-active“.Tada šio elemento spalva bus šviesesnė nei kitų elementų naršymo juostoje.
• Taip pat turėtumėte naudoti duomenų temos atributą, kad pritaikytumėte „jQuery Mobile“ temą kiekvienam elementui naršymo juostoje. Priešingu atveju juostos mygtukai bus tos pačios spalvos kaip ir visos kitos antraštės. Norėdami sužinoti daugiau apie temų taikymą, žr. 15-12 paveikslą.

Kaip formatuoti turinį naudojant „jQuery Mobile“

Kaip jau matėte, „jQuery Mobile“ automatiškai formatuoja tinklalapio komponentus pagal savo stiliaus lapą. Dabar sužinosite daugiau apie tai ir apie tai, kaip pritaikyti numatytąjį stilių, kurį naudoja „jQuery Mobile“.

Numatytieji stiliai, kuriuos naudoja „jQuery Mobile“

15-13 paveiksle parodyti numatytieji stiliai, kuriuos „jQuery Mobile“ naudoja įprastiems HTML elementams. Nepaisant visų savo stilių, „jQuery Mobile“ remiasi naršyklės atvaizdavimo varikliu, todėl jo paties stilius yra minimalus. Tai leidžia greitai įkelti laiką ir sumažina pridėtines CSS puslapiui tenkančias pridėtines išlaidas.

Kaip matote, „jQuery Mobile“ stilius yra toks efektyvus, kad nereikėtų keisti jo stiliaus pateikiant savo CSS stiliaus lapą. Pavyzdžiui, atstumas tarp nesutvarkyto sąrašo elementų ir lentelės formatavimas yra priimtini. Be to, pilkas fonas juodas tipas atitinka vietinių mobiliųjų programų formatavimą.

apibūdinimas

• Pagal numatytuosius nustatymus „jQuery Mobile“ automatiškai taiko stilius puslapio HTML elementams. Šie stiliai yra ne tik patrauklūs, bet ir imituoja vietinius naršyklės stilius.
• Pagal numatytuosius nustatymus „jQuery Mobile“ kiekvieno mobiliojo puslapio kairėje, dešinėje, viršuje ir apačioje taiko nedidelį kiekį užpildų.
• Pagal numatytuosius nustatymus nuorodos yra šiek tiek didesnės nei įprastas tekstas. Tai leidžia vartotojui lengviau paliesti nuorodas.
• Pagal numatytuosius nustatymus nuorodos yra pabrauktos mėlyna spalva kaip šrifto spalva.

Kaip pritaikyti temas HTML elementams

Kai kuriais atvejais norėsite pakeisti numatytuosius stilius, kuriuos naudoja „jQuery Mobile“. Tai jau matėte 15-10 paveikslo naršymo juostoje. Norėdami pakeisti numatytuosius stilius, galite naudoti penkias temas, kurias teikia „jQuery Mobile“. Tai apibendrinta 15-12 paveiksle. Vėlgi, šios temos yra skirtos imituoti vietinės mobiliosios programos išvaizdą.

Vienas iš būdų pritaikyti temas yra koduoti duomenų temos atributą, kurio reikšmė yra raidės tema. Tai matėte naršymo juostoje 15–10 paveiksle ir tai galite pamatyti šios paveikslo antrosios naršymo juostos kode. Čia duomenų temos atributas taškai „e“ taiko antraštei, o tema „d“ - elementams naršymo juostoje.

Kitas būdas pritaikyti temas yra nustatyti elemento klasės atributą į klasės pavadinimą, nurodantį temą. Tai iliustruoja pirmasis pavyzdys po lentele. Čia „class“ atributas naudojamas „ui-bar“ ir „ui-bar- b“ klasėms taikyti elementui div. Todėl „jQuery Mobile“ elementui pirmiausia taiko numatytąjį juostos stilių, tada šiam stiliui pritaiko b temą. Tolesniuose puslapiuose pamatysite kitų tokio stiliaus pavyzdžių.

Atkreipkite dėmesį, kad šio paveikslo lentelėje sakoma, kad temą e reikia naudoti saikingai. Taip yra todėl, kad ji naudoja oranžinę spalvą, kuri gerai tinka akcentuojant daiktą, tačiau nėra patraukli didelėmis dozėmis. Tai iliustruoja antroji antraštė ir naršymo juosta šiame paveikslėlyje, kuri, matant spalvotą spalvą, linkusi trūkinėti.

Apskritai geriausia likti pagal numatytuosius stilius ir pirmąsias tris temas, kurios paprastai gerai veikia kartu. Tada galite eksperimentuoti su d ir e temomis, kai manote, kad jums reikia kažko daugiau.

Antrosios antraštės ir naršymo juostos HTML:

header data-role = "header" data-theme = "e"> h1> SJV Rotušė / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Pagrindinis / a> / li> li> a href =" # garsiakalbiai "data-icon =" star "data-theme =" d "> Garsiakalbiai / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Naujienos / a> / li> / ul> / div> / header>

Penkios „jQuery Mobile“ temos:

Du temos taikymo būdai:

Naudodami duomenų temos atributą:

li> a href = "# home" data-icon = "home" data-theme = "b"> Pagrindinis / a> / li>

Naudodami klasės atributą, kuris nurodo temą:

div> Baras / div>

apibūdinimas

• Naudodami penkias temas, kurios yra „jQuery Mobile“, galite tinkamai pakoreguoti numatytuosius HTML elementų stilius.
• Nors su „jQuery Mobile“ programa galite naudoti savo CSS stiliaus lapą, turėtumėte vengti to daryti, kai tik įmanoma.

Perspektyva

Per pastaruosius kelerius metus labai išaugo mobiliųjų prietaisų naudojimas. Dėl to tapo vis svarbiau kurti internetines svetaines, kurias būtų lengva naudoti iš šių įrenginių. Nors tai paprastai reiškia atskiros svetainės kūrimą, tai gali būti kritinis aspektas palaikant jūsų buvimą internete.

Laimei, atsiradus „jQuery Mobile“, užduotis sukurti internetinę svetainę tapo daug lengvesnė. Mobilieji tinklalapiai nebėra apriboti statiniais puslapiais, kuriuose yra antraštės, pastraipos, nuorodos ir miniatiūrų vaizdai. Naudodamiesi „jQuery Mobile“, žiniatinklio kūrėjai dabar gali kurti daug funkcijų turinčias svetaines, kurios atrodo ir jaučiasi kaip vietinės mobiliosios programos.