A jQuery használata a látogatók átméretezéséhez a webhely betűtípusa

a jQuery segítségével a webhely látogatói átméretezhetik a webhely betűtípusát. Ez egy hasznos felület, mivel a látogatók szabadidejükben nagyíthatják vagy csökkenthetik a betűtípus méretét, így a legjobb olvasási élményt nyújtva számukra. Ha nem ismeri a jQuery – t, nézze meg a jQuery alapjai cikkünket a jQuery működésének magyarázatáért.

ez egy interaktív kód kijelző, amely megmutatja a HTML, CSS, jQuery, és egy demo a kimenet.

HTML beállítása átméretezéshez

az első dolog, amit meg kell tennie, hogy beállítsa a HTML-t, hogy a jQuery meghatározza, mit kell átméretezni. Ha nem ismeri a HTML-dokumentum felszerelését a jQuery hivatkozására, olvassa el a HTML előkészítése a jQuery-hez cikkünket.

először hozzá kell adnia egy átméretező felületet. Ne aggódj, ez bonyolultabbnak hangzik, mint amilyen valójában. Ez csak valami, amit a webhely felhasználói kölcsönhatásba léphetnek a weboldal betűtípusának átméretezésével. Amint a fenti példában látható, olyan linkeket használtunk, amelyek plusz, mínusz, valamint a ” reset.”

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

minden linknek rendelkeznie kell egy olyan osztálytal, amely a műveletet képviseli, például “növekedés” vagy “csökkenés.”Amikor hozzáadjuk a jQuery-t, ezeket az osztályokat fogjuk használni annak jelzésére, hogy melyik linknek kell növelnie, csökkentenie vagy visszaállítania a betűméretet.

most értékelje, hogy mely elemeket vagy szakaszokat szeretné átméretezni. Ha ez egy szakasz, akkor érdemes létrehozni egy <div> osztályt, hogy megadhasson egy átméretezendő egyedi területet.

lásd a Pen jQuery: átméretezés weboldal Font osztály példa pár hálózatok (@pairdocs) a CodePen.

a fenti példában láthatja, hogy a < div> osztály=”átméretezhető” van jelölve átméretezésre. A bekezdések többi részét azonban ez nem érinti, hacsak nem adja meg, hogy az összes <p> elemet is átméretezni kell.

jQuery átméretezéshez

a jQuery kezeli az átméretezés nehéz emelését. Ha nem ismeri a jQuery – t, nézze meg a jQuery alapjai cikkünket, hogy megértse a közös fogalmakat.

az első lépés egy $(dokumentum) létrehozása.ready funkció, amely magában foglalja az összes jQuery nyilatkozatok.

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

ezután hozzáadjuk az első jQuery utasítást, amely ezen a funkción belül megy.

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

ez a nyilatkozat meghatározza, hogy mely elemeket vagy osztályokat kell belefoglalni az átméretezésbe. Ezeket az elemeket/osztályokat a változó tárolja ” átméretezés.”Ha megnézi az átméretezési betűtípus példát, látni fogja, hogy a <p> elemet és az “átméretezhető” osztályt választották az átméretezéshez.

miután megállapította, hogy mely elemeket vagy osztályokat érinti, be kell állítania a kódot, hogy valóban megváltoztassa a betűméretet, amikor a látogató interakcióba lép az átméretező felülettel.

a betűméret visszaállítása

a “var resize” utasításunk alatt hozzá fogunk adni egy utasítást, amely visszaállítja a betűtípust az eredeti méretére.

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

ez az utasítás meghívja a “resize” változóban tárolt elemeket vagy osztályokat, és amikor a “reset” osztályra mutató hivatkozásra kattint, a CSS betűméret attribútuma visszatér az eredeti méretéhez.

a $(“.Visszaállítás”).kattintson a (function () hívja a “reset” osztályt a HTML-ből. Ez lehetővé teszi a jQuery számára a betűméret visszaállítását, amikor a felhasználó interakcióba lép a “reset” osztályhoz társított szöveggel. Példánkban ez a szöveg egyszerűen a” reset ” link.

növelje a betűméretet

ezután hozzá kell adnunk egy nyilatkozatot, amely növeli a betűméretet. Példánkban hozzáadtuk a” növekedés “osztályt a” + “linkhez, ezért a méret növelésének jQuery műveletét a “+ ” – hoz kell kötnünk.

ez a példa pontosan ezt teszi.

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

a példa azzal kezdődik, hogy megállapítja, hogy ez az utasítás attól függ, hogy egy felhasználó rákattint-e az “increase” osztályhoz társított szövegre. Ez egy ” + ” a példánkban. A következő három sor új változókat ad hozzá: originalFontSize, originalFontNumber és newFontSize.

originalFontSize összegyűjti az aktuális betűméretet a CSS-ből, és tárolja. az originaFontNumber elemzi ezt a számot, hogy a jQuery el tudja olvasni. Ezután a newFontSize az originalFontNumber-ben tárolt számot szorozza meg 1.2-vel.

ezután az utolsó sor a CSS-be kerül, és megváltoztatja a betűméretet, hogy megfeleljen a newFontSize-nek.

ez a sorozat minden alkalommal végrehajtásra kerül, amikor a “+” gombra kattint.

a betűméret csökkentése

a csökkentési utasítás nagyon hasonlít az előző utasításhoz. Ahelyett, hogy megszorozná a betűméretet egy számmal, amely növeli az eredeti betűszámot, a csökkenés utasítás megszorozza az eredeti betűszámot tizedesvel, ami csökkenti azt.

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

ez a sorozat minden alkalommal végrehajtódik, amikor a “-” gombra kattint. Ez minden kattintással csökkenti a betűméretet.