Share
La oss legge videre til vårt fundamentars arsenal ved å se på Joyride-pluginet, som hjelper brukerne til å lede gjennom nettstedene dine. Vi vil også se på prisbord, standardbord og utveksling; et nytt responsivt bildeverktøy. Vi vil dekke implementeringen av disse funksjonene med en enkel mal som du kan laste ned og spille med.
Vi begynner med det mest straight-forward av funksjonene vi vil dekke i denne opplæringen.
Hvis du legger til en klasse av "panel" til nesten hvilket som helst element, blir det til en lett farget blokk. Ikke bare en hvilken som helst type blokk, men da disse panelene bruker rammeboksformater, så er polstret innlemmet i objektets bredde. Dette er en veldig praktisk tilnærming, da det gir deg langt mer intuitiv kontroll over elementdimensjonene.
Vi har et enkelt utvalg av hostingpakker for deg å velge mellom, disse vil fungere utrolig for alle selskaper. Med ultra raske mySQL-databaseforbindelser flyr innholdsføringssystemer virkelig. Legg til denne 24/7 kundestøtten og 99,9% oppetid, og du har en flott hostingpakke.
For å illustrere dette poenget har jeg opprettet et to-kolonneoppsett ved hjelp av et bilde og panelet, perfekt justert.
En av de viktigste grunnene til å eie / bygge et nettsted er for å selge noe. På grunn av dette er prisbordene vanlige på interwebs og har vært i mange år, så selvfølgelig har Foundation dette området dekket. Hvert bord er faktisk en uordnet liste med listeposter og noen velplacerte klasser.
Ul-taggen selv har en klasse med "prisbord", mens du har muligheten til å bruke "tittel", "pris", "beskrivelse", "punktpost" og "cta-knapp". Den eneste ekstra tilpasningen som trengs, er innholdet ditt. Du vil kanskje linje en haug med disse ved siden av hverandre for å lage flere av en sammenligningstabell for pris.
Prisbordene er flotte, men nå og da trenger du et faktisk HTML-tabell for visning av data. Å sette disse opp i Foundation er veldig enkelt fordi det ikke er noen ekte oppsett i det hele tatt. Bare legg til tabelloppdateringen som vanlig, og stilene vil bli tatt vare på. Det eneste du kanskje vil gjøre er å legge til kolonnebredder for å jevne ut kolonnene dine.
| oppstart | Bedriften | Global Corporation |
|---|---|---|
| 1 Database | 5 Database | 10 Database |
| Ingen sikkerhetskopier | 50 GB sikkerhetskopier | 100 GB sikkerhetskopier |
Selv om alle bildene i Foundation er vanlige som standard, noen ganger kommer du til problemer - hele emnet for bilder i RWD er pågående.
Og la meg legge til, jeg tror det er cray-cray at noen i vår bransje kan snakke om * bare bilder * i over en time. #RWD
- Dave Rupert (@ davatron5000) 14. mai 2013
Et slikt problem oppstår når du har tekst i et bilde. Nylig Zurb la til en ny plugin kalt "Interchange"; jobben sin er enkel - erstatt bildet av ditt valg med en annen når skjermstørrelsen når et bestemt punkt. Det fungerer ved å legge til et spesielt attributt, nemlig "data-interchange". Dette brukes til å huse alternativene for bildekildeendringene.
Her bruker jeg mange av alternativene som er tilgjengelige i attributtet. Det er ganske mange parametere, for eksempel kan du velge et tilpasset punkt for å bytte bildet.
Dette er ikke det mest effektive pluginet, da endringer kan ta ett eller to sekunder, forhåpentligvis vil Zurb adressere dette i fremtiden. En av de største fordelene med dette pluginet er belastetiden det sparer på mobile enheter. I stedet for å laste inn en massiv jpeg på en 3G-tilkobling, kan du laste inn en mindre optimalisert versjon av det samme bildet, frigjøre båndbredden for å laste resten av siden.
I alle deler av denne serien så langt har vi dekket et JavaScript-plugin tilgjengelig i Foundation, men i dette tilfellet vil vi dekke to.
I noen situasjoner er det nyttig å ta brukerne på en magisk mysterietur i brukergrensesnittet. Google, for eksempel, gjør dette når du starter nye funksjoner i mange av deres applikasjoner. Ved å lede brukerne dine fra trinn til trinn kan du forklare hva hver del gjør og hvor den fører. Joyride dekker dette ved å bruke en liste som parrer hvert liste element, holder turen stopp, med et element på siden. Denne listen kan enten være en bestilt liste eller en uordnet liste, men må ha både "joyride-listen" -kategorien og "data-joyride" -attributtet.
La oss komme i gang, her har vi en intro.
Første stopp
Her bruker vi den nye utvekslingsfunksjonen til å endre bilder basert på skjermstørrelse.
Andre Stopp
Vi bruker prisbord her for å vise en liste over tjenester fra et vertsfirma.
Tredje Stopp
Dette er bare en lenke, men det åpner en modal med et vanlig bord inni, spennende eh?
Slutten
Vår tur slutter her, husk å ta alle dine eiendeler med deg på vei til utkjørselen.
Hver liste element trenger sin egen "data-id" som må samsvare med elementet ID det er kombinert med. Hvis det første stoppet på turen din er en h2-kode, kan data-ID-en din være "data-id =" title "". Din h2 ville trenge et id med "tittel". Lett.
Bortsett fra dette grunnleggende oppsettet vil du legge til en "neste" -knapp slik at brukerne kan navigere enkelt fra ett stopp til det neste. Disse legges til ved å legge ved et annet attributt til listen elementet; "Data = text". I eksemplet ovenfor har jeg brukt "Go" for å komme i gang og "neste" for å fortsette.
Det er noen få alternativer for joyride, og noen kan legges direkte til hver liste element. Over jeg har brukt data-options = "tipLocation: topp, tipAnimation: fade" og som du kanskje har gjettet dette tildeler turen stopper til toppen av det koplede elementet, fading det inn. Det er mange flere parametere som du kan passere inn på JavaScript-initialisering. Du kan også gjøre bruk av informasjonskapsler plugin, eller hvis brukerne er logget inn, lagre et alternativ for å bare vise turen en gang.
Dessverre inkluderer en ting Foundation ikke (ennå) et testimonialtillegg / -funksjon. Disse kan virkelig komme til nytte. Quovolver kan rette opp dette med et enkelt oppsett og fleksibelt oppslag. Legg til skriptet i bunnteksten, kaste inn noen markering og du er borte.
I neste del av vår undersøkelse av Zurb Foundation snakker vi om Magellan, som skaper klebrig navigasjon. Vi ser på synlighetsklasser, høyre til venstre støtte, 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.
Accentsconagua
