Mobiilirakenduste disain / Dev Building Navigation koos jQuery

Nutitelefonid on nüüd varustatud väga tõhusate veebibrauseritega. JavaScript on võimsam kui kunagi varem ja seda saab laiendada koodiraamatukogude, näiteks jQuery abil. Viimaste HTML5 / CSS3 spetsifikatsioonide lisamisel on võimalik ehitada väga õrnad mobiilirakendused, millel on mõned põhifaili koodid.

Selles juhendis näitan, kuidas saate luua mobiilipõhise veebilehe / webapp. Me kasutame CSS3 meedia päringuid konkreetsete seadmete ja ekraani resolutsioonide sihtimiseks. Plus natuke jQuery aitab animeerida menüü ja laadida välise lehe sisu kasutades Ajax kõned. Veelgi parem, paigutus võib isegi laieneda, et kuvada korralikult tavalistes brauserites nagu Chrome või Firefox.

Live Demo
Lähtekood

Lehekülje struktuuri määratlemine

Alustame kõigepealt HTML-lehekülje läbimisest ja stiili kasutades mõningaid CSS-reegleid. Ma jätan enamiku ebatavalistest metakoodidest üle päises, kuna need ei mõjuta veebirakendust otse. Siiski on mõned, mida ma peaksin mainima, nimelt alljärgnevalt:

X-UA-ühilduv kirjeldatakse, kuidas teie dokument peaks teatud brauserites muutuma. HTML5-s kodeerimisel on see huvitav stsenaarium, nii et ma ei muretse selle üle liiga palju. Kuid meta vaateava silt on väga oluline. See seab mobiilibrauseri akna standardsuurendatud efekti asemel 100% -ni.

Samuti on võimalik kasutaja suumi sisu väärtusega keelata kasutaja skaleeritav = ei. Kuid sellisel juhul tahame lihtsalt seada täisekraani laiuse sama, mis meie seadme laius. Apple'i veebirakenduse sildid võimaldavad veebisaidil salvestada oma iPhone'i või iPod Touchi avakuva ikoonina. Mitte täiesti vajalik, kuid kindlasti väärt.

Sisekeha sisu

Keha sildi sees olen seadistanud ID-ga ümbrisdetaili #w. Toas ma olen katkestanud paigutuse veel kaheks diviks, kasutades ID-sid #pagebody ja #navmenu. Kogu lehekülje laius on valikuliselt piiratud 640xx-ga, nii et paigutus kaalub rangele numbrile.

   HK Mobile
 
  Tere tulemast mobiililehele!
 
 
   Menüü lingid
 
  Kodu
 Meist
 Reklaamima
 Kirjutage meile
 Kontaktid
 Privaatsuspoliitika

Navigeerimismenüüle antakse madalam z-indeksi väärtus, nii et #pagebody on alati peal. See on ülioluline, kuna JavaScript-kood libiseb üle lehekülje korpuse teatud arvu piksleid, et paljastada navigatsioon allpool.

Olen kasutanud iga .html-lehekülje ees räsi- sümbolit (#), et peatada mobiilse Safari vähene käitumine. Kui klõpsate lingile, kuvatakse URL-i riba ja lükatakse sisu alla. ID-ga viitamisel ei laadita midagi uuesti peale JavaScript-kõnede kaudu.

CSS-i positsioneerimine

Meie CSS-koodi sees pole palju segadust tekitavat sisu. Enamik positsioneerimisest toimub käsitsi ja seejärel manipuleeritakse jQuery kaudu. Kuid meie dokumendis on mõned huvitavad tükid.

/ ** @grupi põhikeha ** / #w #pagebody positsioon: suhteline; vasakul: 0; maksimaalne laius: 640px; min-laius: 320 px; z-indeks: 99999;  #w #navmenu taust: # 475566; kõrgus: 100%; kuva: plokk; asend: fikseeritud; laius: 300 px; vasakule: 0px; top: 0px; z-indeks: 0;

See ülemine segment määratleb stiili mõlema lehekülje osas. Meie nav menüü on ainult 300xx lai, nii et see jätab natuke ruumi lehekülje sisu vaatamiseks. Avatud / sulgev menüünupp asub ka otse vasakul küljel ja alati kättesaadav. Oluline osa on z-indeksi omaduste väärtus ja kasutamine asend: fikseeritud; meie navmenus.

Ülemine tööriistariba päis on ka huvitav osa. See on seatud fikseeritud asendisse, et see keriks lehekülje sisuga. See kordab sarnast efekti, kui leiad mis tahes iOS-i rakenduse tiitliribal.

/ ** @grupi päis ** / #w #pagebody header # toolbarnav display: block; asend: fikseeritud; vasakule: 0px; top: 0px; z-indeks: 9999; taust: # 0b1851 url ('img / tabbar-solid-bg.png') üleval vasakule kordamata; raadius: 5 px; -moz-border-radius: 5 px; -webkit-border-radius: 5px; -o-raadius: 5 px; piir-alumine-parem raadius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; piir-alumine-vasak-raadius: 0; -moz-border-radius-bottomleft: 0; -webkit-piiri-alt-vasak-raadius: 0; kõrgus: 44px; laius: 100%; maksimaalne laius: 640px;  #w #pagebody header # toolbarnav h1 text-align: center; polster-top: 10px; polsterdus-parem: 40px; värv: # e6e8f2; fondi kaal: rasvane; fondi suurus: 2.1em; teksti-vari: 1px 1px 0px # 313131;

Mobiilreeglid

On lihtne märgata, et kasutan ka sinise päisriba tekstuuri taustapilti. See on suurusega 640 × 44 pikslit, et säilitada järjepidev paigutusstruktuur. Aga olen ka välja töötanud pildi @ 2x iPhone / iPad võrkkesta kuvamiseks. Te võite näha mõlemat allpool olevat pilti või haarata need minu demo lähtekoodi alt.

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

Seadistan selle funktsiooni jaoks mobiilse CSS-i teisele nimega failile vastus.css. See sisaldab kahte meediaküsimust, mis asendavad pealkirjariba bg ja võrkkesta seadmete menüünupu ikooni.

/ ** võrkkesta kuvamine ** / @ media only screen ja (-webkit-min-device-pixel-ratio: 2), ainult ekraan ja (min - moz-device-pixel-ratio: 1,5), ainult ekraan ja ( min-device-pixel-ratio: 1.5) #w #pagebody päis taust: # 0b1851 url ('img/[email protected] ') üleval vasakul kordamata; tausta suurus: 640px 44px;  #w #pagebody header # menu-btn taust: url ('img/[email protected] ') korduv; tausta suurus: 53px 30px;

Menüü noolte kujundamine

Navigeerimisalal olen lisanud ka väikese noole ikooni iga menüü linki paremale küljele. Seda saab kergesti asendada mis tahes loomingulise kommunaalteose kujutisega. Kuid enamasti armastavad seda meetodit katsetada kõik CSS3 aficionad.

#w #navmenu ul li a :: pärast sisu: "; kuva: plokk; laius: 6 pikslit; kõrgus: 6 pikslit; parempoolne: 3px tahke # d0d0d8; ääris-top: 3px tahke # d0d0d8; : 30px, top: 45%; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -o-transform: pööra (45deg); transform: pöörake (45deg); #w #navmenu ul li a: hover :: pärast border-color: # cad0e6;

Me kasutame teisendada vara pärast sisu loomist. Ma seadistan ka positsioon: absoluutne; nii et me saame neid piire vabalt sisemise lingi elemendi ümber liigutada. See on ülimalt lihtne piirata värvi hover olek, mis pakub rohkem dünaamiline tunne. See on päris uskumatu, mida saab teha lihtsalt HTML5 ja CSS3 põhireeglitega.

Aga nüüd liigume JavaScript-koodi bitidesse ja tükkidesse. Pea meeles, et see nõuab, et jQuery raamatukogu lisaks oma koodi õigesti töötama.

jQuery Animeeritud

Nende kohandatud koodide kirjutamisel olen loonud uue nimega dokumendi script.js. Julgelt kirjutage need otse > silte või laadige demo allikakoodist minu näide alla.

 $ (dokument) .ready (funktsioon () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = width: $ (aken) .width (), kõrgus: $ (aken) .height (); // muutujate allalaadimine nimega // viewport.width / viewport.height 
 Alustamiseks olen seadistanud mõned lehekülje muutujad, kus me saame dokumendis elemente palju kiiremini viidata. Vaate- pordi väärtust ei kasutata kunagi, kuid see võib olla kasulik, kui soovite animatsioonietappe reguleerida. Näiteks saate vaadata praegust brauseri laiust ja avada vastavalt oma menüü väiksemaks või laiemaks.
 funktsioon openme () $ (funktsioon () topbar.animate (left: "290px", kestus: 300, järjekord: false); pagebody.animate (left: "290px", kestus: 300 , järjekord: false););  function closeme () var closeme = $ (funktsioon () topbar.animate (vasakul: "0px", kestus: 180, järjekord: vale); pagebody.animate (left: "0px", kestus: 180, järjekord: false);); 
 Järgmisena olen määranud kaks olulist funktsiooni menüü avamiseks ja sulgemiseks. Neid oleks võinud teha ühe funktsiooni ja tagasihelistamise lülitusega - välja arvatud juhul, kui meil on vaja samaaegselt animeerida kahte erinevat elementi. Kahjuks ei ole see jQuery vaikimisi käitumine, mistõttu peame kasutama alternatiivset süntaksit.
 Nimetatakse need kaks elementi, mida me sihtime topbar ja lehtkeha. Sisemine sisupiirkond valge taustaga on täislehekülg; kuid meil on tiitliriba positsioon fikseeritud lehe ülaosale. See tähendab, et see ei ole loomulikult lehega animeeritud ja me peame kasutama eraldi kõnet. Avamine on seadistatud 290px vasakule (peaaegu kogu 300 piksli laiuse laius) vajutamiseks ja sulgemisfunktsioon tõmbab selle tagasi.
 Dünaamilise sisu laadimine
 Ülaltoodud kood on animatsiooni eest hoolitsemiseks piisavalt lihtne. Ja teoreetiliselt on see kõik, mida vajate sellise lihtsa mobiilse veebisaidi jaoks - aga ma tahan lisada veidi pisut.
 Iga kord, kui kasutaja klõpsab menüülingil, tahame sulgeda praeguse navigatsiooni ja kuvada laadimisgifi, kui otsime lehe sisu. Pärast seda eemaldame gif-pildi ja laadime selle kõik sisse. See on fantastiline, sest me saame sisu jaoks kasutada isegi staatilisi .html lehekülgi. PHP või Ruby või Perli või taustaprogrammide keelamine ei ole asjad segaduses.
 Klikkide haldamine
 Kõigepealt tahame testida, kui meie kasutajad klõpsavad navigeerimisnuppudel. See peatab tavalise href väärtuse laadimise ja me saame selle asemel kasutada oma funktsioone välise sisu kuvamiseks.
 // lehekülje sisu laadimine navigeerimiseks $ ("a.navlink"). live ("kliki", funktsioon (e) e.preventDefault (); var linkurl = $ (see) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = ''; 
 Nüüd avame iga klassi ankurile valija navlink. Kui kasutaja klõpsab ühel neist linkidest, peatame selle täis URL-i muutuja seadistamise ja seadistamise. Olen seadistanud ka sisu HTML-i muutuja, et lisada standardkujutaja. Kui soovite oma isikupärastada, siis soovitan teil Ajaxloadi.
 Ajax .load ()
 Sellel eesmärgil on kaks erinevat tükki, mida olen korralikult purustanud. Allolev kood on meie esimene bitt, mis sulgeb navigatsioonimenüü ja slaidib kogu dokumendiakna tippu. Me tahame sisemise keha sisu asendada väikese laaduri animatsiooniga ja kasutajad ei näe seda, kui nad vaatavad lehe allosas.
 closeme (); $ (funktsioon () topbar.css ("top", "0px"); window.scrollTo (0, 1););
 Lõpuks tahame lõpuks asendada sisekeha sisu meie pildiga ja tõmmata laaditavale välisele lehele. Tavaliselt kulub see vaid paarisaja millisekundi või isegi kiiremini, nii et olen määranud taimeri funktsiooni.
 content.html (imgloader); setTimeout (funktsioon () content.load (linkhtmlurl, funktsioon () / * ei ole tagasihelistamist * /), 1200);
 See peatub enne uue sisu laadimist 1200 millisekundit. Minu demo jaoks tundub see palju parem ja annab teile ettekujutuse sellest, kuidas rakendus käitub aeglasematel Interneti-ühendustel.
 
 Järeldus
 Ma julgustan kõiki veebiarendajaid juhendaja lähtekoodi alla laadima ja mängima omaette. See on niisugune põhiline näide sellest, mida on võimalik saavutada HTML / CSS3-ga ja mõne JavaScript-efektiga. Mobiiliekraanide loomine on meedia päringute ja laiemate veebibrauseritega lihtsam kui kunagi varem.
 Vaadake, kas saate seda koodi oma tulevastes veebiprojektides rakendada. Mobiilirakenduste loomine on kunst, palju sarnane veebidisainiga ning nõuab palju pühendumist ja praktikat. Loodan, et see õpetus võib olla hea lähtepunkt vaid mõnedele entusiastlikele arendajatele. Kui teil on küsimusi või mõtteid koodi kohta, võite jagada meiega postiküsitluse valdkonnas.