Konstruēt Mobile Website ar jQuery Mobile

jQuery Mobile ir touch-optimizēta, HTML5 bāzes lietotāja saskarne sistēma.Tā ir veidota uz jQuery un jQuery UI platformas, un tas ir ideāls ātrai mobilo attīstību.JQuery Mobile sistēma izmanto īpašus atribūtus, lai palīdzētu noteikt un stilu jūsu elementiem, bez uzrakstīt detalizētu klasi notekumi sevi.

1. 1
   Virzīties uz jQuery Mobile mājas lapā, un pēc tam noklikšķiniet uz "Download" tab no galvenajā navigācijas izvēlnē.

   Reklāma

   bija šis solis noderīga?Jā |nē |Man ir vajadzīga palīdzība
2. 2
   Ritiniet uz leju lejupielādes lapā, līdz redzat Copy-and-Paste fragments CDN-hosted failu nodaļas .

   kopēšana līnijas kodu uz jūsu starpliktuvē.Šie trīs atsauces faili ir viss, kas jums ir nepieciešams, lai īstenotu sistēmu.

   instagram viewer

   Reklāma

   bija šis solis noderīga?Jā |nē |Man ir vajadzīga palīdzība
3. 3
   Atvērt vēlamo attīstības programmu un izveidot jaunu HTML dokumentu .

   Ja jums nav attīstības programmatūru, atveriet Notepad lietojumprogrammu datorā.

   bija šis solis noderīga?Jā |nē |Man ir vajadzīga palīdzība
4. 4
   Pievienot atsauces uz jūsu HTML dokumentu .

   Inside Jūsu galvu tagus, ielīmēt CDN-hosted failu saites.

   bija šis solis noderīga?Jā |nē |Man ir vajadzīga palīdzība
5. 5
   Izveidojiet savu pirmo "lapas" .

   Ar jQuery Mobile ietvaros, jums izveidot vairākas lapas vienā un tajā pašā HTML dokumentā.Inside ķermeņa tagiem, izveidot div konteineru.Pievienojiet datu lomu atribūtu, un piešķirt tai vērtību lapu .Visbeidzot, pievienojiet ID atribūtu, un piešķirt tai vērtību mājas .

   bija šis solis noderīga?Jā |nē |Man ir vajadzīga palīdzība
6. 6
   Pievieno galvenes , satura un kājenes div konteineri .

   Inside jūsu lapu div konteinerā, izveidot vēl trīs div tagus.Izmantojot datu lomu atribūtu, piešķirt vērtības header , satura un kājenes attiecīgi.Tas ir pamata struktūra jQuery Mobile lapā.

   bija šis solis noderīga?Jā |nē |Man ir vajadzīga palīdzība
7. 7
   Pievienot galvenes un kājenes virsraksti .

   Izmantojot h1 pozīcijas tagu, izveidot pozīciju nosaukumi jūsu galvenes un kājenes tagus.

   bija šis solis noderīga?Jā |nē |Man ir vajadzīga palīdzība
8. 8
   Izveidojiet otru lapu .

   Ārpus div konteinerā, kas ir tās datu lomu atribūtu iestatīts uz lapu, izveidot jaunu div konteineru.Pievienojiet datu lomu atribūtu, un pēc tam iestatiet to uz lapu.Pievieno ID atribūtu, un pēc tam iestatiet to uz 2. lpp Visbeidzot, pievienot div konteinerus galvenes, saturu un kājenes, tāpēc struktūra līdzinās mājas lapā.

   bija šis solis noderīga?Jā |nē |Man ir vajadzīga palīdzība
9. 9
   Izveidot izvēlnes lapas .

   Ēdienkarte lapa tiks izveidots tādā pašā veidā kā pirmās divas lappuses, bet bez kājeni.Izveidot div konteineru, un noteikt tās datu lomu atribūtu lapā.Pievieno ID atribūtu, un piešķir tai vērtību main_nav.

   bija šis solis noderīga?Jā |nē |Man ir vajadzīga palīdzība
10. 10
    Izveidot navigācijas izvēlni struktūru .

    Inside saturs div konteinerā, izveidojiet Nekārtots saraksts.Pievienojiet datu lomu atribūtu, un noteikt tās vērtību ListView.Pievienojiet datu ielaidums atribūtu, un noteikt tās vērtību taisnība.Inside ul tagus par Nekārtots saraksts, pievieno divas saraksta posteni atslēgvārdus( li tagi).

    bija šis solis noderīga?Jā |nē |Man ir vajadzīga palīdzība
11. 11
    Izveidot izvēlnes saites .

    Inside pirmajiem saraksts-postenis tagus, izveidot enkura tagu.Pievieno href atribūtu enkura tagu.Izmantojiet hashtag simbolu, lai atlasītu ID atribūtu, un pēc tam ierakstiet "mājās".Tas ir vērsts uz "Home" div konteiners.Izpildiet šo pašu procesu otrā saraksta posteņa, bet šoreiz tips hashtag "2 lapa", lai mērķa otro lapu.

    bija šis solis noderīga?Jā |nē |Man ir vajadzīga palīdzība
12. 12
    Pievienot izvēlnes saites uz citām lapām .

    Tagad, kad ir izveidota jūsu menu, jums ir nepieciešams, lai uzstādītu enkuru tagus jūsu "mājās" un "2 lapa" lapas tai piekļūt.Ritiniet uz augšu un atrast galvenes sadaļā jūsu mājas lapā.Pievienot enkura tagu iekšā galvenes konteinerā, tieši pirms h1 tag.Izmantojot to pašu saistīšanas procesu, kā jūs ar izvēlni, iestatīt href atribūtu kā atsauci "main_nav".Pievienojiet datu lomu atribūtu, un piešķir tai vērtību pogu.Pievienojiet datu ikonas atribūtu, un piešķir tai vērtību bāri.Visbeidzot, pievienojiet datu iconpos atribūtu, un piešķir tai vērtību notext.Tas rada pogu pa kreisi no jūsu galvenes titulu.Atkārtojiet šo soli par 2 lapa lapā.

    bija šis solis noderīga?Jā |nē |Man ir vajadzīga palīdzība
    Reklāma

• izveidot tik daudz lapām, vienā un tajā pašā HTML dokumentā, kā jums patīk.jQuery Mobile izmanto AJAX navigācijas sistēmu, kas automātiski kicks, ja jums izveidot vairākas lapas vienā un tajā pašā dokumentā.
• Pievienojiet datu pārejas atribūtu enkuriem, lai vizuāli appeasing pāreju starp lapām.Pieejamie pārejām ir izbalināt, pop, flip, savukārt, plūsma, slidefade, slaidu, slideup un slidedown.
• Izmantojiet datu tēma piedēvēt stils gandrīz katru elementu jūsu projektu.Pēc noklusējuma jQuery Mobile nāk ar pieciem krāsu swatches lai jūs varētu izmantot.Theming Sistēma izmanto burtus kā vērtību.Līdz ar to datu tēma atribūts pieņem vērtības a, b, c, d un e, kad pirmo reizi to lejupielādēt.Pārbaudiet jQuery Mobile Themeroller izveidot pielāgotu tēmu, ar līdz pat 26 dažādu krāsu swatches!
• Izmantojiet datu amats piedēvēt radīt "lipīga" vai fiksēto galvenes un kājenes, lai jūsu mājas lapā.Pievienot šo atribūtu uz div konteinerā, kas ir tās datu lomu komplektu uz galveni vai kājeni, un datu pozīciju vērtību fiksēts.
• Pārbaudiet jQuery Mobile Color Kit sākt izstrādāt ar 26 dažādu tēmu swatches.

• Noteikti izmantot HTML komentārus atsevišķas jūsu jQuery Mobile lapas.Tas ietaupa jums ton laiku pa ceļu, kā vienu HTML dokumentu ar vairākiem "lapas" kļūst uzpampis diezgan ātri.

• jQuery Mobile Color Kit
• jQuery Mobile
• jQuery Mobile Themeroller
• Ja Jums ir problēmas ar kādu no šiem soļiem, jautājietjautājums vairāk palīdzēt, vai amatu komentāru sadaļā zemāk.