Mobiilisovellusten suunnittelu / Dev Building Navigation with jQuery

Älypuhelimet on nyt varustettu erittäin tehokkailla web-selaimilla. JavaScript on tehokkaampi kuin koskaan ennen, ja sitä voidaan laajentaa koodikirjastojen, kuten jQuery, avulla. Kun lisäät uusimpia HTML5 / CSS3-spesifikaatioita, on mahdollista rakentaa erittäin typeriä mobiilisovelluksia, joissa on joitakin perusliittymäkoodeja.

Tässä oppaassa näytän, miten voit rakentaa mobiilipohjaisen verkkosivuston / webappin. Käytämme CSS3-median kyselyitä kohdistettaessa tiettyjä laitteita ja näytön resoluutioita. Plus hieman jQuery auttaa animoimaan valikon ja lataamaan ulkoisen sivun sisällön Ajax-puheluilla. Vielä parempi, ulkoasu voi jopa laajentaa näyttämään oikein normaaleissa työpöydän selaimissa, kuten Chromeissa tai Firefoxissa.

• Live-esittely
• Lähdekoodi

Sivun rakenteen määrittäminen

Aloitetaan siirtymällä ensin HTML-sivulle ja tyylittämällä se käyttämällä joitakin CSS-sääntöjä. Ohita useimmat otsikon epätavalliset metatunnisteet, koska ne eivät vaikuta suoraan web-sovellukseen. Minun pitäisi kuitenkin mainita muutamia, nimittäin alla olevasta katkelmasta:

X-UA-yhteensopiva käytetään kuvaamaan, miten asiakirjasi pitäisi tehdä tietyissä selaimissa. Se on mielenkiintoinen skenaario, kun koodataan HTML5: ssä, joten en olisi huolissani liikaa tästä. Kuitenkin meta viewport tag on erittäin tärkeä. Se asettaa mobiiliselaimen ikkunan 100%: iin standardin suurennetun vaikutuksen sijasta.

On myös mahdollista poistaa käyttäjän zoomaus sisällön arvolla käyttäjän skaalautuva = ei. Mutta tässä tapauksessa haluamme vain asettaa koko näytön leveyden samaksi kuin laitteen leveys. Apple-web-sovelluksen tunnisteet mahdollistavat, että sivusto tallennetaan kotinäytön kuvakkeeksi iPhoneen tai iPod Touchiin. Ei täysin välttämätöntä, mutta varmasti kannattaa.

Sisäisen kehon sisältö

Kehotunnisteen sisällä olen määrittänyt tunnisteella käärintadivin #W. Sisällä olen rikkonut ulkoasun kahteen osaan käyttäen tunnuksia #pagebody ja #navmenu. Koko sivun leveys on rajoitettu 640px: iin niin, että asettelu skaalautuu tiukkoon numeroon.

 
  
HK Mobile
 
 
 
Tervetuloa mobiilisivustolle!
 
 
 
 
 
Valikkolinkit
 
 
 
Koti
 
Meistä
 
Mainostaa
 
Kirjoita meille
 
Yhteydet
 
Tietosuojakäytäntö
 
 
 

Navigointivalikosta annetaan pienempi z-indeksiarvo niin, että #pagebody on aina päällä. Tämä on tärkeää, koska JavaScript-koodi liukuu sivun rungon yli tietyn määrän pikseleitä paljastamaan alla olevan navigoinnin.

Olen käyttänyt jokaisen .html-sivun edessä hash-symbolia (#) pysäyttääkseen jotakin huonoa käyttäytymistä Mobile Safarissa. Kun napsautat linkkiä, URL-palkki tulee näkyviin ja työntää sisältöä alas. Mutta kun viitataan tunnukseen, mitään ei ladata uudelleen, paitsi JavaScript-puhelujen kautta.

CSS-paikannus

CSS-koodissamme ei ole paljon sekavaa sisältöä. Suurin osa paikannuksesta tehdään manuaalisesti ja sitten käsitellään jQueryn kautta. Asiakirjassa on kuitenkin muutamia mielenkiintoisia kappaleita.

/ ** @ ryhmäryhmän runko ** / #w #pagebody sijainti: suhteellinen; vasen: 0; max-leveys: 640px; min-leveys: 320px; z-indeksi: 99999;  #w #navmenu tausta: # 475566; korkeus: 100%; näyttö: lohko; sijainti: kiinteä; leveys: 300px; vasen: 0px; alkuun: 0px; z-indeksi: 0; 

Tämä yläsegmentti määrittää tyylit molemmille sivun osille. Nav-valikko on vain 300 pikselin leveä, joten tämä jättää hieman tilaa sivun sisällön näkymiselle. Avaa / sulje -valikkopainike sijaitsee myös suoraan vasemmalla puolella ja aina käytettävissä. Tärkeä osa tässä on z-indeksin ominaisuusarvo ja käyttö sijainti: kiinteä; meidän navmenussa.

Ylimmän työkalurivin otsikko on myös mielenkiintoinen osa. Tämä asetetaan kiinteään asentoon, jolloin se selaa sivun sisällön kanssa. Tämä toistaa samanlaisen vaikutuksen kuin mitä tahansa iOS-sovelluksen otsikkoriviltä.

/ ** @group header ** / #w #pagebody header # toolbarnav display: block; sijainti: kiinteä; vasen: 0px; alkuun: 0px; z-indeksi: 9999; tausta: # 0b1851 url ('img / tabbar-solid-bg.png') ylhäällä vasemmalla ei-toista; raja-säde: 5px; -moz-border-säde: 5px; -webkit-border-radius: 5px; -o-rajan säde: 5px; raja-ala-oikea-säde: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-säde: 0; raja-ala-vasen-säde: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; korkeus: 44px; leveys: 100%; max-leveys: 640px;  #w #pagebody header # toolbarnav h1 text-align: center; toppaus: 10px; pehmuste-oikea: 40px; väri: # e6e8f2; font-paino: lihavoitu; fontin koko: 2.1em; teksti-varjo: 1px 1px 0px # 313131; 

Mobile-säännöt

On helppo huomata, että käytän myös taustakuvaa sinisen otsikkorivin tekstuurille. Tämä on kooltaan 640 × 44 pikseliä, jotta se pysyisi yhdenmukaisena. Mutta olen myös kehittänyt kuvan @ 2x iPhone / iPad-verkkokalvon näytölle. Voit nähdä molemmat alla olevat kuvat tai napata ne demon lähdekoodista.

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

Asennan tämän toiminnon mobiilin CSS: n toisessa tiedostossa responsive.css. Se sisältää kaksi mediapyyntöä, jotka korvaavat otsikkopalkin bg ja verkkokalvolaitteiden valikkopainekuvakkeen.

/ ** verkkokalvonäyttö ** / @ media vain näyttö ja (-webkit-min-device-pixel-suhde: 2), vain näyttö ja (min - moz-device-pixel-suhde: 1,5), vain näyttö ja ( min-device-pixel-ratio: 1.5) #w #pagebody header tausta: # 0b1851 url ('img/[email protected] ') ylhäällä vasemmalla ei-toista; taustakoko: 640px 44px;  #w #pagebody header # menu-btn tausta: url ('img/[email protected] ') ei-toista; taustakoko: 53px 30px; 

Valikon nuolien suunnittelu

Navigointialueella olen myös lisännyt pienen nuolikuvakkeen kunkin valikkolinkin oikealle puolelle. Tämä voidaan helposti korvata mistä tahansa luovasta kuvamateriaalista. Mutta useimmat CSS3-harrastajat rakastavat testata tätä menetelmää.

#w #navmenu ul li a :: jälkeen sisältö: ", näyttö: lohko, leveys: 6px, korkeus: 6px, reunus-oikea: 3px kiinteä # d0d0d8; : 30px, top: 45%, -webkit-transform: rotate (45deg); -moz-transform: kiertää (45deg); -o-transform: kiertää (45deg), muunnos: kiertää (45deg); ul li a: hover :: border-color: # cad0e6; jälkeen

Käytämme muuttaa ominaisuuden avulla voit luoda pienen rajan sisällön jälkeen. Asennan myös asema: absoluuttinen; joten voimme vapaasti siirtää näitä rajoja sisäisen linkin kohteen ympärille. Se on erittäin helppo vaihtaa rajaväri hover-tilassa, joka tarjoaa dynaamisemman tunteen. Se on melko uskomatonta, mitä voit saavuttaa vain käyttämällä HTML5- ja CSS3-perussääntöjä.

Mutta nyt siirrymme JavaScript-koodin osiin. Muista, että tämä edellyttää, että jQuery-kirjastoon lisätään koodi, jotta koodi toimii oikein.

jQuery Animoitu

Kirjoittaessani näitä mukautettuja koodeja olen luonut uuden nimisen asiakirjan script.js. Voit vapaasti kirjoittaa nämä suoraan sisään > tunnisteita tai lataa esimerkki demon lähdekoodista.

$ (asiakirja). jo (toiminto () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = leveys: $ (ikkuna) .leveys (), korkeus: $ (ikkuna) .height (); // hakea muuttujat // viewport.width / viewport.height 

toiminto openme () $ (toiminto () topbar.animate (left: "290px", kesto: 300, jono: false), pagebody.animate (left: "290px", kesto: 300 , jono: false););  function closeme () var closeme = $ (toiminto () topbar.animate (left: "0px", kesto: 180, jono: false), pagebody.animate (left: "0px", kesto: 180, jono: false);); 

// sivun sisällön lataaminen navigointiin $ ("a.navlink"). live ("klikkaa", toiminto (e) e.preventDefault (); var linkurl = $ (tämä) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = ''; 

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

content.html (imgloader); setTimeout (toiminto () content.load (linkhtmlurl, toiminto () / * ei soittopyyntöä * /), 1200);