Jak používat jQuery, aby návštěvníci změnit velikost písma vašeho webu

můžete použít jQuery dát návštěvníkům vašich webových stránek možnost změnit velikost písma vašeho webu. Toto je užitečné rozhraní, protože vaši návštěvníci mohou zvětšit nebo zmenšit velikost písma ve svém volném čase, což jim dává nejlepší zážitek ze čtení. Pokud nejste obeznámeni s jQuery, podívejte se na náš článek jQuery Basics, kde najdete vysvětlení, jak jQuery funguje.

Jedná se o interaktivní zobrazení kódu, které zobrazuje HTML, CSS, jQuery a ukázku výstupu.

nastavení HTML pro změnu velikosti

první věc, kterou musíte udělat, je nastavit HTML, takže jQuery může určit, co změnit velikost. Pokud nejste obeznámeni s vybavením dokumentu HTML k odkazu na jQuery, podívejte se na náš článek Příprava HTML na jQuery.

nejprve je třeba přidat rozhraní pro změnu velikosti. Nebojte se, Zní to komplikovaněji, než ve skutečnosti je. To je jen něco, s čím mohou uživatelé vašich webových stránek komunikovat, aby změnili velikost písma vaší webové stránky. Jak vidíte ve výše uvedeném příkladu, použili jsme odkazy, které byly reprezentovány jako plus, mínus a slovo „reset“.“

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

každý odkaz by měl mít třídu, která představuje akci, jako „zvýšit“ nebo „snížit“.“Když přidáme jQuery, použijeme tyto třídy k označení, který odkaz by měl zvětšit, zmenšit nebo resetovat velikost písma.

nyní zhodnoťte, jaké prvky nebo sekce chcete změnit velikost. Pokud se jedná o sekci, můžete vytvořit <div> s třídou, abyste mohli určit jedinečnou oblast, která má být změněna.

viz pero jQuery: Změna velikosti webové stránky Font příklad třídy párových sítí (@pairdocs) na CodePen.

ve výše uvedeném příkladu můžete vidět, že <div> s class= „resizable“ je označen pro změnu velikosti. Zbytek vašich odstavců však nebude ovlivněn, pokud neurčíte, že všechny prvky <p> by měly být také změněny.

jQuery pro změnu velikosti

jQuery zpracovává těžké zvedání změny velikosti. Pokud nejste obeznámeni s jQuery, podívejte se na náš článek jQuery Basics a získejte přehled o běžných pojmech.

prvním krokem je vytvoření $(document).připravená funkce, která obalí všechny vaše příkazy jQuery.

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

dále přidáme první příkaz jQuery, který půjde do této funkce.

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

toto prohlášení stanoví, které prvky nebo třídy by měly být zahrnuty do změny velikosti. Tyto prvky / třídy jsou uloženy v proměnné “ změnit velikost.“Pokud se podíváte na příklad změny velikosti písma, uvidíte, že prvek <p> a třída „změnit velikost“ byly vybrány pro změnu velikosti.

po zjištění, které prvky nebo třídy budou ovlivněny, musíte nastavit kód tak, aby skutečně změnil velikost písma, když návštěvník interaguje s rozhraním pro změnu velikosti.

resetujte velikost písma

pod naším příkazem „var resize“ přidáme příkaz, který resetuje písmo na původní velikost.

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

tento příkaz volá prvky nebo třídy, které jste uložili v proměnné“ resize“, a po kliknutí na odkaz s třídou „reset“ se atribut velikosti písma v CSS vrátí na původní velikost.

$(„.obnovit“).click (function() volá třídu „reset“ z HTML. To umožňuje jQuery resetovat velikost písma, když uživatel interaguje s textem přidruženým ke třídě“ reset“. V našem příkladu je tento text jednoduše odkazem „reset“.

Zvětšete velikost písma

dále musíme přidat příkaz, který zvětší velikost písma. V našem příkladu jsme přidali třídu „zvýšit“ na odkaz“+“, takže musíme spojit akci jQuery zvětšení velikosti na“+“.

tento příklad dělá právě to.

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

příklad začíná tím, že zjistí, že tento příkaz je závislý na uživateli, který klikne na text spojený se třídou“ zvýšit“. Toto je “ + “ v našem příkladu. Další tři řádky přidávají nové proměnné: originalFontSize, originalFontNumber, a newFontSize.

originalFontSize shromažďuje aktuální velikost písma z CSS a ukládá ji. originaFontNumber analyzuje toto číslo tak, aby jej jQuery mohl přečíst. Poté newFontSize vezme číslo uložené v originalFontNumber a vynásobí ho 1.2.

pak poslední řádek přejde do CSS a změní velikost písma tak, aby odpovídala newFontSize.

tato sekvence se spustí pokaždé, když kliknete na“+“.

zmenšit velikost písma

příkaz snížení je velmi podobný předchozímu příkazu. Namísto vynásobení velikosti písma číslem, které zvýší původní číslo písma, příkaz snížení vynásobí původní číslo písma desetinným číslem, což jej zmenší.

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

tato sekvence se spustí při každém kliknutí na“ -„. Tím se zmenší velikost písma s každým kliknutím.