Kuinka käyttää jQueryä, jotta kävijät voivat muuttaa sivustosi kirjasimen kokoa

voit käyttää jQueryä antamaan verkkosivustosi kävijöille mahdollisuuden muuttaa sivustosi kirjasimen kokoa. Tämä on hyödyllinen käyttöliittymä on, koska kävijät voivat suurentaa tai pienentää fontin niiden vapaa, antaa heille parhaan lukukokemuksen. Jos et tunne jQuerya, tutustu jQuery Basics-artikkeliimme saadaksesi selityksen siitä, miten jQuery toimii.

tämä on interaktiivinen koodinäyttö, joka näyttää HTML -, CSS -, jQuery-ja Demon tulosteesta.

HTML: n määrittäminen koon muuttamiseksi

ensimmäinen asia, joka sinun täytyy tehdä, on HTML: n määrittäminen, jotta jQuery voi päättää, mitä kokoa muuttaa. Jos et tunne varustamista HTML-asiakirjan viittaus jQuery, katso meidän saada HTML valmis jQuery artikkeli.

ensin pitää lisätä koon muutos. Älä huoli, tämä kuulostaa monimutkaisemmalta kuin se todellisuudessa on. Tämä on vain jotain sivuston käyttäjät voivat vuorovaikutuksessa muuttaa verkkosivun fontin. Kuten näet yllä olevassa esimerkissä, käytimme linkkejä, jotka edustettiin plus, miinus, ja sana, ” reset.”

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

jokaisella linkillä tulee olla luokka, joka edustaa toimintaa, kuten ”lisäys” tai ”lasku.”Kun lisäämme jQuery, aiomme käyttää näitä luokkia osoittamaan, mikä linkki pitäisi lisätä, pienentää tai nollata fontin kokoa.

arvioi nyt, mitkä elementit tai osiot haluat resizoitaviksi. Jos kyseessä on osio, haluat ehkä luoda <div> luokan, jotta voit määrittää yksilöllisen alueen, jonka kokoa muutetaan.

See the Pen jQuery: Resizing Webpage Font Class Example by Pair Networks (@pairdocs) on CodePen.

yllä olevassa esimerkissä näkyy, että <div>, jossa class= ”resizable”, on merkitty muutettavaksi. Muut kappaleenne eivät kuitenkaan muutu, ellette määritä, että myös kaikki <p> elementit on mitoitettava uudelleen.

jQuery for Resizing

jQuery hoitaa resizingin raskaan noston. Jos et tunne jQuerya, tutustu jQuery Basics-artikkeliimme saadaksesi käsityksen yleisistä käsitteistä.

ensimmäinen askel on luoda $(dokumentti).valmis toiminto, joka koteloi kaikki jQuery lausuntoja.

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

seuraavaksi lisätään tähän funktioon ensimmäinen jQuery-lauseke.

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

tässä lausekkeessa määritellään, mitkä osat tai luokat on sisällytettävä koon muuttamiseen. Nämä elementit / luokat tallennetaan muuttujaan ” muuta kokoa.”Jos katsoo uudelleen koon kirjasinesimerkkiä, huomaa, että <P> elementti ja ”resizable” – Luokka valittiin uudelleen kokoon.

sen jälkeen, kun olet määrittänyt, mitkä elementit tai luokat vaikuttavat, sinun täytyy määrittää koodi, jotta voit itse muuttaa kirjasinkokoa, kun kävijä on vuorovaikutuksessa koon muokkausliittymäsi kanssa.

Nollaa kirjasinkoko

”var resize” – lausekkeen alle lisätään lauseke, joka Nollaa kirjasimen alkuperäiseen kokoonsa.

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

tämä lauseke kutsuu muuttujaan ”muuta kokoa” tallennettuja elementtejä tai luokkia, ja kun linkkiä ”palauta”-luokkaan napsautetaan, css: n fonttikoko-attribuutti palaa alkuperäiseen kokoonsa.

the $(”.palauttaa”).click (function () kutsuu HTML: stä ”reset” – luokkaa. Tämän avulla jQuery voi nollata kirjasinkoon, kun käyttäjä on vuorovaikutuksessa ”reset” – luokkaan liittyvän tekstin kanssa. Meidän esimerkki, tämä teksti on yksinkertaisesti ”reset” linkki.

korota kirjasinkokoa

seuraavaksi on lisättävä lauseke, joka kasvattaa kirjasinkokoa. Esimerkissämme lisäsimme” lisäys ”- luokan ” + ” – linkkiin, joten meidän on sidottava koon kasvattamisen jQuery-toiminta ”+ ” – linkkiin.

tämä esimerkki tekee juuri niin.

//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; });

esimerkki alkaa toteamalla, että tämä lauseke on riippuvainen siitä, että käyttäjä napsauttaa ”increase” – luokkaan liittyvää tekstiä. Tämä on ” + ” esimerkissämme. Kolme seuraavaa riviä lisää uusia muuttujia: originalFontSize, originalFontNumber ja newFontSize.

originalFontSize kerää nykyisen kirjasinkoon CSS: stä ja tallentaa sen. originaFontNumber jäsentää tämän numeron, jotta jQuery voi lukea sen. Sitten, newFontSize vie numero tallennetaan originalFontNumber ja moninkertaistaa sen 1.2.

sitten viimeinen rivi menee CSS: ään ja muuttaa fontin koon vastaamaan newFontSize.

tämä sekvenssi suoritetaan aina, kun ”+” napsautetaan.

pienennä kirjasinkokoa

pienennyslauseke on hyvin samanlainen kuin edellinen lauseke. Sen sijaan, että kirjasinkoko kerrottaisiin luvulla, joka kasvattaa alkuperäistä kirjasinlukua, pienennyslauseke kertoo alkuperäisen kirjasinluvun desimaalilla, mikä pienentää sitä.

//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; });});

tämä sekvenssi suoritetaan aina, kun ” – ” napsautetaan. Tämä pienentää kirjasimen kokoa jokaisella klikkauksella.