Share
I denne delen av vår undersøkelse av Zurb Foundation snakker vi om Magellan, som skaper klebrig navigasjon. Vi ser på synlighetsklasser, støtte fra høyre til venstre, tastetrykk, miniatyrbilder, fleksibel video og innspillene til zepto. Jeg skal forklare bruksområdene for disse funksjonene og hvordan de skal implementeres i prosjektene dine best mulig.
I denne sesongen har vi dekket en stor del av stiftelsens rammeverk, og det er fortsatt en god måte å gå. La oss nå se på noen få funksjoner som du raskt kan implementere i nettstedene dine. Vi starter med en JavaScript-plugin denne gangen, den heter Magellan, og lar deg legge til klebrig navigasjon til prosjektene dine.
Det er ikke uvanlig at en klient spør etter navigasjon som forblir løst på siden når brukeren navigerer bort fra standardnavigasjonen, for eksempel å bla nedover siden. Magellan kommer til redning, legger til fast navigering til siden når brukeren ruller forbi et bestemt punkt.
Med enkel markup er det lett å komme i gang.
- Ta kontakt med
- Handle om
Innhøstet i en tradisjonell uniformed listestruktur med en div for å inneholde alt, bør dette være raskt og enkelt å komme seg opp. Det er to typer spesielle attributter for Magellan; data-Magellan-expiditon som brukes som stillingstype og data-Magellan-ankomst som kan sammenkobles med en sideanker.
Siden dette JavaScript-pluginet er så lett, er det eneste andre alternativet du trenger å vite, de som kan bestås ved initialisering.
Accentsconagua
$ (dokument) .foundation ('magellan', // spesifiser klassen som brukes for aktive seksjoner activeClass: 'active', // hvor mange piksler til Magellan-stavene, 0 = Auto-terskel: 0); Så igjen, to alternativer her; sett deg selv en tilpasset magellan-klasse og sett poenget på siden der magellan vil komme til handling.
Nå ser du det, nå gjør du det ikke! Ofte kan det være vanskelig å re-jigging alt innholdet ditt for forskjellige skjermstørrelser. Med stiftelsens synlighetsklasser kan du bare vise flere eller færre elementer avhengig av bruddpunktsettet. La oss starte med "show" -klassene, alle ganske enkle med en rekke bruddpunkter å leke med. Jeg finner synlighetsklasser mest nyttige når jeg må legge til / fjerne elementer mellom smarttelefon og skrivebord, kanskje for en enhet som en iPad.
.vis-for-små / * Synlig opptil 768px * / .show-for-medium-down / * Synlig fra 768px ned * / .show-for-medium / * Synlig mellom 768px og 1280px * / .show-for-medium -up / * Synlig fra 768px opp * / .show-for-large-down / * Synlig fra 1280px ned * / .show-for-large / * Synlig mellom 1280px og 1440px * / .show-for-large-up / * Synlig fra 1280px opp * / .show-for-xlarge / * Synlig over 1440px bare * /
For å skjule elementer på de samme bruddpunktene, bruk bare "skjul" i stedet for "show". Kanskje trenger du en bestemt orienteringsbasert klasse? Disse er også inkludert. Du vil også legge merke til klasser for berøring også. Spoiled for valg her.
.show-for-landscape / * Synlig for liggende orientering * / .show-for-portrait / * Synlig for stående orientering * / .hide-for-landscape / * Skjult for liggende orientering * / .hide-for-portrait / * Skjult for stående orientering * / / * Berøringsdetekteringsklassene * / .show-for-touch / * Synlig for berøringsaktiverte enheter * / .hide-for-touch / * Skjult for berøringsaktiverte enheter * /
Igjen, vil disse komme inn veldig bra hvis du er i et stramt sted og trenger å gjemme noen elementer eller, polar motsatt, hvis du befinner deg i et stort åpent rom, kan du kaste flere elementer i.
Jeg trodde jeg ville dekke dette raskt, siden ingen nevner virkelig støtte fra venstre til venstre.
Dette er svært nyttig hvis du noen gang har et internasjonalt prosjekt med en arabisk-sentrisk (for eksempel) brukerbase. Ta persisk, som bruker en modifisert versjon av det arabiske alfabetet, som krever høyre til venstre tekst. Mens nettsteder som BBC News demonstrerer denne funksjonaliteten, har de et team av utviklere som er i stand til å ta på seg denne designutfordringen. I Stiftelsen er det alt gjort for deg.
Erstatt html-taggen med dette, og du vil være borte. Vent, jeg vet hva du tenker, jeg vil ikke ha arabisk, ikke sant? Ingen bekymringer, kinesisk zh, Farsi fa, hebraisk he / iw, japansk ja, urdu ur, jiddisk yi / ji er også støttet. Bare endre verdien av "lang" -attributtet med ditt foretrukne språk.
Jeg vedder på at mange av dere som har lastet ned Foundation har skummet over tastetrykkene, fordi du ikke var sikker på hva det var. Ikke sant? Vel, hvis du ikke allerede har sett på dokumentene, er du i ferd med å finne ut.
Tastetrykk setter rundt tekst og viser dem som en nøkkel. Så, i stedet for å si trykkkontroll, alt og slette i kjedelig gammel tekst, kan du spruce den opp og gi den litt mening.
ctrl + alt + del
Enkel, men effektiv, spesielt hvis du har nøkler tilordnet bestemte funksjoner, for eksempel å gjøre retningsknappene styrer omløpsklippen.
Miniatyrbilder er en rask måte å style et lite bilde med et anker på.
Dette er en av de små detaljene som legger til den magien som er Foundation. Ta deg et bilde, slapp det i en tag med en klasse av "th". Boom. Jobben er gjort. Dette er bra for prosjekter som har liten eller ingen designinngang, da utvikleren kan gjøre nettstedet ser bra ut med de minimale stilene som er inkludert i rammen.
Embedding av videoer kan være en smerte, spesielt med de gamle flash-baserte videospillerne som har dobbeltsett dimensjonsattributter (uh, hva et ulempe) som gjør videoer lydhør, er et forsøk. Målet er enkelt; du vil legge til din favorittvideo av lol katter på nettstedet ditt, men darn-saken blir knust eller kuttet av når du ser den på telefonen hver natt før sengetid, eller hver morgen på iPad mens du er på badet. Med flex-video kan du slippe et sukk av lettelse og komme tilbake til alle lol-kattene.
Wrap noen video fra populære nettsteder (som Youtube og Vimeo) i en div med "flex-video" klassen, og grunnlaget vil holde aspektforholdet på plass, skalere videoen og forhindre forferdelig disfigured eller hakket i halv lol katter.
I hver pakke i Foundation-rammeverket ligger et spesielt JavaScript-bibliotek kalt "zepto", som oppfører seg på omtrent samme måte som jQuery.
På sidelast Foundation ser for å se om zepto vil løpe, hvis det gjøres, sendes jQuery til det uhellige trinnet. Problemet er, men zepto er ikke en komplett erstatning for jQuery. Faktisk er det omtrent 7.100 linjer med kode lettere enn jQuery, så hvorfor er dette og hvorfor ville Foundation drop jQuery for dette infantile JavaScript-biblioteket?
Zepto duplikater nok av jQuery-funksjonen som er satt til å takle alle de grunnleggende kommandolinjene, legger ut. Å bruke et bibliotek som er mye lettere, er et smart trekk nå, da rammen er mobil først. Det tar mer enn noen få sekunder å laste jQuery på en mobil enhet via en mobil forbindelse. De ytterligere 7.100 kodelinjene er ikke overflødige, da de tar vare på alle de fancy animasjonene og nettleserens kompatibilitet, blant annet ting.
Jeg er en ganske tung jQuery animasjon bruker, så jeg pleier å bare drepe zepto fra få gå. Jeg har imidlertid nylig jobbet med et prosjekt som var mobil-bare, og som ikke krever noen jQuery-animasjon; ved hjelp av zepto ga brukerne en full 2,3 sekunder raskere lastetid. Så hvis du kan gjøre uten oppblomstring av jQuery, så er zepto en fantastisk, bare bein erstatning.
Gi brukerne noe å gjøre når de uunngåelig går seg vill i en blindgyde på nettstedet ditt, 404 invaderspillet!
Funnet på massen: arbeidswebside, dette er en morsom og potensielt vanedannende måte å gå seg vill på på ditt neste nettstedsprosjekt. Bruk piltastene til å styre pistolen EN & S å flytte og rom å brenne (se hva jeg gjorde der?)
I neste artikkel ser vi på SASS, hvordan du får SASS-versjonen av Foundation, setter opp, verktøy du trenger og en kort oversikt over hvordan du bruker denne mektige stilprosessoren i dine fremtidige prosjekter.
