„Mobile App Design / Dev Building“ navigacija su „jQuery“

Dabar išmanieji telefonai yra aprūpinti labai efektyviomis žiniatinklio naršyklėmis. „JavaScript“ yra galingesnis nei bet kada anksčiau ir gali būti išplėstas naudojant kodų bibliotekas, pvz., JQuery. Kai pridėsite naujausias HTML5 / CSS3 specifikacijas, galima sukurti labai švelnias mobiliųjų žiniatinklio programų su pagrindiniu priekinio kodo kodu.

Šioje instrukcijoje parodysiu, kaip galite sukurti mobilųjį tinklapį / webapp. Mes taikysime CSS3 žiniasklaidos užklausas, kad galėtume nukreipti konkrečius įrenginius ir ekrano rezoliucijas. Be to, šiek tiek „jQuery“ padeda animuoti meniu ir įkelti išorinį puslapio turinį naudojant „Ajax“ skambučius. Dar geriau, išdėstymas gali netgi išplėsti, kad būtų rodomas tinkamai įprastose darbalaukio naršyklėse, pvz., „Chrome“ ar „Firefox“.

Tiesioginė demonstracija
Pirminis kodas

Puslapio struktūros apibrėžimas

Pradėkime pirmiausia eidami per HTML puslapį ir stilių naudodami kai kurias CSS taisykles. Aš praleisiu daugumą neįprastų meta žymelių antraštėje, nes jie tiesiogiai neturi įtakos žiniatinklio programai. Tačiau turėčiau paminėti keletą dalykų, būtent iš toliau pateikto fragmento:

X-UA suderinama yra naudojamas apibūdinti, kaip jūsų dokumentas turi būti rodomas tam tikrose naršyklėse. Tai įdomus scenarijus, kai koduojate HTML5, taigi aš per daug nesijaudinčiau. Tačiau meta peržiūros sritis žymė yra labai svarbi. Jis nustato mobiliojo naršyklės langą iki 100% vietoj standartinio priartinto efekto.

Taip pat galima išjungti vartotojo mastelį su turinio verte vartotojui pritaikomas mastelis = ne. Tačiau šiuo atveju norime nustatyti, kad viso ekrano plotis būtų toks pat, kaip ir mūsų įrenginio plotis. „Apple“ žiniatinklio programų žymos leis svetainę išsaugoti kaip pagrindinio ekrano piktogramą „iPhone“ arba „iPod Touch“. Ne visiškai būtinas, bet tikrai verta.

Vidinio kūno turinys

Kūno žymės viduje aš turiu įvyniojimo disko su ID #w. Viduje aš padaliau išdėstymą dar dviem dalimis, naudojant ID #pagebody ir #navmenu. Visas puslapio plotis pasirinktinai ribojamas iki 640 pikselių, kad išdėstymas atitiktų griežtą skaičių.

   HK Mobile
 
  Sveiki atvykę į mobilųjį tinklapį!
 
 
   Meniu nuorodos
 
  Namai
 Apie mus
 Reklamuokite
 Rašykite mums
 Kontaktai
 Privatumo politika

Navigacijos meniu suteikiama mažesnė z indekso reikšmė #pagebody visada yra viršuje. Tai yra labai svarbu, nes „JavaScript“ kodas bus nukreiptas virš puslapio korpuso tam tikru pikselių skaičiumi, kad atskleistų navigaciją po juo.

Prieš kiekvieną .html puslapį naudoju maišos simbolį (#), kad sustabdytumėte kai kuriuos prastus „Mobile Safari“ veiksmus. Kai spustelėsite nuorodą, pasirodys URL juosta ir nuspaudžiamas turinys. Tačiau, kai nurodote ID, niekas neperkraunamas, išskyrus „JavaScript“ skambučius.

CSS padėties nustatymas

Mūsų CSS kode nėra daug klaidinančio turinio. Dauguma padėties nustatymų atliekami rankiniu būdu, o tada manipuliuojama per jQuery. Tačiau mūsų dokumente yra keletas įdomių dalių.

/ ** @group core body ** / #w #pagebody pozicija: santykinis; kairėje: 0; maksimalus plotis: 640px; min. plotis: 320px; z-indeksas: 99999;  #w #navmenu fonas: # 475566; aukštis: 100%; ekranas: blokas; padėtis: fiksuota; plotis: 300px; kairėje: 0px; viršuje: 0px; z-indeksas: 0;

Šis aukščiausias segmentas apibrėžia abiejų puslapio dalių stilius. Mūsų navigacijos meniu yra tik 300 pikselių pločio, todėl paliekama šiek tiek vietos, kad puslapio turinys būtų matomas. Atidarymo / uždarymo meniu mygtukas taip pat yra tiesiai kairėje pusėje ir visada prieinamas. Svarbus gabalas čia yra z indekso turto vertė ir naudojimas padėtis: fiksuota; mūsų Navmenu.

Į viršų įrankių juostos antraštė taip pat yra įdomi dalis. Tai nustatoma į fiksuotą poziciją, kad ji pereis prie puslapio turinio. Tai atkartoja panašų efektą, kaip galite rasti bet kurioje „iOS“ programos pavadinimo juostoje.

/ ** @group antraštė ** / #w #pagebody header # toolbarnav display: block; padėtis: fiksuota; kairėje: 0px; viršuje: 0px; z-indeksas: 9999; fonas: # 0b1851 URL („img / tabbar-solid-bg.png“) viršutinė kairėn ne kartoti; pasienio spindulys: 5px; -moz-border-spindulys: 5px; -webkit-border-radius: 5px; -o-pasienio spindulys: 5px; apatinis dešinysis spindulys: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; apačioje-apačioje kairysis spindulys: 0; -moz-border-radius-bottomleft: 0; -webkit-pasienio apačioje kairysis spindulys: 0; aukštis: 44px; plotis: 100%; maksimalus plotis: 640px;  #w #pagebody header # toolbarnav h1 text-align: centre; įdėklas: 10px; įdėklas dešinėje: 40px; spalva: # e6e8f2; šrifto svoris: paryškintas; šrifto dydis: 2.1em; teksto šešėlis: 1px 1px 0px # 313131;

Mobiliosios taisyklės

Tai lengva pastebėti, kad aš naudoju fono paveikslėlį mėlynai antraštės juostai. Tai yra 640 × 44 taškų dydžio, kad būtų išlaikyta nuosekli išdėstymo struktūra. Bet aš taip pat sukūriau vaizdą @ 2x iPhone / iPad tinklainės ekrane. Galite matyti abu žemiau pateiktus vaizdus arba patraukti juos iš mano demo šaltinio kodo.

System/demo/img/[email protected]
System/demo/img/[email protected]

Nustatysiu šiai funkcijai skirtą mobilųjį CSS kitame pavadinime atsakymas.css. Jame yra dvi žiniasklaidos užklausos, pakeičiančios pavadinimo juostą bg ir tinklainės prietaisų meniu mygtuko piktogramą.

/ ** tinklainės ekranas ** / @ media only screen ir (-webkit-min-device-pixel-ratio: 2), tik ekranas ir (min - moz-device-pixel-ratio: 1.5), tik ekranas ir ( min-device-pixel-ratio: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') viršutinė kairėn ne kartoti; fono dydis: 640px 44px;  #w #pagebody header # menu-btn background: url ('img/[email protected] ') ne kartoti; fono dydis: 53px 30px;

Meniu rodyklių projektavimas

Navigacijos srityje taip pat įtraukiau mažą rodyklės piktogramą į dešinę kiekvieno meniu nuorodos pusę. Tai galima lengvai pakeisti vaizdu iš bet kokio kūrybinio meno kūrinio. Tačiau dažniausiai visi CSS3 mėgėjai mėgins išbandyti šį metodą.

#w #navmenu ul li a :: po turinys: ", ekranas: blokas, plotis: 6px, aukštis: 6px, dešinė pusė: 3px kietas # d0d0d8, sienos viršus: 3px kietas # d0d0d8; : 30px; top: 45%; -webkit-transform: rotate (45deg); -moz-transformuoti: pasukti (45deg); -o-transformuoti: pasukti (45deg); transformuoti: pasukti (45deg); #w #navmenu ul li a: hover :: po border-color: # cad0e6;

Mes naudojame transformuoti po turinio sukurti mažą sieną. Aš taip pat nustatau pozicija: absoliutus; todėl mes galime laisvai perkelti šias sienas aplink vidinį nuorodos elementą. Tai labai lengva keisti sienos spalvą ant nugaros valstybės, kuri suteikia dinamiškesnį jausmą. Tai gana neįtikėtina, ką galite atlikti tik naudodami pagrindines HTML5 ir CSS3 taisykles.

Bet dabar pereikime prie „JavaScript“ kodo dalių ir vienetų. Atminkite, kad reikia, kad jQuery biblioteka būtų tinkamai naudojama.

jQuery Animuoti

Rašydamas šiuos pasirinktinius kodus sukūriau naują pavadinimą script.js. Nedvejodami parašykite juos tiesiogiai > arba atsisiųskite mano pavyzdį iš demo šaltinio kodo.

 $ (dokumentas). jau (funkcija () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = width: $ (langas) .width (), aukštis: $ (langas) .height (); // surinkti kintamuosius kaip // viewport.width / viewport.height 
 Norėdami pradėti, nustatau kai kuriuos puslapio kintamuosius, kur galime dokumento elementus daug greičiau nurodyti. Peržiūros srities vertė niekada nenaudojama, tačiau ji gali būti naudinga, jei norite reguliuoti animacijos etapus. Pvz., Galite patikrinti esamą naršyklės plotį ir atitinkamai atidaryti savo meniu.
 funkcija openme () $ (funkcija () topbar.animate (left: "290px", trukmė: 300, eilė: false); pagebody.animate (left: "290px", trukmė: 300 , eilė: false););  function closeme () var closeme = $ (funkcija () topbar.animate (left: "0px", trukmė: 180, eilė: false); pagebody.animate (left: "0px", trukmė: 180, eilė: false);); 
 Toliau aš nustatiau dvi svarbias funkcijas meniu atidarymui ir uždarymui. Tai galėjo būti padaryta vienoje funkcijoje ir atšaukimo perjungime - išskyrus tuos atvejus, kai mes iš tikrųjų turime animuoti du skirtingus elementus tuo pačiu metu. Deja, tai nėra numatytasis jQuery elgesys, todėl turime pasinaudoti alternatyvia sintakse.
 Nurodomi du nukreipiami elementai viršutinė juosta ir puslapis. Vidinis turinys su baltu fonu yra visas puslapis; tačiau antraštės juostos pozicija yra pritvirtinta puslapio viršuje. Tai reiškia, kad jis natūraliai nebus animuotas su puslapiu ir turime naudoti atskirą skambutį. Atidarymas yra nustatomas 290px kairėje (beveik visas 300 pikselių navigacijos plotis) ir uždarymo funkcija ją traukia.
 Dinaminio turinio įkėlimas
 Anksčiau pateiktas kodas yra pakankamai paprastas, kad būtų galima pasirūpinti animacija. Ir teoriškai tai viskas, ko jums reikia tokiai paprastai mobiliai svetainei - bet noriu pridėti šiek tiek daugiau.
 Kiekvieną kartą, kai vartotojas spustelės meniu nuorodą, norime uždaryti esamą navigaciją ir rodyti įkėlimo gif, kol ieškome puslapio turinio. Tada, kai baigsite, pašaliname gif vaizdą ir įkeliame jį viduje. Tai fantastiška, nes galime net naudoti statinius .html puslapius. Nei PHP, nei Ruby, nei Perl ar bet kokių backend kalbų, kad dalykai būtų nepatogūs.
 Paspaudimų tvarkymas
 Pirmiausia norime išbandyti, kai mūsų vartotojai spustelės navigacijos mygtukus. Tai sustabdys įprastą „href“ reikšmę nuo įkėlimo ir galime naudoti savo funkcijas, kad būtų rodomas išorinis turinys.
 // puslapio turinio įkėlimas navigacijai $ ("a.navlink") gyventi ("spustelėkite", funkcija (e) e.preventDefault (); var linkurl = $ (tai) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = '„; 
 Dabar mes atidarome bet kurio inkaro sujungimo selektorių ryšys. Kai naudotojas spusteli vieną iš šių nuorodų, sustabdome jį nuo įkėlimo ir nustatymo, kad būtų nustatytas visas URL. Aš taip pat nustatiau turinio HTML kintamąjį, kad į jį būtų įtrauktas standartinis vaizdo krautuvas. Jei norite pritaikyti savo turinį, labai rekomenduoju „Ajaxload“.
 Ajax .load ()
 Šiam tikslui yra du skirtingi gabalai, kuriuos aš puikiai suskaidžiau. Žemiau pateikiamas kodas yra pirmasis mūsų bitų, kurie uždaro navigacijos meniu ir iškelia visą dokumento langą iki galo. Mes norime pakeisti vidinį kūno turinį nedideliu krautuvo animavimu, o naudotojai nemato to, jei žiūrėjo puslapio apačioje.
 closeme (); $ (funkcija () topbar.css ("top", "0px"); window.scrollTo (0, 1););
 Dabar galiausiai norime pakeisti vidinį kūno turinį su mūsų vaizdu ir parsisiųsti išorinį puslapį įkelti. Paprastai tai užtruks tik kelis šimtus milisekundžių ar net greičiau, todėl nustatysiu išjungimo funkciją.
 content.html (imgloader); setTimeout (funkcija () content.load (linkhtmlurl, funkcija () / * nėra atgalinio ryšio * /), 1200);
 Tai bus pristabdyta 1200 milisekundžių prieš įkeliant naują turinį. Mano demo atveju tai atrodo daug geriau ir suteikia jums idėją, kaip programa elgsis lėtesniu interneto ryšiu.
 
 Išvada
 Raginu visus žiniatinklio kūrėjus atsisiųsti mokymo šaltinio kodą ir žaisti apie save. Tai toks pagrindinis pavyzdys, ką galima pasiekti su HTML / CSS3 ir JavaScript efektų paliesti. Mobiliųjų ekranų kūrimas yra paprastesnis nei bet kada su žiniasklaidos užklausomis ir daugiau išplečiamų žiniatinklio naršyklių.
 Pažiūrėkite, ar galite taikyti šį kodą būsimuose interneto projektuose. Mobiliųjų programų kūrimas yra menas, panašus į interneto dizainą, ir reikalauja daug atsidavimo ir praktikos. Tikiuosi, kad ši pamoka gali būti gera pradžia tik keliems entuziastingiems kūrėjams. Jei turite klausimų ar minčių apie kodą, nedvejodami pasidalykite su mumis pokalbių srityje.