Accentsconagua

Opprette en utrolig jQuery-kalkulator

Kode
Share

Sikker på at du har en brevåpner rett ved siden av postkurven din, en skohorn ved siden av dine loafere og en lommelykt på nattbordet ditt. Likeledes er det fint å ha en kalkulator hendig når du trenger å utføre litt matte. Denne opplæringen og nedlastingen viser hvordan du setter en rett på et hvilket som helst nettsted.

Betraktning av brukergrensesnitt


Noen knapper med tall 1 til 9, et par funksjoner, og en stor "lik" -knapp. Det er alt en kalkulator er riktig? Skal være en peice kake. Enhver programmering langauge kan lett håndtere dette. Selvfølgelig, men enda noe som er så enkelt som en kalkulator, har det ganske mange ting å ta hensyn til når du designer hvordan akkurat det fungerer.

Skjermbildet som følger med denne artikkelen, vil fokusere mest på disse tingene, og mindre om ned-og-skitten koding. Mens denne skriftlige delen vil være fokusert på koden. Likevel, her er en rask oversikt over noen av de små brukergrensesnittsdetaljer:

  • Når kalkulatoren laster, er 0 (null) i displayet. Hvis du trykker nummer 2, blir nummeret 02, det er bare 2.
  • Når du trykker på en funksjonsnøkkel, slår nummeret som er på displayet "låser" som det første nummeret i beregningen, men det forblir bare akkurat der det er. Når et annet nummer trykkes, blir nummeret erstattet.
  • Hvis du trykker på en funksjonstast, og deretter a forskjellig funksjonstasten trykkes, den siste trykkes, er den funksjonen som skal brukes.
  • Etter at en beregning er utført, er det to mulige scenarier. A) Et nytt nummer trykkes. Dette vil helt nullstille kalkulatoren og begynne frisk med dette nummeret. B) en funksjonsnøkkel blir trykket, som vil låse summen som "første" nummer, slik at en andre beregning kan utføres på total
  • Den klare knappen må oppføre seg som annonsert, og nullstille kalkulatoren helt
  • Visuell tilbakemelding må brukes når det er hensiktsmessig, men viktigere, funksjonaliteten må samsvare med standardoppsettet av zillionene av kalkulatorer på stasjonære maskiner verden over /

Listen kan fortsette, men du ser selv de enkleste grensesnittene krever mye hensyn.

HTML-merkingen

Ikke noe fancy her. Vi trenger en beholder til kalkulatoren, vi trenger en skjerm, og vi trenger en haug med knapper.

, , og vil gjøre pent. JavaScript gjør alt arbeidet her, det er ingen "grasiøs nedbrytning" som skjer. Hvis JavaScript er deaktivert, kommer denne kalkulatoren ikke til å fungere, så vi vil bare gjemme det helt. Så, vi skal ikke gjøre dette til en ekte
, så hvorfor ? Inngangene tillater at tekst skrives inn manuelt, som vi vil tillate. De gir mulighet for enkel valgbarhet, og de har "value" -attributtet, som er praktisk for å få og sette inn.

Her er hele settet og kaboodle:

  7 8 9 4 5 6 1 2 3 0. C - x / =

Full Screencast


Opprette bildene


Vi trenger bare noen få. Bakgrunnen til hele kalkulatoren, en "nummer" stilknapp, en "funksjon" stilknapp, og "likestilling" -knappen. Hvert nummer og funksjon trenger ikke sitt eget bilde, vi legger bare inn tekst rett over toppen. Jeg tror "Arial Black" gjør en fin fet og kalkulatoraktig skrift.

Senere når vi gjør kalkulatoren åpen og lukkende, bruker vi "mini" kalkulatorens grafikk og "lukk" -knappen.

Styling med CSS

Igjen ingenting for fancy her. Absolutt posisjonering gjør det meste av det grunne arbeidet som gjør ting der de skal gå. Vi setter stilling: relativ på kalkulatoren div selv og da er vi fri til å helt posisjonere innsiden av den.

Her er mye av det: 

* margin: 0; polstring: 0;  kropp font: 25px "Arial Black", Arial, Sans-Serif;  # page-wrap width: 500px; margin: 25px auto;  h1 skriftstørrelse: 22px;  p font: 14px Arial, Sans-Serif;  en farge: svart; tekst-dekorasjon: ingen; oversikt: ingen;  #calculator width: 266px; høyde: 400px; bakgrunn: url (... /images/calc-bg.png) no-repeat; stilling: relativ; skjerm: ingen;  #display background: none; grense: ingen; posisjon: absolutt; topp: 15px; venstre: 15px; bredde: 197px; tekstjustering: høyre; font: 35px "Arial Black", Arial, Sans-Serif;  .num-button width: 44px; høyde: 41px; polstring: 3px 0 0 0; tekst-align: center; bakgrunn: url (... /images/button-bg.png) no-repeat; posisjon: absolutt; skjerm: blokk;  .clear-button width: 44px; høyde: 41px; polstring: 3px 0 0 0; tekst-align: center; bakgrunn: url (... /images/button-bg.png) no-repeat; posisjon: absolutt; skjerm: blokk;  .funksjonsknapp bredde: 44px; høyde: 41px; polstring: 3px 0 0 0; tekst-align: center; bakgrunn: url (... /images/function-button-bg.png) no-repeat; posisjon: absolutt; skjerm: blokk;  .funksjonsknapp: aktiv, .pendentfunksjon bakgrunnsstilling: nederst til venstre;  .seven toppen: 86px; venstre: 15px;  .ight topp: 86px; venstre: 66px;  .nine toppen: 86px; igjen: 118px;  / * ... resten av knappene ... * / .multiply top: 188px; igjen: 169px;  .divide toppen: 237px; igjen: 169px;  .equals-button width: 206px; høyde: 42px; tekst-align: center; topp: 293px; venstre: 15px; bakgrunn: url (... /images/equals-bg.png) no-repeat; posisjon: absolutt; skjerm: blokk;

Sette opp jQuery Enviornment

I HTML-koden har vi noen anrop for å gjøre deg klar til å begynne å skrive vår egen jQuery JavaScript. Nemlig laster du inn jQuery og jQuery UI-biblioteker og ringer vår snart eksisterte JavaScript-fil.

Komme i gang

La oss legge det aller grunnleggende i. Vi trenger den klassiske "Når DOM er klar" -uttrykk for å sparke ting. Dette er vanlig for alle JavaScript fordi vi ikke vil gjøre noe med elementer før de alle har lastet. Deretter setter vi opp noen grunnleggende hendelser som vi vet skal skje. Vi har en klikkhendelse og funksjon for hver type knapp. Vi kaller også jQuery UI-funksjonen for å gjøre kalkulatoren sliten, så vel som den lille, lille funksjonen som gjør det mulig å bytte det siktbar.

$ (funksjon () $ ("num-knapp"). klikk (funksjon () // gjør ting); $ (". ), $ ("funksjons-knapp"). klikk (funksjon () // gjør ting); $ (". likestilling"). klikk (funksjon () // gjør ting); $ "#calculator"). draggable (); $ ("# opener, #closer"). klikk (funksjon () $ ("# opener"). ;);;

Bruke .data () for variabler, ikke globalt

Variabler i JavaScript er lokale til funksjonen de er opprettet i. Når du må passere en til en annen, gjør du det ved å overføre det som en parameter når du ringer til den nye funksjonen. Det er alt bra og bra, men vi har syv av dem, og de fleste av funksjonene våre trenger alle på en eller annen måte. Det kan bli ganske hårete som passerer dem alle sammen. Det vi virkelig trenger er globale variabler, men som jeg forstår det, er det en slags no-no (noe med krenkelser på navneområder).

jQuery har en bedre måte å håndtere dette uansett, den data() funksjon. Vi kan knytte "data" til et hvilket som helst jQuery-objekt, og at dataene beveger seg med det objektet hvor som helst det går. I utgangspunktet som et attributt, kan du bare ikke se det i DOM. Dette gjør i utgangspunktet hvilke globale variabler som vil gjøre for oss, og det er like enkelt å bruke. Her er biter av data som vi skal bruke:

  • ValueOne - Det første tallet i ligningen
  • ValueOneLocked - Er det første nummeret klart å gå?
  • ValueTwo - Det andre tallet i ligningen
  • ValueTwoLocked - Er det andre nummeret klart å gå?
  • isPendingFunction - Er det en funksjon valgt?
  • thePendingFunction - Hvilken?
  • fra tidligere - har en beregning bare blitt utført?

Vi skal legge til disse bitene av data til #display-inngangen, som vil være av hjernen til kalkulatoren vår. Kinda er fornuftig. Vi må sette opp standardverdier for alle disse bitene av data, men la oss tenke et øyeblikk. Vi kunne gjøre det riktig i hovedfunksjonen, men la oss være klare og abstrahere den bort til en funksjon. Det vil være flere scenarier vi må nullstille disse verdiene, så la oss lage en funksjon som heter resetCalculator å gjøre jobben. Da kan vi ringe den funksjonen når vi trenger det. La oss også akseptere en nummerparameter, og tilbakestill kalkulatoren til den verdien. Når kalkulatoren laster, vil det være null, men etter en funksjon, vil vi nullstille bare tilbakestille til sluttverdien av beregningen.

funksjon resetCalculator (curValue) $ ("# display") .val (curValue); $ ( "Funksjonsknappen ") removeClass (" pendingFunction."); $ ("# display"). data ("isPendingFunction", false); $ ("# display"). data ("thePendingFunction", ""); $ ("# display"). data ("valueOneLocked", false); $ ("# display"). data ("valueTwoLocked", false); $ ("# display"). data ("valueOne", curValue); $ ("# display"). data ("valueTwo", 0); $ ("# display"). data ("fra forrige", falsk);

Når du klikker et tall ...

Som det viser seg, hva kalkulatoren gjør når du klikker et tall er den mest kompliserte koden i hele greia. Det er fire "stater" kalkulatoren kan være i, og det vil oppføre seg annerledes når du klikker på et tall, avhengig av tilstanden. De er:

  • A) Klikk på et nummer i helt frisk tilstand (displayet viser null), eller når ingen av tallene er låst.
  • B) Klikk på et nummer etter at en funksjonsknapp er valgt.
  • C) Ved å trykke på et nummer etter at en funksjonsknapp er valgt og tilleggsnumre er angitt.
  • D) Å klikke på et tall etter en beregning har nettopp blitt utført.

Vår oppførsel må være følgende:

  • A) Legg det nye nummeret til det som allerede er der. Hvis det er null, erstatt det.
  • B) Lås det første nummeret, erstatt skjermen med det nye nummeret.
  • C) Legg det nye nummeret til det som allerede er der.
  • D) Tilbakestill kalkulatoren til det nummeret.

Og her er alt det i kode:

$ (".no-knappen"). klikk (funksjon () hvis ($ ("# display"). data ("fraForrige") == sann) resetCalculator ($ (this) .text ()); data ("valueOneLocked") == false)) $ ("# display"). Data ("$ PauseFunction") == true) ) .data ("valueOne", $ ("# display") .val ()); $ ("# display") .data ("valueOneLocked", sant); $ ("# display") .val dette ()), $ ("# display"). data ("valueTwo", $ ("# display") .val ()); $ ("# display") .data ("valueTwoLocked" ); // Klikk på et nummer AGAIN, etter første nummer låst og allerede verdi for andre nummer ellers hvis (($ ("# display"). Data ("isPendingFunction") == true) && ($ ("# display" ) .data ("valueOneLocked") == true)) var curValue = $ ("# display") .val (); var toAdd = $ (dette) .text (); var newValue = curValue toAdd; $ #display ") .val (newValue); $ (" # display ") data (" valueTwo ", $ (" # display ") .val ()); $ (" # display ") .data (" valueTwoLocked " , true); // Klikk på et tall friskt ellers var curValue = $ ("# display") .val (); hvis (curValue == "0") curValue = "";  var toAdd = $ (dette) .text (); var newValue = curValue toAdd; $ ( "# Display") val (nyVerdi.); );

Funksjonsknappen er lettere å håndtere. I utgangspunktet når du klikker den, låses det første nummeret slik at talltastene vet at det er på tide å starte det andre nummeret. Det er imidlertid en spesiell vurdering, og det er det som skal gjøres dersom en funksjonsknapp trykkes umiddelbart etter at en beregning er utført. I så fall må det første nummeret låses inn som den endelige verdien og allerede gjør seg klar til å akseptere det andre nummeret. Dette tillater kjetting av kalkulasjoner, noe som er ganske nyttig.

Når du klikker, blir alle funksjonsknappene fjernet av en spesiell "ventende funksjon" -klasse, og deretter brukes den klassen til den spesifikke klikkeknappen. Det gir oss CSS-kontrollen for å flytte bakgrunnsposisjonen og gi litt visuell tilbakemelding på hvilken er den aktive funksjonen.


$ ("funksjonsknapp"). klikk (funksjon () hvis ($ ("# display"). data ("fraForrige") == sann) resetCalculator ($ ("# display") .val ), $ ("# display"). data ("valueOneLocked", false); $ ("# display") .data ("fraForrige", falsk) // La det være kjent at en funksjon er valgt var venterFunksjon data ("thePendingFunction", true); $ ("# display") .data ("thePendingFunction", ventendeFunksjon); // Visuell representere gjeldende funksjon $ (".funksjon-knapp"). removeClass ("pendingFunction"); $ (dette) .addClass ("pendingFunction"););

Og svaret er ...

Likestilling er også ganske enkel. Det første vi gjør er å se om vi faktisk er klare til å gjøre noen beregninger. Vi vet dette hvis begge tallene er "låst". Hvis de er, gjør litt matte for å få det endelige tallet, og deretter "reset" kalkulatoren den endelige verdien (og sett "fra tidligere" til ekte slik at vi vet den delikate tilstanden vi er i).

Hvis tallene ikke er låst ... gjør ingenting.

data ("valueOneLocked") == true) && ($ ("# display") .data (" valueTwoLocked ") == true)) if ($ (" # display ") data (" thePendingFunction ") ==" ") var finalValue = parseFloat ($ (" # display "). data ("thePendingFunction") == "% u2013") var finalValue = parseFloat ($ "display"). $ ("# Display"). Data ("valueOne")) - parseFloat ($ ("# display") .data ("valueTwo")) data ("valueOne")) * parseFloat ($ ("# display"). data ("valueTwo")) ($ ("# display"). data ("thePendingFunction") == "/") var finalValue = parseFloat ($ ("# display" data ("valueTwo")); $ ("# display") .val (finalValue); resetCalculator (finalValue); $ ("# display") // begge tallene er ikke låst, gjør ingenting.);

KLAR!

Sist men ikke minst er den klare knappen den enkleste av dem alle. Trykk på den, fjern kalkulatoren til null.

$ (".knappen"). klikk (funksjon () resetCalculator ("0"););

Og vi er ferdige



Det gjør det folkens. Jeg håper mellom liveeksemplet, screencast og denne skriftlige opplæringen, dette har vært en verdifull læringsøkt. Jeg har sikkert lært noen ting mens du lager den. Hvis du kan tenke på noen ekstremt nyttige anvendelser av dette, kontakt meg og gi meg beskjed.

Kode
×