Készítsük el a mobil honlap jQuery Mobile

jQuery Mobile egy érintés-optimalizált, HTML5-alapú kezelőfelület rendszer.Ez épül a jQuery és jQuery UI platform, és ez ideális a gyors mobil fejlesztés.A jQuery Mobile keretet használ különleges tulajdonságokkal, hogy segítsen meghatározni, és a stílus az elemeket, anélkül, hogy írni részletes osztályozási előírások magad.

1. 1
   Navigáljon jQuery Mobile honlapján, majd kattintson a "Download" fület a fő navigációs menü.

   Reklám

   volt ez a lépés hasznos?Igen |nem |Segítségre van szükségem
2. 2
   Lapozzon lefelé a Letöltés oldalon, amíg meg nem jelenik egy Copy-beillesztés Töredék CDN-on tárolt fájlokat szakasz .

   másolása a sornyi kódot a vágólapra.Ez a három referencia fájlok mindent, amit kell, hogy hajtsák végre a keret.

   instagram viewer

   Reklám

   volt ez a lépés hasznos?Igen |nem |Segítségre van szükségem
3. 3
   nyissa meg a kívánt fejlesztési és hozzon létre egy új HTML dokumentum .

   Ha nincs fejlesztő szoftver, nyissa meg a Jegyzettömb alkalmazást a számítógépen.

   volt ez a lépés hasznos?Igen |nem |Segítségre van szükségem
4. 4
   Hozzáadás a hivatkozások a HTML-dokumentum .

   Belül a fej címkék, illessze a CDN-házigazdája fájl linkek.

   volt ez a lépés hasznos?Igen |nem |Segítségre van szükségem
5. 5
   hozza létre az első "page" .

   A jQuery Mobile keretet hoz létre több oldalt ugyanazon HTML dokumentum.Bent a test címkék, hozzon létre egy div tároló.Adjuk hozzá a adat szerepet attribútumot, és rendeljen hozzá egy értéket oldal .Végül adjuk hozzá a ID attribútumot, és rendeljen hozzá egy értéket otthon .

   volt ez a lépés hasznos?Igen |nem |Segítségre van szükségem
6. 6
   Add a fejléc , tartalom és footer div konténerek .

   Belül az oldal div tároló, hozzon létre három div tag.A adat szerepet attribútum rendeljen értékeket a fejléc , tartalom és lábléc volt.Ez az alapvető szerkezete a jQuery Mobile oldalon.

   volt ez a lépés hasznos?Igen |nem |Segítségre van szükségem
7. 7
   Add fejléc és lábléc címek .

   A h1 címsor címke létrehozása fejezet címeit fejléc és lábléc címkék.

   volt ez a lépés hasznos?Igen |nem |Segítségre van szükségem
8. 8
   Hozzon létre egy második oldal .

   kívül div tároló, hogy megvan a adat szerepet attribútum beállítása, hozzon létre egy új div tartályba.Adjuk hozzá a adat szerepet attribútumot, majd állítsa be az oldalt.Adjuk hozzá a ID attribútumot, majd állítsa be a 2. oldalon Végül hozzáadjuk div konténerek a fejléc, tartalom és a lábléc, így a szerkezet hasonlít a honlapon.

   volt ez a lépés hasznos?Igen |nem |Segítségre van szükségem
9. 9
   létrehozása a menüt .

   A menü oldal fog létre ugyanolyan módon, mint az első két oldal, de anélkül, hogy a lábléc.Hozzon létre egy div tároló, és állítsa be a adat szerepet attribútumot oldalon.Adjuk hozzá a ID attribútumot, és hogy ez egy érték main_nav.

   volt ez a lépés hasznos?Igen |nem |Segítségre van szükségem
10. 10
    létrehozása a navigációs menü .

    Bent a tartalom div tároló, hozzon létre egy rendezetlen listát.Adjuk hozzá a adat szerepet attribútumot, és legyen az értéke listview.Adjuk hozzá a adat betét attribútumot, és legyen az értéke igaz.Bent a ul címkék rendezetlen listát, adjunk hozzá két lista-elem címkék( li tag).

    volt ez a lépés hasznos?Igen |nem |Segítségre van szükségem
11. 11
    létrehozása a menüpontjaira .

    Belül az első lista-elem címkék, hozzon létre egy horgony tag.Adjuk hozzá a href attribútumot a horgony tag.Használja a hashtag szimbólum megcélozni egy ID attribútumot, majd az "otthon".Ez megcélozza az "otthon" div tartályba.Kövesse ugyanezt az eljárást a második lista-elem, de ezúttal típusú hashtag "page2" a cél a második oldalon.

    volt ez a lépés hasznos?Igen |nem |Segítségre van szükségem
12. 12
    Add menü más oldalakra mutató hivatkozásokat .

    Most, hogy a menü jön létre, be kell állítania horgony címkéket "home" és a "2. oldal" oldalak hozzáférni.Lapozzunk felfelé, és megtalálja a fejléc részében a honlap.Adjunk hozzá egy horgony tag belsejében a fejléc tartály, mielőtt a h1 tag.Ugyanezzel összekapcsolási folyamat, mint amit a menüben állítsa a href attribútum hashtag "main_nav".Adjuk hozzá a adat szerepet attribútumot, és hogy ez egy értéket gombot.Adjuk hozzá a adat ikon attribútumot, és hogy ez egy érték rúd.Végül adjuk hozzá a adat iconpos attribútumot, és hogy ez egy érték notext.Ez létrehoz egy gombot, hogy balra a fejléc cím.Ismételjük meg ezt a lépést a page2 oldalon.

    volt ez a lépés hasznos?Igen |nem |Segítségre van szükségem
    Reklám

• létrehozása annyi oldalt, ugyanazon HTML dokumentum, ahogy tetszik.jQuery Mobile használ AJAX navigációs rendszer, amely automatikusan beindul, ha létrehoz több oldalt ugyanazon a dokumentumon belül.
• hozzá a adatok átmenet attribútumot lehorgonyzó vizuálisan appeasing átmenet az oldalak között.A rendelkezésre álló átmenetek fade, pop, flip, viszont, áramlás, slidefade, csúszda, slideup és slidedown.
• használja a adat téma attribútum a stílus szinte minden elemét a projekt.Alapértelmezésben jQuery Mobile jön öt színminták használhat.A rendszerezést rendszer betűket értékeket.Következésképpen a adat-téma attribútum értékeket fogad el a, b, c, d és e, amikor először töltse le.Nézze meg a jQuery Mobile Themeroller hogy hozzon létre egy egyéni témát, akár 26 különböző színminták!
• használja a adatok állású attribútum létrehozása "ragadós" vagy rögzített fejlécek és a lábjegyzetek az Ön weboldalán.Add ezt az attribútumot egy div tároló, amely a adat szerepet set fejléc vagy lábléc, és a adatok állású értéket rögzített.
• Nézze meg a jQuery Mobile Color Kit kell megkezdeni a 26 különböző témát színminták.

• Mindenképpen használja a HTML megjegyzéseket elválasztani a jQuery Mobile oldalakon.Ez takarít meg egy csomó időt az úton, mint egy HTML dokumentum több "oldalt" kap dagadt elég gyorsan.

• jQuery Mobile Color Kit
• jQuery Mobile
• jQuery Mobile Themeroller
• Ha problémája van bármelyik ezeket a lépéseket, kérdezze megkérdés további segítséget, vagy postai úton a hozzászólások szakaszt alább.