Muodosta Mobile sivuston kanssa Jquery Mobile

jQuery Mobile on kosketusnäyttö optimoitu, HTML5-pohjainen käyttöliittymä järjestelmään.Se on rakennettu jQuery ja jQuery UI alusta, ja se on ihanteellinen nopeaa mobiili kehitys.JQuery Mobile puitteet hyödyntää erityisattribuuttia auttaa määrittelemään ja muotoilla elementtejä, ilman kirjoittaa yksityiskohtaisia ​​luokkasääntöjä itse.

1. 1
   Siirry jQuery Mobilen kotisivu, ja sitten klikkaa "Lataa" -välilehti päänavigointivalikosta.

   Mainos

   Oli tämä vaihe hyödyllinen?Kyllä |ei |Tarvitsen apua
2. 2
   Vieritä Lataussivulta kunnes näet Kopioi ja liitä Snippet CDN-isännöi tiedostoja osassa .

   Kopioi riviä koodia päälle leikepöydälle.Nämä kolme viitetiedostoja ovat kaikki, jotka sinun täytyy toteuttaa puitteet.

   instagram viewer

   Mainos

   Oli tämä vaihe hyödyllinen?Kyllä |ei |Tarvitsen apua
3. 3
   Open mieleisesi kehitysohjelmistot ja luo uusi HTML-dokumentti .

   Jos sinulla ei ole ohjelmistojen kehittäminen, avaa Notepad sovellus tietokoneessa.

   Oli tämä vaihe hyödyllinen?Kyllä |ei |Tarvitsen apua
4. 4
   Lisää viittaukset HTML dokumentti .

   Sisällä pää tunnisteita, liitä CDN-isännöi tiedosto linkkejä.

   Oli tämä vaihe hyödyllinen?Kyllä |ei |Tarvitsen apua
5. 5
   Luo ensimmäinen "sivulla" .

   Kanssa jQuery Mobile puitteet, luot useita sivuja samassa HTML-dokumentti.Sisällä kehon tunnisteet, luo div astiaan.Lisää data-asema määrite, ja määrittää sen arvon sivun .Lisää lopuksi ID määrite, ja määrittää sen arvon kotiin .

   Oli tämä vaihe hyödyllinen?Kyllä |ei |Tarvitsen apua
6. 6
   Lisää otsikon , sisältö ja footer div kontteja .

   sisällä sivusi div kontti, luo kolme muuta div tageja.Käyttämällä data-asema määrite, määritä arvot otsikon , sisältö ja footer vastaavasti.Tämä on perusrakenne jQuery Mobile sivulle.

   Oli tämä vaihe hyödyllinen?Kyllä |ei |Tarvitsen apua
7. 7
   Lisää ylä- ja alatunniste otsikot .

   käyttäminen H1 nimike tag, luoda nimike otsikot oman ylä-ja alatunnisteen tageja.

   Oli tämä vaihe hyödyllinen?Kyllä |ei |Tarvitsen apua
8. 8
   Luo toinen sivu .

   Ulkopuolella div kontti, joka on sen data-asema määrite sivulle, luo uusi div astiaan.Lisää data-asema määrite, ja aseta se sivulle.Lisää ID määrite, ja aseta se sivulle 2. Lopuksi lisää div säiliöt otsikon, sisällön ja alatunnisteen, joten rakenne muistuttaa etusivulle.

   Oli tämä vaihe hyödyllinen?Kyllä |ei |Tarvitsen apua
9. 9
   Luo valikko sivun .

   valikkosivulla aiotaan luodaan samalla tavalla kuin kaksi ensimmäistä sivua, mutta ilman footer.Luo div kontti, ja asettaa sen data-asema määrite sivulle.Lisää ID määrite, ja antaa sille arvoa main_nav.

   Oli tämä vaihe hyödyllinen?Kyllä |ei |Tarvitsen apua
10. 10
    Luo navigointi valikkorakenteessa .

    Sisällä sisällön div kontti, Järjestämätön lista luodaan.Lisää data-asema määrite, ja sen arvoksi ListView.Lisää data-inset määrite, ja sen arvoksi true.Sisällä ul tageja Järjestämätön lista, lisää kaksi listaelementti tunnisteet( li tunnisteet).

    Oli tämä vaihe hyödyllinen?Kyllä |ei |Tarvitsen apua
11. 11
    Luo valikon linkkien .

    Sisällä ensimmäinen listaelementti tunnisteet, luo ankkuri tag.Lisää href määrite ankkuriin tag.Käytä hashtagia symbolin kohdistaa ID määrite, ja kirjoita sitten "koti".Tämä kohdistaa "koti" div astiaan.Seuraa tämän saman prosessin toisen listaelementti, mutta tällä kertaa tyyppinen hashtagin "Sivu2" kohdistaa toisen sivun.

    Oli tämä vaihe hyödyllinen?Kyllä |ei |Tarvitsen apua
12. 12
    Add menu linkkejä muille sivuille .

    Nyt kun valikko on luotu, sinun täytyy asettaa ankkuri tunnisteita oman "koti" ja "sivulla 2" sivuja käyttää sitä.Selaa ylös ja löytää otsikko osiossa kotisivun.Lisää ankkuri tag sisällä otsikon säiliö, juuri ennen H1 tag.Käyttämällä samaa linkitysvaiheessa kuin teit valikosta aseta href määrite hashtagiin "main_nav".Lisää data-asema määrite, ja antaa sille arvoa painiketta.Lisää data-ikoni määrite, ja antaa sille arvon baareja.Lisää lopuksi data-iconpos määrite, ja antaa sille arvoa NOTEXT.Tämä luo painiketta vasemmalle oman otsikon otsikko.Toista tämä vaihe Sivu2 sivu.

    Oli tämä vaihe hyödyllinen?Kyllä |ei |Tarvitsen apua
    Mainos

• Luo niin monta sivua samassa HTML-dokumentti kuin haluat.jQuery Mobile käyttää AJAX navigointijärjestelmä, joka automaattisesti potkuja kun luo useita sivuja samassa asiakirjassa.
• Lisää data-siirtyminen attribuuttia ankkurit visuaalisesti tyynnyttely siirtyminen sivuille.Käytettävissä olevat siirtymät ovat fade, pop, flip, puolestaan ​​virtaus, slidefade, liukumäki, slideup ja slidedown.
• Käytä data-teeman määrite tyyli lähes jokainen elementti projektin.Oletuksena jQuery Mobile on viisi väri värikartan voit käyttää.Teemoja järjestelmä käyttää kirjaimia arvoina.Näin ollen data-teeman määrite hyväksyy arvoja, b, c, d ja e, kun ensin ladata.Tutustu jQuery Mobile Themeroller luo muokattu teema, jossa jopa 26 eri väri värikartan!
• Käytä data-asemassa määrite luoda "tahmea" tai kiinteitä ylä- ja alatunnisteita sivuston.Lisää tämän ominaisuuden div säiliöön, joka on sen data-asema asetettu ylä- tai alatunnisteen, ja data-asemassa arvoa kiinteään.
• Tutustu jQuery Mobile Color Kit lähteä kehittämään 26 eri teema värikartan avulla.

• Muista käyttää HTML kommentit erotella jQuery Mobile sivuille.Tämä säästää ton aikaa tiellä, yhtenä HTML-asiakirja, jossa on useita "sivuja" saa paisunut melko nopeasti.

• jQuery Mobile Color Kit
• jQuery Mobile
• jQuery Mobile Themeroller
• Jos ongelmia tahansa näistä vaiheista, pyydäkysymys enemmän apua, tai postitse kommentit osiosta.