Share
La oss legge til vår grunnleggende ferdighetsinnstilling ved å lære å gjøre bruk av fremdriftsfelt, varsler, verktøytips og mega-slippen som Zurb bruker på deres nettsted, men er egentlig ikke i Foundation. Vi ser på å legge til alle disse komponentene i kontaktskjemaet fra forrige veiledning, ved hjelp av et snev av egendefinert jQuery, slik at du kan få en ide om hvordan disse elementene kan fungere i dine egne prosjekter. La oss komme i gang.
Først av alt legger vi til et verktøytips i avkrysningsboksen Send meg spam, og forteller brukerne litt mer om spam vi sender dem hvis de merker av.
Som i alle tidligere kodestykker som legger til funksjonalitet som et verktøytips til et element, avhenger av en klasse for å sparke ting, i dette tilfellet er det "has-tip".
Du har kanskje også lagt merke til at vi har pakket inn teksten i etiketten i en spanke. Denne span-taggen trenger en av Foundations egendefinerte elementattributter, 'data-tooltip'. Det vil gi deg et fungerende verktøytips, men du vil ha litt tekst i spissen og kanskje sette bredden. Begge disse kan oppnås med enda flere attributter, "tittel" og "data-bredde". Uten data-bredde vil spissen bare fylle ut rommet til elementets foreldrebeholder.
Ved å legge til "has-tip" -kategorien og pakke inn elementet ditt i spekteret med disse attributter, kan du enkelt holde et verktøytips til et hvilket som helst element.
I den tidligere opplæringen bygde vi et enkelt, responsivt kontaktskjema, som viste hvordan Foundations formelementer kunne brukes. La oss nå implementere noen flere elementer for å legge til et nytt lag i skjemaet. Vi gjør dette ved å legge til stadier på send-knappen; Vi tar standardklikk på send meldingsknappen, legger til en fremdriftsindikator, en vellykket melding og slett inngangene når e-posten er sendt.
Som jeg bare viser grunnleggende funksjoner, er dette ikke en funksjonell form, selv om du kan legge til et php-basert send script og bruke ajax til å lage skjemaoppføringen uten å navigere bort fra siden. Ta en titt på Send inn skjema uten sideoppdatering ved hjelp av jQuery for ytterligere instruksjoner.
Rett under vårt innleveringselement kan vi legge til vår fremdriftslinje. Dette vil gjøre bruk av de samme klassene som knapper, ved hjelp av den avrundede klassen denne gangen.
Ved å bruke en div med "fremskritt" -klassen setter ting opp og fungerer som beholderen, mens spekteret inne (bruk av "meter" -klassen) virker som fargen som gradvis fyller beholderen.
Merk: Spenningen bruker en stilmerke med startbredden på fremdriftslinjen. Vi bruker jQuery til å animere dette senere.
La oss legge til en suksessmelding, slik at brukerne vet at meldingen er sendt. I dette eksemplet vil vi bare fokusere på et suksessvarsel, men i en ekte verdensscenario trenger du kanskje også et feilvarsel. Du kan implementere dette ved hjelp av submit handle og jQuery validere plugin.
Suksess! Din melding har blitt sendt. x
Ta en div og legg til attributten "data-varsel" sammen med et par klasser, nemlig "varselboks" og "suksess". Hvis vi legger til en lukkeknapp også, kan brukere lukke suksessmeldingen etter at de har lest den. Hvis du ser på hva vi har satt sammen så langt, vil det se litt rotete ut, men det er greit da vi legger til noe jQuery nå for å lage lagene av samhandling vi trenger.
Accentsconagua
var submitButton = $ ('# submitme'); // Variabel til cache-knappelementet var fremgangBar = $ ('# fremgang'); // Variabel til cache fremdriftslinje element var progressBarMeter = $ ('# fremdrift. Meter'); // Variabel til cachemålerelement var varselBox = $ ('.varselboks'); // Variabel til cache meter element var closeButton = $ ('. Close'); // Variabel til cache Lukk knappelement $ (SubmitButton). Click (funksjon () // Starter sendingsinteraksjonen $ (dette) .fadeOut (500); // Fades ut sende knappen når den klikkes setTimeout (funksjon () // Forsinker neste effekt $ (progressBar) .fadeIn (500); // Fades i fremdriftslinjen $ (progressBarMeter) .animate (width: '100%', 2000); // Animerer fremdriftslinjen setTimeout funksjon () // Forsinker neste effekt $ (progressBar) .fadeOut (500); // Fades ut fremdriftslinjen når animasjonen fullfører setTimeout (funksjon () // Forsinker neste effekt $ (alertBox) .fadeIn (500) ; // Fades i suksessvarsling, 500);, 2500);, 500);); For bedre å forklare denne koden har jeg kommentert hver linje. Det er en enkel kø av effekter som skaper ønsket samspill. Selv om dette er rent visuelt, men det kan enkelt justeres for å legge til reell tilbakemelding og validering. Det vil også være nyttig for oss å legge til en nærvarselfunksjon som tilbakestiller skjemaet til fremtidig bruk.
Merk: Vi har cached alle elementene som brukes i funksjonen ved å lagre dem i variabler. Du kan lese mer om hvorfor vi gjør dette ved å lese Quick Tip - jQuery Newbs: Stopp jumping i bassenget
$ (closeButton) .click (funksjon () // Starter nullstillingsfunksjonen $ (alertBox) .fadeOut (500); // Fades ut suksessmelding $ (progressBarMeter) .css (width: '0%'); // Tilbakestiller fremdriftslinje setTimeout (funksjon () // Forsinker neste effekt $ ('input, textarea'). Ikke ('input [type = submit]') .val ("); // Tilbakestiller inntastingsfeltene $ (submitButton) .fadeIn (500); // Fades tilbake i send-knappen, 500); return false; // Dette stopper suksessvarselet fra å bli fjernet som vi bare vil gjemme det); Igjen her har jeg kommentert hver linje for å forklare hva hver linje gjør. Det dekker stort sett vår oppgradering til kontaktskjemaet. Disse funksjonene er svært fleksible og kan brukes hvor som helst i prosjektene dine, tilpasning er et snap ved hjelp av CSS.
Jeg har brukt mye tid på Stiftelsens Google-gruppe, og mange mennesker spør om Mega Drop-funksjonen på Zurbs nettsteder. Jeg trodde jeg ville dekke dette her, da det ser ut til at ingen virkelig dekker hva som er en strsight-forward bit av jQuery.
Ta en seksjonskode og fyll den med innholdet du vil ha inne i dråpet, legg til et stilattributt ved hjelp av "display: none" og deretter følgende jQuery-kode:
var megaDrop = $ ('# megaDrop'); // Variabel til cache megaDrop element var megaContainer = $ ('# megaContainer'); // Variabel for cache megaContainer element $ (megaDrop) .click (funksjon () $ (megaContainer) .slideToggle (300, funksjon () hvis ($ (dette) .is (": hidden")) $ (megaDrop) .html ("+"); ellers $ (megaDrop) .html ("×"););); Alle Mega Drop er virkelig en slideToggle-effekt som viser og gjemmer en beholder med glidende animasjon. Det er mange praktiske bruksområder for Mega Drop, enten det er utvidet navigasjon eller et skjult galleri, eller kanskje en reklamevideo.
Mange prosjekter, spesielt dashbordgrensesnitt, krever diagrammer, og chartjs.org er en fin måte å legge dem til i grunnfondsbaserte prosjekter. Hvorfor ikke prøve det, visualiser dataene dine på forskjellige måter, animer og tilpass deg? Disse diagrammene ser bra ut i stiftelsens rammeverk, selv på netthinnen.
Chartjs bruker HTML5 lerretelementet, støttet av alle moderne nettlesere, og polyfills gir støtte til IE7 / 8. Pluggen er avhengighetsfri, lett og tilbyr mange tilpasningsalternativer.
I neste veiledning dekker vi Joyride-pluginet (som gir brukere en gjennomgang av nettstedet ditt), paneler, prisbord, vanlige bord og utveksling; som gir deg muligheten til å sette forskjellige bilder for forskjellige skjermstørrelser. Rikelig med å dekke!
