Ar esi pasiruošęs sukurti savo To-do-listas su jQuery Mobile? Šiame pamokyne aš tau parodysiu žingsnis po žingsnio, kaip sukurti pagrindą savo programai ir kaip pritaikyti patrauklią temą naudojant jQuery Mobile ThemeRoller. Tai yra svarbus pirmas žingsnis kuriant funkcionalią ir vizualiai patrauklią programą.
Pagrindiniai įžvalgos
- Naudojimo jQuery Mobile ThemeRoller dizaino pritaikymui
- Temų parsisiuntimas ir pridėjimas prie savo projekto
- Index-HTML failo pritaikymas individualiai vartotojo sąsajai
Žingsnis po žingsnio instrukcija
Žingsnis 1: Prieiga prie ThemeRoller
Tu pradėsi ThemeRoller svetainėje themeroller.jquerymobile.com. Čia galėsi visiškai pritaikyti savo To-do list dizainą.
Žingsnis 2: Atsižvelkite į nustatymus ThemeRoller
ThemeRoller tu atliksi keletą pritaikymų. Tai apima, pavyzdžiui, spalvų pasirinkimą ir mygtukų dizainą. Jei esi patenkintas savo pritaikymais, turi galimybę išbandyti skirtingas temas.
Žingsnis 3: Tema parsisiųsti
Jei esi patenkintas savo tema, gali ją parsisiųsti. Paspausk mygtuką "Parsisiųsti temą". ThemeRoller vėliau parodys, kaip pridėti CSS failus prie savo projekto. Svarbu naudoti parsisiųstą CSS failą.
Žingsnis 4: Sukurti projekto aplankų struktūrą
Pasiek savo projekto katalogą ir sukurk naują aplanką pavadinimu „to-do list“. Čia įdėk parsisiųstus failus, kuriuos sukūrei ThemeRoller. Šiame aplanke turėtų būti index.html ir su ja susiję teminiai failai.
Žingsnis 5: Atidaryti index-HTML failą
Atidaryk index.html failą su tekstiniu redaktoriumi arba IDE, pavyzdžiui, Atom. Čia jau matysi keletą pagrindinių nuorodų į jQuery ir jQuery Mobile.
Žingsnis 6: Pritaikyti HTML turinį
Vienas svarbių pritaikymų yra tavo programos pavadinimas. Tu pakeisi pavadinimą iš „jQuery Mobile Theme Download“ į „To-Do List“. Taip pat gali pakeisti arba visiškai pašalinti užpildymo tekstus, kad užtikrintum tvarkingą išdėstymą.
Žingsnis 7: Apibrėžti puslapio struktūrą
Dabar pažvelkime į HTML kodo struktūrą išsamiau.
Žingsnis 8: Optiniai pritaikymai
Naudok CSS klases, kad suteiktum savo antraitei ir turiniui patrauklų dizainą. Įsitikink, kad teisingai priskiri data-role atributus, kad galėtum naudoti jQuery Mobile iš anksto apibrėžtus stilius.
Žingsnis 9: Pagrindinių funkcionalumų pridėjimas
Po to, kai atlikai paviršiaus pritaikymus, gali pagalvoti apie kitus žingsnius, kad sukurtum To-do listas pagrindines funkcijas. Tai apima užduočių pridėjimą ir funkcijų įtraukimo duomenų valdymui.
Santrauka – To-do list su jQuery Mobile kūrimas
Šiame pamokyne išmokai, kaip sukurti pagrindus savo To-do list su jQuery Mobile. Be dizaino pritaikymo per ThemeRoller, tu sukūrei aplankų struktūrą savo projektui ir pritaikei vadinamąjį index.html failą. Taigi, esi puikiai pasiruošęs tolimesniems žingsniams kuriant savo programą. Eksperimentuok su jQuery Mobile ir toliau pritaikyk dizainą, kad personalizuotum savo programą.
Dažnai užduodami klausimai
Kaip parsisiųsti temą?Spustelėk ThemeRoller mygtuką "Parsisiųsti temą" ir sek instrukcijas.
Ar galiu išbandyti kitas temas?Taip, bet kada gali pritaikyti ir parsisiųsti kitas temas ThemeRoller.
Kaip atidaryti index.html failą?Tu gali atidaryti failą su bet kokiu tekstiniu redaktoriumi arba vystymo aplinka, pvz., Atom.
Kokia struktūra turėtų būti mano HTML faile?Failas turėtų turėti tėvinį div, antraštės div ir turinio div.
Kaip galiu toliau plėtoti programą?Tu gali pridėti daugiau funkcijų užduotims tvarkyti ir toliau pritaikyti vartotojo sąsają.
