Nubraižykite mobiliąją svetainę su JQuery Mobile

JQuery Mobile lietimui optimizuotą, HTML5 vartotojo sąsaja sistema.Ji pastatyta ant JQuery ir JQuery UI platforma, ir jis idealiai tinka greitam mobiliosios plėtrai.JQuery Mobilus sistema naudoja specialius atributus padėti apibrėžti ir stilius savo elementus, nereikia rašyti išsamią Klasės nuostatai sau.

1. 1
   Vykti į JQuery Mobile puslapį, o tada spauskite "Atsisiųsti" skirtuką pagrindiniame navigacijos meniu.

   Skelbimo

   šis žingsnis buvo naudinga?Taip |Nėra |Man reikia pagalbos
2. 2
   Pereikite į atsisiuntimo puslapį, kol pamatysite Nukopijuokite ir įklijuokite fragmentas CDN-talpinami failai skyriaus .

   kopijuoti kodas linijos ant jūsų mainų sritį.Šie trys pagalbos failai yra viskas, ko jums reikia įgyvendinti sistemą.

   instagram viewer

   Skelbimo

   šis žingsnis buvo naudinga?Taip |Nėra |Man reikia pagalbos
3. 3
   Atidaryti norimą plėtros programinę įrangą ir sukurti naują dokumentą HTML .

   Jei neturite plėtros programinę įrangą, atidarykite Notepad programą savo kompiuteryje.

   šis žingsnis buvo naudinga?Taip |Nėra |Man reikia pagalbos
4. 4
   Pridėti nuorodas į HTML dokumento .

   viduje galvos žymeles, įklijuoti CDN-Patalpinta failų nuorodas.

   šis žingsnis buvo naudinga?Taip |Nėra |Man reikia pagalbos
5. 5
   Sukurkite savo pirmąją "Puslapis" .

   Su JQuery Mobile sistemą, sukurti kelis puslapius per tą patį HTML dokumentą.Viduje kūno žymeles, sukurti div konteinerį.Pridėti duomenų vaidmenį atributą, ir priskirti jai vertė yra puslapio .Galiausiai, pridėti ID atributą, ir priskirti jai vertė yra namų .

   šis žingsnis buvo naudinga?Taip |Nėra |Man reikia pagalbos
6. 6
   Pridėti antraštės , turinio ir apačia div konteinerius .

   Viduje puslapio div konteinerį, sukurti tris daugiau div žymėmis.Naudojant duomenų vaidmenį atributą, priskirti vertybes antraštės , turinio ir poraštės atitinkamai.Tai yra pagrindinė struktūra yra JQuery Mobile puslapyje.

   šis žingsnis buvo naudinga?Taip |Nėra |Man reikia pagalbos
7. 7
   Pridėti Parašą titulus .

   Naudojant h1 pozicijoje žymeles, sukurti pozicijoje titulus jūsų Parašą žymes.

   šis žingsnis buvo naudinga?Taip |Nėra |Man reikia pagalbos
8. 8
   Sukurti antrojo puslapio .

   Už div konteinerį, kad turi savo duomenų vaidmenį atributus į puslapį, sukurkite naują div konteinerį.Pridėti duomenų vaidmenį atributą, tada nustatykite ją į puslapį.Pridėti ID atributą, tada nustatykite jį į 2 psl Galiausiai, pridėti div konteinerius antraštės, turinio ir poraštės, todėl struktūra panaši į namų puslapį.

   šis žingsnis buvo naudinga?Taip |Nėra |Man reikia pagalbos
9. 9
   Sukurti meniu puslapio .

   Meniu puslapis bus sukurtas tuo pačiu būdu, kaip ir pirmųjų dviejų puslapių, bet be parašo.Sukurti div konteinerį, ir nustatyti jo duomenų vaidmenį atributas puslapyje.Pridėti ID atributą, ir suteikia jai reikšmę iš main_nav.

   šis žingsnis buvo naudinga?Taip |Nėra |Man reikia pagalbos
10. 10
    Sukurti navigacijos meniu struktūra .

    Viduje turinys div konteinerį, sukurti netvarkingai sąrašą.Pridėti duomenų vaidmenį atributą, ir nustatyti jo vertę ListView.Pridėti duomenų intarpas atributą, ir nustatyti jo vertę tiesa.Viduje ul žymeles už netvarkingai sąrašą, pridėti du sąrašas elementas žymes( Li žymių).

    šis žingsnis buvo naudinga?Taip |Nėra |Man reikia pagalbos
11. 11
    Sukurti meniu nuorodos .

    Viduje pirmųjų sąrašo punktas žymeles, sukurti saito žyma.Pridėti href atributą prie inkaro žyma.Naudokite hashtag simbolį taikinys yra ID atributą, tada įveskite "namus".Tai taikosi į "namų" div konteinerį.Sekite tą patį procesą antrojo sąrašo elementą, bet šį kartą tipas grotelėmis "Strona2" nukreipti antrą puslapį.

    šis žingsnis buvo naudinga?Taip |Nėra |Man reikia pagalbos
12. 12
    Įdėti meniu nuorodas į kitus puslapius .

    Dabar, kad jūsų meniu yra sukurta, jums reikia nustatyti inkaro žymas "namų" ir "Page 2" puslapius jį pasiekti.Slinkite aukštyn ir rasti antraštės skyrių savo pagrindiniame puslapyje.Pridėti žymę žymės viduje antraštės konteinerį, prieš H1 žyma.Naudojant tą patį susiejimas procesą kaip tu su meniu, nustatykite href atributas grotelėmis "main_nav".Pridėti duomenų vaidmenį atributą, ir suteikia jai reikšmę mygtuko.Pridėti duomenys icon atributą, ir suteikia jai reikšmę barų.Galiausiai, pridėti duomenų iconpos atributą, ir suteikia jai reikšmę iš notext.Tai sukuria mygtuką į savo antraštės pavadinimą kairėje.Pakartokite šį veiksmą į Strona2 puslapyje.

    šis žingsnis buvo naudinga?Taip |Nėra |Man reikia pagalbos
    Skelbimo

• Sukurti tiek daug puslapių, per tą patį HTML dokumentą, kaip jums patinka.JQuery Mobilus naudoja AJAX navigacijos sistemą, kuri automatiškai jaučiamas, kai jums sukurti kelis puslapius tame pačiame dokumente.
• Pridėti duomenų pereinamąjį atributas ankeriais vizualiai Raminančią perėjimo tarp puslapių.Galimos perėjimai yra išnyks, Pop, apversti, pasukti, srautas, slidefade, šlaitas, slideup ir slidedown.
• Naudokite duomenų tema atributas stiliaus beveik kiekvieną elementą į savo projektą.Pagal nutylėjimą, JQuery Mobilus ateina su penkių spalvų pavyzdžių norėdami naudoti.Theming sistema naudoja raidžių kaip vertybes.Todėl duomenų tema atributas priima vertybes A, B, C, D ir E, kai pirmą kartą jį atsisiųsti.Patikrinkite JQuery Mobile Themeroller sukurti pasirinktinį tema, su iki 26 skirtingų spalvų swatches!
• Naudokite duomenų pozicija atributas sukurti "lipni" arba fiksuotas parašą į savo svetainę.Pridėti šį atributą prie div konteinerį, kad turi savo duomenų vaidmenį rinkinį parašą, ir duomenų padėties vertę nustatyti.
• Patikrinkite JQuery Mobilusis Telefonas Spalvoti Kit pradėti kurti su 26 skirtingų teminių swatches.

• Būtinai naudoti HTML komentarus atskirti savo JQuery Mobile puslapius.Tai sutaupys jums daug laiko žemyn kelio toną, kaip vieną HTML dokumento su keliais "puslapius" gauna ištinęs gana greitai.

• JQuery Mobilus Spalva komplektas
• JQuery Mobilus
• JQuery Mobilus Themeroller
• Jei turite problemų su bet kuriuo iš šių etapų, kreipkitės įklausimas daugiau pagalbos, arba paštu į komentarus skyriuje žemiau.