Construct mobilné webové stránky s jQuery Mobile

jQuery Mobile je optimalizované pre dotykové, HTML5 systém založený na užívateľské rozhranie.Je postavený na platforme jQuery a jQuery UI, a je ideálny pre rýchly vývoj mobilných.Rámec jQuery Mobile využíva špeciálne atribúty, ktoré pomáhajú definovať a štýl svoje prvky, aby bolo nutné písať podrobný Pravidlám triedy sami.

1. 1
   Prejdite k jQuery Mobile domovskeja potom kliknite na záložku "Download" z hlavného menu navigácie.

   Reklama

   Bol tento krok užitočné?áno |nie |Potrebujem pomoc
2. 2
   prejdete Ak dole na stránke sťahovania až uvidíte Copy-and-Paste úryvok CDN-hostované súbory sekcie .

   Skopírujte riadky kódu do vašej schránky.Tieto tri referenčné súbory sú všetko, čo potrebujete pre vykonávanie rámca.

   instagram viewer

   Reklama

   Bol tento krok užitočné?áno |nie |Potrebujem pomoc
3. 3
   otvoriť svoj preferovaný vývoj softvéru a vytvoriť nový HTML dokument .

   Ak nemáte vývoj softvéru, otvorte aplikáciu Poznámkový blok v počítači.

   Bol tento krok užitočné?áno |nie |Potrebujem pomoc
4. 4
   Pridať odkazy do vášho HTML dokumentu .

   vnútri hlavy značiek, vložte CDN-hostované odkazy súborov.

   Bol tento krok užitočné?áno |nie |Potrebujem pomoc
5. 5
   Vytvorte si svoj prvý "strana" .

   S rámca jQuery Mobile, môžete vytvoriť viac stránok v rámci toho istého dokumentu HTML.Vnútri telo značiek, vytvoriť kontajner div.Pridajte atribút dát role, a priradiť mu hodnotu strana .Nakoniec pridajte atribút ID a priraďte jej hodnotu domáci .

   Bol tento krok užitočné?áno |nie |Potrebujem pomoc
6. 6
   Pridajte hlavičky , obsahu a zápätie div kontajnery .

   Vnútri svoje stránky div kontajnera, vytvorte ďalšie tri tagy div.Použitie dát role atribút , priradiť hodnoty hlavičky , obsahu a zápätie resp.To je základná štruktúra stránky jQuery Mobile.

   Bol tento krok užitočné?áno |nie |Potrebujem pomoc
7. 7
   Pridať hlavičky a päty tituly .

   Použitie h1 okruhu tag, vytvoriť okruh tituly pre vaše hlavičky a päty tagy.

   Bol tento krok užitočné?áno |nie |Potrebujem pomoc
8. 8
   Vytvorenie druhej stránky .

   Mimo kontajnera div, ktorá má svoje dát role atribút nastavený na stránku, vytvoriť nový div kontajnera.Pridajte dát role atribút , a nastavte ju na stranu.Pridajte atribút ID , a potom ju nastaviť na strane 2. Nakoniec pridajte div kontajnery pre hlavičky, obsah a päty, takže štruktúra sa podobá domovskú stránku.

   Bol tento krok užitočné?áno |nie |Potrebujem pomoc
9. 9
   vytvoriť ponuku stránky .

   Stránka menu sa bude vytvorená rovnakým spôsobom ako v prvých dvoch stranách, ale bez päty.Vytvoriť kontajner div a nastavte jeho údajov role atribút na stranu.Pridajte atribút ID , a dať mu hodnotu main_nav.

   Bol tento krok užitočné?áno |nie |Potrebujem pomoc
10. 10
    Vytvorenie navigačné štruktúry menu .

    Vnútri obsah div kontajnera , vytvorenie zoznamu.Pridajte atribút dát role, a nastaviť jeho hodnotu na zoznam.Pridajte atribút dát vsadenie , a nastaviť jeho hodnotu na true.Vnútri ul tagy pre zoznamu, pridajte dve list-item tagy( Li tagy).

    Bol tento krok užitočné?áno |nie |Potrebujem pomoc
11. 11
    Vytvorenie ponuke odkazy .

    Vnútri prvých list-item značiek, vytvorte kotevné tag.Pridajte atribút HREF do značky ukotvenia.Použite krížik zamerať atribút ID , a potom napísať "domov".To sa zameriava na "domácej" div kontajnera.Postupujte podľa tohto rovnaký postup pre druhý list-item, ale tentoraz typ hashtag "strana2" zamerať sa na druhú stranu.

    Bol tento krok užitočné?áno |nie |Potrebujem pomoc
12. 12
    Doplniť odkazy v menu na iné stránky .

    Teraz, keď je vytvorená vaša menu, je potrebné nastaviť tagy na "domácej" a "strana 2" strán sa k nim dostať.Rolovať hore a nájsť sekcie hlavičky svojej domovskej stránky.-Li Pridať kotevné tag vnútri kontajnera záhlavie, tesne pred značkou h1 .S použitím rovnakého procesu prepájania ako ste sa v menu, nastaviť atribút href do hashtag "main_nav".Pridajte dát role atribút , a dať mu hodnotu tlačidla.Pridajte dát ikonu atribút , a dať mu hodnotu barov.Nakoniec pridajte atribút dát iconpos , a dať mu hodnotu notext.Tým sa vytvorí tlačidlo na ľavej strane vášho titulu hlavičky.tento krok pre stránku str.2 opakovať.

    Bol tento krok užitočné?áno |nie |Potrebujem pomoc
    Reklama

• vytvoriť toľko stránok v rámci toho istého dokumentu HTML, ako sa vám páči.jQuery Mobile používa navigačný systém, AJAX, ktorý automaticky kopy pri vytváraní viacerých stránok v rámci toho istého dokumentu.
• Pridajte dát prechodu atribút na kotvy pre zrakovo nekonfliktný prechod medzi stránkami.K dispozícii sú prechody sú vyblednutie, pop, flip, zákruta, prietok, slidefade, šmykľavka, slideup a slidedown.
• Pomocou dát tému atribút štýl takmer každý prvok v projekte.V predvolenom nastavení, jQuery Mobile prichádza s piatimi farebných vzorkovníkov pre vás na použitie.Motívov Systém používa písmená ako hodnoty.V dôsledku toho dát tému atribút prijíma hodnoty a, b, c, d a e, keď ste prvýkrát si ho stiahnuť.Pozrite sa na jQuery Mobile Themeroller vytvoriť vlastný motív, s až 26 rôznych farebných vzorníkov!
• Pomocou dát pozície atribút vytvoriť "lepkavé" alebo pevné hlavičky a päty pre vaše webové stránky.Pridať tento atribút do kontajnera div, ktorá má svoje dát role sadu do hlavičky alebo päty, a dát o polohe hodnotu pevné.
• Pozrite sa na Kit jQuery Mobile Color začať rozvíjať s 26 rôznych tematických vzorníkov.

• Nezabudnite použiť komentáre HTML k oddeleniu stránok jQuery Mobile.To vám ušetrí veľa času dole na ceste, ako jediný HTML dokumentu s viacerými "stránok" dostane nezväčší celkom rýchlo.

• jQuery Mobile Color Kit
• jQuery Mobile
• jQuery Mobile Themeroller
• Ak máte problémy s niektorou z týchto krokov, požiadajteotázkou pre ďalšiu pomoc, alebo poštou v sekcii komentáre nižšie.