Si pripravený vytvoriť si vlastný To-do-zoznam pomocou jQuery Mobile? V tomto tutoriáli ti ukážem krok za krokom, ako si vytvoríš základ pre svoju appku a ako si prispôsobiť atraktívnu tému pomocou ThemeRoller jQuery Mobile. To je dôležitý prvý krok na vyvinutie funkčnej a vizuálne atraktívnej aplikácie.
Najdôležitejšie zistenia
- Použitie ThemeRoller jQuery Mobile na prispôsobenie dizajnu
- Stiahnutie a pridanie tém do tvojho projektu
- Prispôsobenie index-HTML súboru pre individuálne používateľské rozhranie
Krok za krokom návod
Krok 1: Prístup k ThemeRoller
Začneš na webovej stránke ThemeRoller na themeroller.jquerymobile.com. Tu si môžeš úplne prispôsobiť dizajn svojho to-do zoznamu.
Krok 2: Urobiť nastavenia v ThemeRoller
V ThemeRoller vykonáš rôzne prispôsobenia. To zahŕňa napríklad výber farieb a dizajn tlačidiel. Ak si so svojimi prispôsobeniami spokojný, máš možnosť otestovať rôzne témy.
Krok 3: Stiahnuť tému
Ako náhle si so svojou témou spokojný, môžeš si ju stiahnuť. Klikni na tlačidlo "Stiahnuť tému". ThemeRoller ti následne ukáže, ako môžeš CSS súbory pridať do svojho projektu. Pri tom je dôležité použiť stiahnutý CSS súbor.
Krok 4: Vytvorenie štruktúry priečinkov pre tvoj projekt
Prejdi do priečinka svojho projektu a vytvor nový priečinok s názvom „to-do list“. Sem vložíš stiahnuté súbory, ktoré si predtým vytvoril v ThemeRoller. V tomto priečinku by mala byť prítomná index.html a príslušné tému súbory.
Krok 5: Otvorenie index-HTML súboru
Otvori index.html súbor s textovým editorom alebo IDE ako Atom. Tu už uvidíš niektoré základné odkazy na jQuery a jQuery Mobile.
Krok 6: Úprava HTML obsahu
Dôležitou úpravou je názov tvojej appky. Zmeň názov z „jQuery Mobile Theme Download“ na „To-Do List“. Taktiež môžeš prispôsobiť alebo úplne odstrániť texty vo formáte placeholder, aby si zabezpečil čistý dizajn.
Krok 7: Definovanie štruktúry stránok
Teraz sa pozrieme bližšie na štruktúru HTML kódu.
Krok 8: Vykonanie vizuálnych prispôsobení
Použi CSS triedy, aby si dal svojmu hlavičkovému a obsahu atraktívny dizajn. Dbaj na to, aby si správne priradil atribúty data-role, aby si využil preddefinované štýly jQuery Mobile.
Krok 9: Pridávanie základných funkcií
Ako náhle si urobil úpravy používateľského rozhrania, môžeš premýšľať o ďalších krokoch na vytvorenie základných funkcií to-do zoznamu. To zahŕňa pridávanie úloh a implementáciu funkcií pre správu údajov.
Zhrnutie – Vytvorenie to-do zoznamu s jQuery Mobile
V tomto tutoriáli si sa naučil, ako si vytvoríš základy pre svoj to-do zoznam s jQuery Mobile. Okrem prispôsobenia dizajnu cez ThemeRoller si vytvoril štruktúru priečinkov pre svoj projekt a prispôsobil si tzv. index.html súbor. Tým si dobre pripravený na ďalšie kroky vo vývoji tvojej appky. Experimentuj s jQuery Mobile a pokračuj v prispôsobovaní dizajnu, aby si svoju aplikáciu personalizoval.
