Slik Bruker du jQuery Til Å La Besøkende Endre Størrelsen På Nettstedets Skrift

Du kan bruke jQuery til å gi besøkende på nettstedet muligheten til å endre størrelsen på nettstedets skrift. Dette er et nyttig grensesnitt å ha, siden de besøkende kan forstørre eller redusere størrelsen på skriften på fritiden, noe som gir dem den beste leseopplevelsen. Hvis du ikke er kjent med jQuery, sjekk ut vår Jquery Grunnleggende artikkel for en forklaring på hvordan jQuery fungerer.

dette er en interaktiv kodevisning som viser HTML, CSS, jQuery og en demo av utgangen.

Sette OPP HTML For Resizing

det første du må gjøre er å sette OPP HTML slik at jQuery kan bestemme hva du skal endre størrelsen. Hvis du ikke er kjent med å utstyre HTML-dokumentet ditt for å referere til jQuery, kan du se Vår Få HTML Klar for jquery-artikkel.

først må du legge til et resizing-grensesnitt. Ikke bekymre deg, dette høres mer komplisert enn det egentlig er. Dette er bare noe nettstedbrukerne kan samhandle med for å endre størrelsen på nettsidens skrift. Som du kan se i eksemplet ovenfor, brukte vi koblinger som ble representert som pluss, minus og ordet » tilbakestill.»

<a class="increase">+</a><a class="decrease">-</a><a class="reset">reset</a>

hver lenke skal ha en klasse som representerer handlingen, som » øke «eller» redusere.»Når vi legger til jQuery, skal vi bruke disse klassene for å indikere hvilken lenke som skal øke, redusere eller tilbakestille skriftstørrelsen.

vurder nå hvilke elementer eller seksjoner du vil endre størrelsen på. Hvis det er en seksjon, vil du kanskje opprette en < div > med en klasse slik at du kan angi et unikt område som skal endres.

Se Pennen jQuery: Resizing Nettside Skrift Klasse Eksempel Av Par Nettverk (@pairdocs) På CodePen.

i eksemplet ovenfor kan du se at< div > med klassen= «resizable»er merket for å bli endret. Resten av avsnittene påvirkes imidlertid ikke, med mindre du angir at alle<p > – elementer også skal endres.

jQuery For Resizing

jQuery håndterer tunge løft av resizing. Hvis du ikke er kjent med jQuery, sjekk ut vår Jquery Basics-artikkel for å få en forståelse av de vanlige konseptene.

det første trinnet er å lage en $ (dokument).klar funksjon som vil omslutte alle dine jQuery uttalelser.

$(document).ready(function(){//jQuery statements//jQuery statements});

Deretter skal vi legge til den første jquery-setningen for å gå innenfor denne funksjonen.

var resize = new Array('element','.class'); resize = resize.join(',');

denne setningen fastslår hvilke elementer eller klasser som skal inkluderes i resizing. Disse elementene / klassene lagres i variabelen » resize.»Hvis du ser på resizing font-eksemplet, vil du se at<p > – elementet og «resizable» – klassen ble valgt for resizing.

etter å ha fastslått hvilke elementer eller klasser som vil bli påvirket, må du sette opp koden for å faktisk endre skriftstørrelsen når en besøkende samhandler med resizing-grensesnittet.

Tilbakestill Skriftstørrelsen

under vår» var resize » – setning skal vi legge til en setning som vil tilbakestille skriften til sin opprinnelige størrelse.

 var resetFont = $(resize).css('font-size'); $(".reset").click(function(){ $(resize).css('font-size', resetFont); });

denne setningen kaller elementene eller klassene du lagret i» resize «- variabelen, og når koblingen med» reset » – klassen klikkes, går skriftstørrelsesattributtet i CSS tilbake til sin opprinnelige størrelse.

$(«.tilbakestille»).klikk (funksjon () kaller klassen «reset» FRA HTML. Dette gjør det mulig for jQuery å tilbakestille skriftstørrelsen når brukeren samhandler med teksten som er knyttet til «reset» – klassen. I vårt eksempel er denne teksten bare» reset » – lenken.

Øk Skriftstørrelsen

Deretter må vi legge til en setning som vil øke skriftstørrelsen. I vårt eksempel la vi til» øk «- klassen til » + «- lenken, så vi må knytte jquery-handlingen for å øke størrelsen til»+».

dette eksemplet gjør nettopp det.

//specifies that this will affect the "increase" class $(".increase").click(function(){//creates a variable that holds the current font size var originalFontSize = $(resize).css('font-size');//creates a variable that parses the number var originalFontNumber = parseFloat(originalFontSize, 10);//creates a variable that holds the increased font sizevar newFontSize = originalFontNumber*1.2;//changes the font-size in the CSS document $(resize).css('font-size', newFontSize); return false; });

eksemplet starter ved å fastslå at denne setningen er avhengig av at en bruker klikker på teksten som er knyttet til» øk » – klassen. Dette er en » + » i vårt eksempel. De neste tre linjene legger til nye variabler: originalFontSize, originalFontNumber og newFontSize.

originalFontSize samler gjeldende skriftstørrelse fra CSS og lagrer den. originaFontNumber analyserer dette nummeret slik at jQuery kan lese det. Deretter tar newFontSize nummeret som er lagret i originalFontNumber og multipliserer det med 1.2.

deretter går den siste linjen inn I CSS og endrer skriftstørrelsen for å matche newFontSize.

denne sekvensen utføres hver gang «+» klikkes.

Reduser Skriftstørrelsen

reduser-setningen er svært lik den forrige setningen. I stedet for å multiplisere skriftstørrelsen med et tall som vil øke det opprinnelige skriftnummeret, multipliserer reduksjons-setningen det opprinnelige skriftnummeret med et desimal, noe som reduserer det.

//specifies that this will affect the "decrease" class $(".decrease").click(function(){//creates a variable that holds the current font size var originalFontSize = $(resize).css('font-size');//creates a variable that parses the number var originalFontNumber = parseFloat(originalFontSize, 10);//creates a variable that holds the decreased font size var newFontSize = originalFontNumber*0.8;//changes the font-size in the CSS document $(resize).css('font-size', newFontSize); return false; });});

denne sekvensen utføres hver gang «-» klikkes. Dette vil redusere skriftstørrelsen med hvert klikk.