Mobilās aplikācijas dizains / Dev ēkas navigācija ar jQuery

Tagad viedtālruņi ir aprīkoti ar ļoti efektīvām tīmekļa pārlūkprogrammām. JavaScript ir jaudīgāks nekā jebkad agrāk, un to var paplašināt, izmantojot kodu bibliotēkas, piemēram, jQuery. Pievienojot jaunākās HTML5 / CSS3 specifikācijas, ir iespējams izveidot ļoti aplaupāmas mobilās tīmekļa lietojumprogrammas ar dažiem galvenajiem frontenda kodiem.

Šajā apmācībā es parādīšu, kā jūs varat izveidot mobilo tīmekļa vietni / webapp. Mēs izmantosim CSS3 mediju vaicājumus, lai mērķētu konkrētas ierīces un ekrāna izšķirtspējas. Plus mazliet jQuery palīdz animēt izvēlni un ielādēt ārējo lapu saturu, izmantojot Ajax zvanus. Vēl labāk, izkārtojums var pat paplašināties, lai pareizi parādītu regulāras darbvirsmas pārlūkprogrammas, piemēram, Chrome vai Firefox.

• Live Demo
• Avota kods

Lapas struktūras definēšana

Sāksim, vispirms pārrunājot HTML lapu un veidojiet to, izmantojot dažus CSS noteikumus. Es izlaidīšu lielāko daļu no neparastajiem meta tagiem galvenē, jo tie tieši neietekmē tīmekļa lietotni. Tomēr ir daži, kas man jāpiemin, proti, zemāk esošajā fragmentā:

X-UA-saderīgs tiek izmantots, lai aprakstītu, kā jūsu dokumentam jāparādās dažās pārlūkprogrammās. Tas ir interesants scenārijs, kodējot HTML5, tāpēc es par to neuztraucos. Tomēr meta skats ir ļoti svarīga. Tā nosaka mobilā pārlūka logu līdz 100%, nevis standarta tālummaiņas efektu.

Ir iespējams arī atspējot lietotāja tālummaiņu ar satura vērtību lietotāja mērogojams = nē. Bet šajā gadījumā mēs tikai vēlamies iestatīt, lai visa ekrāna platums būtu tāds pats kā mūsu ierīces platums. Apple tīmekļa lietotņu tagi ļaus tīmekļa vietnei saglabāt jūsu mājaslapas vai iPod Touch sākuma ekrāna ikonu. Nav pilnīgi nepieciešams, bet noteikti ir vērts.

Iekšējā ķermeņa saturs

Ķermeņa taga iekšpusē es esmu izveidojis iesaiņojuma divdaļu ar ID #w. Inside Es esmu sadalījis izkārtojumu divās divās grupās, izmantojot ID #pagebody un #navmenu. Viss lappuses platums ir ierobežots līdz 640px pēc izvēles, lai izkārtojums atbilstu stingram skaitlim.

 
  
HK Mobile
 
 
 
Laipni lūdzam mobilajā vietnē!
 
 
 
 
 
Izvēlnes saites
 
 
 
Mājas
 
Par mums
 
Reklāma
 
Rakstiet mums
 
Kontakti
 
Privātuma politika
 
 
 

Navigācijas izvēlnei ir zemāka z-indeksa vērtība, lai #pagebody vienmēr ir virsū. Tas ir ļoti svarīgi, jo JavaScript kods pārbīdīs virs lapas korpusa noteiktu skaitu pikseļu, lai atklātu navigāciju zem tā.

Katrai .html lapai es esmu izmantojis hash simbolu (#), lai apturētu kādu sliktu uzvedību Mobile Safari. Ikreiz, kad noklikšķināsiet uz saites, parādīsies URL josla un nospiež saturu. Taču, atsaucoties uz ID, nekas netiek atkārtoti ielādēts, izņemot izmantojot JavaScript zvanus.

CSS pozicionēšana

CSS kodā nav daudz neskaidru saturu. Lielākā daļa pozicionēšanas tiek veikta manuāli un pēc tam tiek apstrādātas ar jQuery palīdzību. Taču mūsu dokumentā ir daži interesanti gabali.

/ ** @grupas kodols ** / #w #pagebody pozīcija: relatīvais; pa kreisi: 0; maksimālais platums: 640px; min-platums: 320px; z-indekss: 99999;  #w #navmenu fons: # 475566; augstums: 100%; displejs: bloks; pozīcija: fiksēts; platums: 300px; pa kreisi: 0px; tops: 0px; z-indekss: 0; 

Šis augšējais segments nosaka stilu abām lapas sadaļām. Mūsu navigācijas izvēlne ir tikai 300 pikseļu plaša, tāpēc tas atstāj nedaudz vietas, lai lapas saturs būtu redzams. Atvēršanas / aizvēršanas izvēlnes poga atrodas arī tieši kreisajā pusē un vienmēr ir pieejama. Svarīgs gabals šeit ir z-indeksa īpašuma vērtība un izmantošana pozīcija: fiksēts; mūsu navmenu.

Augšējā rīkjoslas galvene ir arī interesanta sadaļa. Tas ir iestatīts uz fiksētu pozīciju, lai tas ritinātu ar lapas saturu. Tas atkārto līdzīgu efektu, kā jūs atrodaties jebkurā iOS lietotņu virsrakstjoslā.

/ ** @grupas galvene ** / #w #pagebody header # toolbarnav display: block; pozīcija: fiksēts; pa kreisi: 0px; tops: 0px; z-indekss: 9999; fons: # 0b1851 url ('img / tabbar-solid-bg.png') augšējā kreisajā pusē neatkārtota; robežu rādiuss: 5px; -moz-border-rādiuss: 5px; -webkit-robežu rādiuss: 5px; -o-robežu rādiuss: 5px; robežu-apakšējo labo rādiusu: 0; -moz-border-radius-bottomright: 0; -webkit-robežu-apakšējā labajā-rādiusā: 0; robežu-apakšējo kreiso rādiusu: 0; -moz-border-radius-bottomleft: 0; -webkit-robežu apakšējā kreisajā rādiusā: 0; augstums: 44px; platums: 100%; maksimālais platums: 640px;  #w #pagebody header # toolbarnav h1 text-align: center; polsterējums: 10px; polsterējums labajā pusē: 40px; krāsa: # e6e8f2; font-weight: bold; fonta lielums: 2.1em; teksta ēna: 1px 1px 0px # 313131; 

Mobilie noteikumi

Ir viegli pamanīt, ka es izmantoju arī fona attēlu zilās galvenes joslas tekstūrai. Šis lielums ir 640 × 44 pikseļi, lai saglabātu konsekventu izkārtojuma struktūru. Bet es arī esmu izstrādājis attēlu @ 2x iPhone / iPad tīklenes displejiem. Jūs varat redzēt abus attēlus zemāk vai paķert tos no demo avota koda.

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

Es iestatīju mobilās CSS šai funkcijai citā nosaukumā atbildes.css. Tajā ir divi mediju vaicājumi, kas aizstāj virsraksta joslu bg un izvēlnes pogas ikona tīklenes ierīcēm.

/ ** tīklenes displejs ** tikai ekrāns un (-webkit-min-device-pixel-ratio: 2), tikai ekrāns un (min-moz-device-pixel-ratio: 1.5), tikai ekrāns un ( min-device-pixel-ratio: 1.5) #w #pagebody galvenes fons: # 0b1851 url ('img/[email protected] ') augšējā kreisajā bez atkārtotas; fona izmērs: 640px 44px;  #w #pagebody header # menu-btn fons: url ('img/[email protected] ') nav atkārtots; fona izmērs: 53px 30px; 

Izvēlnes bultiņu projektēšana

Navigācijas apgabalā es esmu ievietojis arī nelielu bultas ikonu katras izvēlnes saites labajā pusē. To var viegli aizstāt ar attēlu no jebkura radoša kopdarba. Bet lielākoties visi CSS3 entuziasti iemīlēs šo metodi.

#w #navmenu ul li a :: pēc saturs: "; displejs: bloks; platums: 6px; augstums: 6px; robežas labais: 3px cietais # d0d0d8; : 30px; top: 45%; -webkit-transform: rotēt (45deg); -moz-transform: rotēt (45deg); -o-transformēt: pagriezt (45deg); transformēt: pagriezt (45deg); #w #navmenu ul li a: hover :: pēc border-color: # cad0e6;

Mēs izmantojam pārveidot pēc satura var izveidot nelielu apmali. Es arī iestatīju pozīcija: absolūta; lai mēs varētu brīvi pārvietot šīs robežas ap iekšējo saiti. Tas ir ļoti viegli mainīt robežu krāsu uz pakaļgala valsts, kas piedāvā dinamiskāku sajūtu. Tas ir diezgan neticami, ko jūs varat paveikt, tikai izmantojot HTML5 un CSS3 pamatnoteikumus.

Bet tagad pāriet uz JavaScript koda gabaliem. Atcerieties, ka ir nepieciešams iekļaut jQuery bibliotēkā, lai mans kods darbotos pareizi.

jQuery Animēts

Rakstot šos pielāgotos kodus, esmu izveidojis pavisam jaunu nosaukumu script.js. Nekautrējieties rakstīt tos tieši > vai lejupielādējiet savu piemēru no demo avota koda.

$ (dokuments). jau (funkcija () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = width: $ (logs) .width (), augstums: $ (logs) .height (); // izgūst mainīgos lielumus kā // viewport.width / viewport.height 

funkcija openme () $ (funkcija () topbar.animate (left: "290px", ilgums: 300, rinda: false); pagebody.animate (left: "290px", ilgums: 300 , rinda: false););  function closeme () var closeme = $ (funkcija () topbar.animate (left: "0px", ilgums: 180, rinda: false); pagebody.animate (left: "0px", ilgums: 180, rinda: false);); 

// lappuses satura ielāde navigācijai $ ("a.navlink"), dzīvot ("noklikšķiniet", funkcija (e) e.preventDefault (); var linkurl = $ (tas) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = '"; 

closeme (); $ (funkcija () topbar.css ("top", "0px"); window.scrollTo (0, 1););

content.html (imgloader); setTimeout (funkcija () content.load (linkhtmlurl, funkcija () / * nav atzvanīšanas * /), 1200);