Accentsconagua

Bruk jQuery brukergrensesnittet til å kontrollere størrelsen på teksten

Kode
Share

JQuery's brukergrensesnitt kan legge til så mye på en nettside. Det er mange forskjellige widgets som brukergrensesnittet gir. En opp og kommende stjerne, er glidebryteren. I denne veiledningen vil jeg vise deg hvordan du bruker en glidebryter for å kontrollere tekststørrelsen på en artikkel på en side. Dette lar brukeren kontrollere nøyaktig størrelsen som passer dem, og er også en ganske imponerende funksjon å ha på et nettsted!

Den glidende delen av denne opplæringen reproduserer en teknikk opprinnelig laget av Buck Wilson.




Vårt mål

Vi vil til slutt få vår side til å se slik ut:

Oppførsel:

  • Når glidebryteren er trukket, vil en boble falme inn, forteller gjeldende størrelse.
  • Teksten "gjeldende tekststørrelse" vises også med gjeldende tekststørrelse ved siden av den.
  • Vi vil også forsøke å få teksten til å øke en px eller redusere ett px på klikk på pluss- eller minustegnet.

Trinn 1: Få nødvendige Javascript-filer

Selvfølgelig trenger vi JQuery, men vi skal også ha noen brukergrensesnitt for å utvide JQuery. Vi kan få en brukerfil som er tilpasset våre behov på JQuery-brukergrensesnittet. Bygg nedlastingssiden.

Som du kan se, er det noen virkelig flotte lydende effekter der! Så fristende som det kan være, trenger vi ikke alle disse effektene for å oppnå ønsket produkt. Alt vi trenger er:

  • UI Core
  • Slider
  • Klaus Hartl's Cookie plugin

Trinn 2: HTML

For denne opplæringen kommer jeg ikke til å kaste bort tid for å forklare grunnleggende om HTML, og lage et layout ved hjelp av det og CSS. Hvis du vil lære mer om det, er det andre opplæringsprogrammer her som min Top Panel-opplæring eller Collis 'Tabbed Content-veiledning. 

     Nettutløser       
 
 
 
 
 
 
 
 
 
 
 
Tekststørrelse Slider
 
Nåværende skriftstørrelse:  
 
 Lorem Ipsum er rett og slett dummy tekst av utskrift og typesetting industrien. Lorem Ipsum har vært bransjens standard dummy-tekst helt siden 1500-tallet, da en ukjent skriver tok et typegalleri og scrambled det for å lage en type prøvebok. Det har overlevd ikke bare fem århundrer, men også spranget i elektronisk typegodkjenning, gjenværende i det vesentlige uendret. Det ble popularisert på 1960-tallet med utgivelsen av Letraset-ark som inneholdt Lorem Ipsum-passasjer, og mer nylig med desktop publishing-programvare som Aldus PageMaker, inkludert versjoner av Lorem Ipsum.

Så du vil legge merke til flere ting:

  1. PNG-fikseringen for IE 5.5 og 6. Jeg har koblet direkte til google kodesiden. Dette betyr at jeg må slutte hver gjennomsiktig PNG med a -trans.png .
  2. Jeg har også koblet direkte til JQuery og vår tilpassede UI-fil.
  3. Jeg har satt de nødvendige kodene for skyvekontrollen i #header

MERK: For glidebryteren skal vi ha en bar og et håndtak.

Trinn 3: CSS

Her er CSS for å få den siden til å se litt bedre ut. Denne siden er ganske enkel, og derfor er CSS ganske enkel også:

 kropp bakgrunn: # 373737; tekst-align: center; margin: 0px;  #header width: 700px; høyde: 200px; bakgrunn: # 48887d url (bilder / header.jpg); margin-left: auto; margin-høyre: auto; stilling: relativ;  .slider_container posisjon: absolutt; høyde: 25px; topp: 170px; igjen: 165px;  .minus bakgrunn: url (bilder / minus-trans.png) no-repeat; høyde: 9px; bredde: 25px; overløp: skjult; flyte: venstre; markør: pointer;  .slider_bar bakgrunn: url (images / bar-trans.png) no-repeat; høyde: 9px; bredde: 316px; flyte: venstre; margin: 0px 5px; stilling: relativ;  .add bakgrunn: url (bilder / add-trans.png) no-repeat; høyde: 25px; bredde: 23px; flyte: venstre; stilling: relativ; topp: -5px; markør: pointer;  .slider_handle bakgrunn: url (images / selector-trans.png) no-repeat; høyde: 25px; bredde: 12px; posisjon: absolutt; topp: -8px;  #slider_caption bakgrunn: url (images / caption-trans.png) no-repeat; høyde: 45px; bredde: 38px; overløp: skjult; posisjon: absolutt; topp: -50px; margin-left: -10px; polstring: 5px 0px 0px 0px; font-familie: "Myriad Pro"; farge: # 36665d; font-weight: bold; tekst-align: center;  #text font-family: Helvetica, Arial, sans-serif; bredde: 655px; bakgrunn: # f9f9f9; margin-left: auto; margin-høyre: auto; polstring: 20px 20px 20px 25px; stilling: relativ;  #text p font-size: 12px; tekstjustering: venstre; farge svart;  #text h1 text-align: left; margin-venstre: 20px;  p font-familie: Arial, Helvetica, sans-serif; farge: #CCCCCC;  #font_indicator posisjon: absolutt; høyre: 100px; topp: 50px; skriftstørrelse: 10px; skjerm: ingen;

Igjen, jeg kommer heller ikke til å gå i detalj med CSS heller. Hvis du fortsatt trenger mer hjelp med det, må du sjekke ut de to opplæringsprogrammene jeg nevnte ovenfor. Hvis du har noen spørsmål, vær så snill å gi meg beskjed i kommentarene.

Legg merke til at alle png-bildene som har alfa-gjennomsiktighet, har a-trans.png-slutt.

Trinn 4: Grunnleggende Slider Effects

Da jeg først lærte om glidebryteren, ga jeg det til å undersøke litt mer om det og hvordan det virker. Vel, jeg var heldig å finne denne fantastiske screencast. Det hadde en veldig fin effekt også; en bildetekst som syntes å vise posisjonen til skyveknappen, på toppen av glidebryteren. Dessverre stoppet de der. Vi skal bruke en variant av deres JQuery-kode som et hoppe av punkt:

 $ (funksjon () $ ('# slider_caption'). skjul (); var captionVisible = false; $ ('slider_bar'). skyveknappen (håndtak: '.slider_handle', startValue: 26, minValue: 0, maxValue : 100, start: funksjon (e, ui) $ ('# slider_caption'). FadeIn ('fast', funksjon () captionVisible = true;);, stopp: funksjon (e, ui) if captionVisible == false) $ ('# slider_caption'). fadeIn ('fast', funksjon () captionVisible = true;); $ ('# slider_caption'). css ('left', ui.handle.css ("font": ui.value * 15/100 + 8) (tekstfeltet: Math.round (ui.value * 15/100 + 8)); $ ("div # text p" fadeIn ("slow"); $ ('# slider_caption'). fadeOut ('fast', funksjon () captionVisible = false;);, lysbilde: funksjon (e, ui) $ ('# slettet_caption '). css (' left ', ui.handle.css (' left ')). tekst (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). css (fontSize: ui.value * 15/100 + 8). fadeIn ("slow"););

Noen viktige ideer:

  • Først skjuler vi bildeteksten med Javascript. Dette gjør bildeteksten synlig hvis Javascript er deaktivert for bare litt mer tilgjengelighet.
  • Som du kan se, har vi nå en .slider modifier og flere delelementer også:
    • startValue: Dette spesifiserer stillingen som håndtaket starter på
    • minValue: Dette spesifiserer minimumsverdien som håndtaket skal gå til
    • MAXVALUE: Dette angir maksimalverdien som håndtaket skal gå til
    • start: Dette lar oss fortelle JQuery hva du skal gjøre når brukeren begynner å skyve på linjen
    • Stoppe: Dette angir hva som skjer når skyvekontrollen slippes av
    • lysbilde: Dette spesifiserer hva som skjer når glidebryteren glir
    • håndtak: Dette gjør at vi kan spesifisere hva som skal være håndtaket
  • Vi tildeler også en variabel som vil hjelpe oss når, når Stoppe: oppstår, om bildeteksten er synlig eller ikke, og deretter utføre en handling basert på den konklusjonen.
  • Vi måtte også sette en grense på skriftstørrelsen mulig, så vi begrenset mulighetene for skyveverdier til mellom 8 og 23. Vi gjorde dette ved å utføre grunnleggende matte på verdien av skyveknappen. (multiplisert med 15/100 og lagt til 8)
  • Denne ligningen resulterte i desimalstørrelser, så vi måtte rundt den Math.round
  • Legg merke til også metoden der vi laget teksten på toppen av håndtaket. Vi gjorde css venstre verdi av bildeteksten lik håndtaket.
  • Legg merke til at på Stoppe: Jeg har tekststørrelsen animert, mens jeg har css-størrelsen i konstant endring. Dette kan virke mot-intuitivt, det på lysbilde: Jeg ville ikke animere det, men av essensen av gradvis å skyve og forstørre størrelsen gjør det samme. Hvis jeg skulle animere i stedet for å bare endre css, ville det være hakket og ikke reagere.


Trinn 5: Legge til tekstteksten

 $ (funksjon () $ ('# slider_caption'). skjul (); var calloutVisible = false; $ ('slider_bar'). skyvekontroll (håndtak: '.slider_handle', startValue: 26, minValue: 0, maksValue : 100, start: funksjon (e, ui) $ ('# slider_caption'). FadeIn ('fast', funksjon () calloutVisible = true;); $ ('# font_indicator' );, stopp: funksjon (e, ui) if (calloutVisible == false) $ ('# slider_caption'). fadeIn ('fast', funksjon () calloutVisible = true;); $ font_indicator '). fadeIn (' slow '); $ (' # slider_caption '). css (' left ', ui.handle.css (' left ')). tekst (Math.round (ui.value * 15/100 + 8)); $ ('# font_indicator b'). Tekst (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). Animate (fontSize: ui.value * 15/100 + 8). FadeIn ("slow"); $ ('# slider_caption'). FadeOut ('fast', funksjon () calloutVisible = false;); $ ('# font_indicator'). fadeOut ('slow');, slide: funksjon (e, ui) $ ('# slider_caption'). css ('left', ui.handle.css ('left')). ui.value * 15/100 + 8)); $ ('# font_indicator b'). tekst (Math.round (ui. verdi * 15/100 + 8)); $ ("div # text p"). css (fontSize: ui.value * 15/100 + 8). fadeIn ("slow"); );


Viktige ideer om #font_indicator

  • Vi la til samme fade i og fade ut effekter på samme sted som bildeteksten
  • Vi dro ut css venstre posisjon skjønt
  • Legg merke til at vi har en tag i div # font-indikatoren. Dette gjør ikke bare tallet mer, men lar oss bare sette den nåværende glidebryterens verdi som tekst inn i den. Hvis vi bare fulgte til slutten av div, ville hver fontstørrelse bare hakke opp på slutten.

Trinn 6: Gir pluss- og minushandlinger

Dette ville bare ikke være et funksjonelt design, hvis vi ikke ga pluss- og minus-tegnene handlinger på klikk. Denne koden kan være litt sløv og ikke helt effektiv, men det blir jobben gjort. Dette prosjektet krevde en overraskende mengde matematikk, noe som forklarer noen av de brutale tallene som blir brukt.

Uten videre ado, her er resten av javascript, vil jeg forklare det etterpå:

 $ (". add"). klikk (funksjon () var currentFontSize = $ ('# text p'). css ('font size'); var currentFontSizeNum = parseFloat (currentFontSize, 10); var newFontSize = currentFontSizeNum + 1; hvis (newFontSize < 24)  $('#text p').css('font-size', newFontSize); $('#slider_caption').css('left', newFontSize*19.75 - 158).fadeIn('fast').text(Math.round(newFontSize )).fadeOut(); $('.slider_handle').css('left', newFontSize*19.75 - 158); $('#font_indicator').fadeIn('slow'); $('#font_indicator b').text(Math.round(newFontSize )); $('#font_indicator').fadeOut('slow');  else $('#font_indicator').fadeIn('slow'); $('#font_indicator b').text("Isn't 23 big enough?"); $('#font_indicator').fadeOut('slow');  return false; ); $(".minus").click(function() var currentFontSize = $('#text p').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum-1; if (newFontSize > 8) $ ('# text p'). Css ('font-size', newFontSize); $ ('# slider_caption'). css ('left', newFontSize * 19,75 - 158) .fadeIn ('fast') .tekst (Math.round (newFontSize)) .fadeOut (); $ ('slider_handle'). css ('left', newFontSize * 19,75 - 158); $ ( '# Font_indicator') fadeIn ( 'sakte.'); $ ('# font_indicator b'). tekst (Math.round (newFontSize)); $ ( '# Font_indicator') fadeout ( 'sakte.');  ellers $ ('# font_indicator'). fadeIn ('slow'); $ ('# font_indicator b'). tekst ("Er ikke 8 liten nok?"); $ ( '# Font_indicator') fadeout ( 'sakte.');  returner falsk; );

Noen viktige notater:

  • Hvis du vet grunnleggende Javascript syntax, bør dette være ganske selvklart.
  • Jeg tilordner en innledende variabel for å få gjeldende skriftstørrelse.
  • Jeg konverterer det til et heltall
  • Deretter oppretter jeg en annen variabel som er en verdi høyere.
  • Jeg plasserer en grense mellom under 24 og over 8 ved å bruke en om ikke annet uttalelse.

Matematikk tid

Justering av håndtaket og bildeteksten for å reagere på pluss og minus-klikk var en reell utfordring. Det jeg endte med å gjøre var å finne ut bredden på linjen (316px), og dele den mellom de 16 mulige skriftstørrelsene (8-23) for å finne ut hvor mye plass hvert trinn tok.

316/16 =

For å være trygg måtte jeg finne ut startpunktet for skriftstørrelsen. Jeg visste at dette ikke var akkurat 12, fordi jeg endret det litt med 15/100 + 8. Så jeg tok startverdien av håndtaket (26) og multiplisert det med det:

26 * 15/100 + 8 =

Jeg skjønte at siden det var avrundet, ville det være tolv uansett.

Så jeg skjønte at håndtaket ville være [skriftstørrelse * 19,75 - 158 (de første 8 størrelsene)] px.

Bare trodde at jeg ville gi deg et glimt inn i min rare og over kompliserte matte;). Det er sannsynligvis mye enklere måter å gjøre det på, men jeg antar at dette er logikken min.

Trinn 7: Cookie Time, leser informasjonskapsel

For å håndtere informasjonskapsler brukte jeg Klaus Hartls utmerkede cookie-plugin. Du kan se grunnleggende syntaks for pluginet i lenken jeg oppgav. Utfordringen var å finne et sted som på en pålitelig måte ville sette cookien. Jeg endte opp med å sette den når nettleseren oppdaterer eller endrer siden. Denne måten gjør det bare når det er nødvendig og realistisk også. Først legger vi koden til toppen av javascriptfilen for å lese informasjonskapselen:

 var startSize = $ .cookie ('fontSize'); var startSize = parseFloat (startSize, 12); $ ('# text p'). css ('font-size', startSize);

Hva jeg gjorde:

  • Jeg leste først informasjonskapselen og sendte den til variabelen startSize
  • Jeg endret den variabelen til et heltall
  • Jeg la da dette nummeret til standard css av teksten

Trinn 8: Angi informasjonskapsel

Som nevnt ovenfor må vi sette informasjonskapsel når siden er avsluttet. Vi gjør dette ved å bruke følgende kode: 

 window.onbeforeunload = leaveCookie; funksjon leaveCookie () var FontSize = $ ('# text p'). css ('font-size'); var IntFontSize = parseFloat (FontSize, 10); $ .cookie ('fontSize', IntFontSize);

Hva jeg gjorde:

  • MERK: Dette JS er utenfor av JQuery $ (funksjon () );
  • Først aktiverte jeg en funksjon når nettleseren forlot siden
  • Da konverterte jeg tekststørrelsen til et heltall
  • Så legger jeg dette inn i kaken

Det er det!

Håper du fant denne opplæringen nyttig! Vennligst unnskyld min programmeringslogikk, jeg tror ikke alltid så effektivt: P. Har du spørsmål eller kommentarer, vær så snill å gi meg beskjed i kommentarene!

  • Abonner på NETTUTS RSS-feed for flere daglige webutviklinger og artikler.


Kode
×