Zgraditi Mobile Spletna stran z jQuery Mobile

jQuery Mobile-touch optimizirana, ki temelji na HTML5 uporabniški vmesnik sistem.To je zgrajen na platformi jQuery in jQuery UI, in je idealen za hitro mobilno razvoj.Okvir jQuery Mobile uporablja posebne lastnosti, da pomaga opredeliti in stil svoje elemente, ne da bi morali pisati podrobne razred pravila določajo sami.

1. 1
   Pojdite na domačo stran jQuery Mobilein nato kliknite na "Download" zanka iz glavnega navigacijskega menija.

   Oglasi

   bil to korak v pomoč?Da |Ne |Rabim pomoč
2. 2
   Pomaknite se navzdol na strani za prenos, dokler ne vidite Kopiranje in lepljenje delčka za CDN-gostujejo datotek oddelku .

   Kopiranje vrstic kode na vaš odložišče.Te tri referenčne datoteke so vse, kar potrebujete za izvajanje okvira.

   instagram viewer

   Oglasi

   bil to korak v pomoč?Da |Ne |Rabim pomoč
3. 3
   Odpri želeni razvoj programske opreme in ustvariti nov dokument HTML .

   Če nimate za razvoj programske opreme, odprite aplikacijo Beležka na vašem računalniku.

   bil to korak v pomoč?Da |Ne |Rabim pomoč
4. 4
   Dodaj sklicevanja na svoj dokument HTML .

   Inside vaše glavo oznak, paste CDN-gostujejo datotek povezave s.

   bil to korak v pomoč?Da |Ne |Rabim pomoč
5. 5
   Ustvarite svojo prvo "stran" .

   V okviru jQuery Mobile, da ustvarite več strani znotraj istega dokumenta HTML.Znotraj telo oznake, ustvariti posodo div.Dodaj atribut podatkov, vlogo, in ji dodeli vrednost strani .Na koncu dodamo atribut ID , in mu dodeli vrednost doma .

   bil to korak v pomoč?Da |Ne |Rabim pomoč
6. 6
   Dodajte glavo , vsebine in nogo div posode .

   V vašem stran posodi div, ustvariti še tri div oznak.Uporaba-vlog podatki atribut , dodelite vrednosti glave , vsebine in nogo oz.To je osnovna struktura jQuery Mobile strani.

   bil to korak v pomoč?Da |Ne |Rabim pomoč
7. 7
   Dodaj glave in naslovov footer .

   Uporaba h1 tarifno oznako, ustvariti tarifne naslovov za vaše glave in noge oznake.

   bil to korak v pomoč?Da |Ne |Rabim pomoč
8. 8
   Ustvarite drugi strani .

   Zunaj posode div, ki ima svoj podatkov, vlogo atribut nastavljen na stran, ustvarite novo posodo div.Dodatek vlogo podatkov atribut , nato pa jo nastavite na stran.Dodaj atribut ID , nato pa jo nastavite na strani 2. Na koncu dodamo div posode za glave, vsebino in noge, tako da je struktura spominja na domačo stran.

   bil to korak v pomoč?Da |Ne |Rabim pomoč
9. 9
   Ustvari menu strani .

   Stran Meni se dogaja, da se ustvari na enak način kot v prvih dveh straneh, vendar brez noge.Ustvarite posodo div, in določiti atribut podatkov, vlog na stran.Dodaj atribut ID , in ji dati vrednost main_nav.

   bil to korak v pomoč?Da |Ne |Rabim pomoč
10. 10
    Ustvari navigacijski meni strukturo je.

    Inside vsebina posodi div , ustvarili neurejen seznam.Dodaj atribut podatkov-vloge, in določi njegovo vrednost na ListView.Dodaj atribut podatkov-Razširjenje in nastavite njegovo vrednost na true.Znotraj ul oznake za neurejen seznam, dodamo dve seznam-točko oznake( li oznake).

    bil to korak v pomoč?Da |Ne |Rabim pomoč
11. 11
    Ustvarite menija povezav .

    Znotraj prvih oznak seznam-postavko, ustvariti sidro oznako.Dodaj href atribut na sidrno oznako.Uporabite simbol hashtag za ciljanje atribut za ID in vnesite "doma".To je usmerjena v "domačo" div posodo.Sledite tej isti postopek za drugo seznama-točki, vendar tokrat vrsta hashtag "page2" ciljati na drugo stran.

    bil to korak v pomoč?Da |Ne |Rabim pomoč
12. 12
    Dodaj menija povezave do drugih strani .

    Zdaj, ko je ustvaril svoj menu, morate nastaviti sidro oznake na vaš "doma" in "stran 2" strani za dostop.Pomaknite se navzgor in našli razdelek glave za svojo domačo stran.Dodaj sidro oznako v zabojniku glave, tik pred h1 oznako.Po istem postopku povezuje, kot ste storili z ukazom nastavite atribut href za oznako teme "main_nav".Dodatek vlogo podatkov atribut , in ji dati vrednost gumb.Add-ikono podatkov atribut , in ji dati vrednost palic.Na koncu dodamo atribut podatkov-iconpos, in ji dati vrednost notext.To ustvari gumb na levi strani naslova glave.Ponovite ta korak za stran page2.

    bil to korak v pomoč?Da |Ne |Rabim pomoč
    Oglasi

• Ustvarite toliko strani v istem dokumentu HTML, kot želite.jQuery Mobile uporablja navigacijski sistem AJAX, ki samodejno se zažene ko ustvarite več strani znotraj istega dokumenta.
• dodatku prehod podatkov atribut za sidra za vizualno pomirjujoče prehod med stranmi.Na voljo prehodi so fade, pop, flip, turn, tok, slidefade, slide, slideup in slidedown.
• Uporabite -tema podatkov pripisujejo slog skoraj vsak element v vašem projektu.Privzeto, jQuery Mobile prihaja s petimi barvnimi swatches za vas, da uporabite.Sistem Theming uporablja črke kot vrednote.Zato -tema podatkov atribut sprejema vrednote a, b, c, d in e, ko ste prvič prenesti.Oglejte si jQuery Mobile Themeroller ustvariti temo po meri, z do 26 različnih barvnih swatches!
• Uporabite pozicijske podatke pripisujejo ustvariti "lepljive" ali fiksne glave in noge za vašo spletno stran.Dodaj ta atribut v vsebniku div, ki ima svoj -vlog podatki komplet za glavo ali nogo, in -položaja podatki vrednost določena.
• Oglejte si jQuery Mobile Color Kit začeti razvijati z 26 različnih tematskih swatches.

• Bodite prepričani, da uporabite HTML pripombe ločiti jQuery Mobile strani.To vam prihrani tono časa po cesti, kot enotni dokument HTML s številnimi "strani" postane zelo hitro bloated.

• jQuery Mobile Color Kit
• jQuery Mobile
• jQuery Mobile Themeroller
• Če imate težave s katero od teh korakov, vprašativprašanje za dodatno pomoč, ali delovno mesto v oddelku komentarji spodaj.