Konstruiši mobilne web stranice sa jQuery Mobile

jQuery Mobile je osjetljiv na dodir optimiziran, HTML5-temeljen korisničko sučelje sustava a.Ona je izgrađena na jQuery i jQuery UI platformi, te je idealan za brzi mobilni razvoj.JQuery Mobile okvir koristi posebne atribute koji će vam pomoći definirati i oblikovati svoje elemente, bez pisati detaljan Pravila klase koja sebe.

1. 1
   Dođite na jQuery Mobile početnu stranicu, a zatim kliknite na karticu "Preuzmi" iz glavnog izbornika navigacije.

   reklama

   Je li ovaj korak bila korisna?Da |Ne |Trebam pomoć
2. 2
   Scroll down na stranicu za preuzimanje, sve dok ne vidite Kopirajte i zalijepite isječak za CDN-domaćin datoteke rubriku .

   Kopiraj linije kod na svoj prijenosnik.Ove tri referentne datoteke su sve što vam je potrebno za provedbu okvira.

   instagram viewer

   reklama

   Je li ovaj korak bila korisna?Da |Ne |Trebam pomoć
3. 3
   Otvori željeni razvoj softvera i stvoriti novi HTML dokumenta.

   Ako nemate razvoj softvera, otvorite Notepad program na računalu.

   Je li ovaj korak bila korisna?Da |Ne |Trebam pomoć
4. 4
   Dodaj reference na svoj HTML dokument .

   Unutar svoje glavu oznaka, zalijepiti CDN-hostingom datoteka veze.

   Je li ovaj korak bila korisna?Da |Ne |Trebam pomoć
5. 5
   Napravite svoju prvu "stranicu" .

   s jQuery Mobile okvira, te stvoriti više stranica unutar iste HTML dokumenta.Unutar tijelo oznaka, izraditi spremnik div.Dodajte podataka uloga atribut, i dodijeliti joj vrijednost stranice .Na kraju dodajte ID atribut, i dodijeliti joj vrijednost početnu .

   Je li ovaj korak bila korisna?Da |Ne |Trebam pomoć
6. 6
   Dodajte zaglavlja , sadržaja i podnožje DIV kontejnera .

   Unutar svoju stranicu div spremnika, stvoriti još tri div oznake.Korištenje podataka uloga atribut, dodijeliti vrijednosti zaglavlja , sadržaja i podnožja respektivno.To je osnovna struktura jQuery Mobile stranici.

   Je li ovaj korak bila korisna?Da |Ne |Trebam pomoć
7. 7
   Dodaj zaglavlja i podnožja naslova .

   Korištenje h1 tarifni oznake, stvaranje naslova naslove za svoje zaglavlje i podnožje oznaka.

   Je li ovaj korak bila korisna?Da |Ne |Trebam pomoć
8. 8
   stvoriti drugu stranicu .

   Izvan div kontejner koji ima svoje podataka uloga atribut postavljen na stranicu, stvoriti novi spremnik diva.Dodajte podataka uloga atribut, a zatim ga postaviti na stranicu.Dodajte ID atribut, a zatim ga postaviti na stranici 2. Na kraju dodajte div spremnici za zaglavlje, sadržaj i podnožje, tako da se struktura podsjeća na početnu stranicu.

   Je li ovaj korak bila korisna?Da |Ne |Trebam pomoć
9. 9
   Izrada izbornik stranica.

   Stranica izbornik će biti izrađen na isti način kao i prve dvije stranice, ali bez podnožje.Izrada spremnika div, i postavite podataka uloga atribut stranicu.Dodajte ID atribut, i dati mu vrijednost main_nav.

   Je li ovaj korak bila korisna?Da |Ne |Trebam pomoć
10. 10
    stvoriti navigacijski izbornik strukture .

    Unutar sadržaj div spremnika, stvoriti neuređen popis.Dodajte podataka uloga atribut, i postavite vrijednost na listview.Dodajte podataka umetnute atribut, i postavite vrijednost na True.Unutar ul privjesaka za neuređen popis, dodati dva lista-točka oznake( Li tagovima).

    Je li ovaj korak bila korisna?Da |Ne |Trebam pomoć
11. 11
    Stvaranje izbornika linkovi .

    Unutar prvih popis-točke oznake, stvoriti sidro oznaku.Dodajte href atribut sidro oznaku.Koristite simbol hashtag za ciljanje ID atribut, a zatim utipkajte "kući".To je usmjeren na "home" div kontejner.Slijedite ovaj isti proces za drugi popis-stavku, ali ovaj put tip hashtag "Page2" ciljati drugu stranicu.

    Je li ovaj korak bila korisna?Da |Ne |Trebam pomoć
12. 12
    Dodaj linkove izbornika na drugim stranicama .

    Sada kada je vaš izbornik stvorio, morate postaviti sidro oznake na "dom" i "Stranica 2" stranicama za pristup.Dođite i pronađite odjeljak zaglavlju svoju početnu stranicu.Dodaj sidro oznaku unutar spremnika zaglavlja, neposredno prije h1 oznaku.Koristeći isti postupak povezivanja kao što si učinio s izbornikom, podesite href atribut hashtag "main_nav".Dodajte podataka uloga atribut, i dati mu vrijednost gumb.Dodajte podataka ikona atribut, i dati mu vrijednost barova.Na kraju dodajte podataka iconpos atribut, i dati mu vrijednost notext.To stvara gumb s lijeve strane vašeg zaglavlja naslov.Ponovite ovaj korak za stranici PAGE2.

    Je li ovaj korak bila korisna?Da |Ne |Trebam pomoć
    reklama

• stvoriti koliko stranicama unutar iste HTML dokument kao što želite.jQuery Mobile koristi AJAX navigacijski sustav koji automatski udaraca u kada se stvoriti više stranica unutar istog dokumenta.
• Dodajte podataka prijelaza atribut sidra za vizualno smirivanje prijelaza između stranica.Dostupne prijelazi su blijede, pop, flip, red, protok, slidefade, tobogan, slideup i slidedown.
• Koristite podataka tema atribut u stilu gotovo svaki element u svoj projekt.Prema zadanim postavkama, jQuery Mobile dolazi s pet boja uzoraka za korištenje.Theming sustav koristi slova kao vrijednosti.Prema tome, podataka Tema atribut prihvaća vrijednosti a, b, c, d i e kad ste ga preuzeli.Provjerite jQuery Mobile Themeroller stvoriti prilagođenu temu, s do 26 različitih uzoraka boja!
• Koristite podataka položaj atribut za stvaranje "ljepljive" ili fiksne zaglavlja i podnožja za vaše web stranice.Dodaj ovaj atribut na div kontejner koji ima svoje podataka uloga set za zaglavlje ili podnožje, a podataka položaja vrijednost fiksna.
• Provjerite pribor za jQuery Mobile Boja za početak razvoja s 26 različitih tematskih uzoraka.

• Budite sigurni da koristite HTML komentare odvojiti jQuery Mobile stranica.To štedi vam tonu vremena niz cestu, kao jedan HTML dokument s više "stranicama" dobiva otečen prilično brzo.

• jQuery Mobile Boja Kit
• jQuery Mobile
• jQuery Mobile Themeroller
• Ako imate problema sa bilo kojim od ovih koraka, pitatipitanje za dodatnu pomoć ili post u komentare ispod odjeljka.