u kunt jQuery gebruiken om bezoekers van uw website de mogelijkheid te geven het lettertype van uw site te wijzigen. Dit is een handige interface te hebben, omdat uw bezoekers kunnen vergroten of verkleinen van de grootte van het lettertype op hun gemak, waardoor ze de beste leeservaring. Als je niet bekend bent met jQuery, bekijk dan ons jQuery Basics artikel voor een uitleg over hoe jQuery werkt.
dit is een interactieve code die u de HTML, CSS, jQuery en een demo van de uitvoer toont.
HTML instellen voor het wijzigen van de grootte
het eerste wat u moet doen is uw HTML instellen zodat de jQuery kan bepalen wat de grootte is. Als u niet bekend bent met het uitrusten van uw HTML-document om te verwijzen naar jQuery, zie onze Getting Your HTML Ready for jQuery artikel.
eerst moet u een resizing interface toevoegen. Maak je geen zorgen, dit klinkt ingewikkelder dan het eigenlijk is. Dit is gewoon iets wat uw website gebruikers kunnen communiceren met het formaat van het lettertype van uw webpagina. Zoals je kunt zien in het voorbeeld hierboven, gebruikten we links die werden weergegeven als plus, minus, en het woord, ” reset.”
<a class="increase">+</a><a class="decrease">-</a><a class="reset">reset</a>
elke link moet een klasse hebben die de actie vertegenwoordigt, zoals “verhogen” of ” verlagen.”Wanneer we de jQuery toe te voegen, we gaan deze klassen gebruiken om aan te geven welke link moet verhogen, verlagen, of reset de lettergrootte.
bepaal nu welke elementen of secties u van grootte wilt veranderen. Als het een sectie is, kunt u een <div> met een klasse maken, zodat u een uniek gebied kunt opgeven dat moet worden aangepast.
zie Het Pen jQuery: Resizing webpagina Font Class Voorbeeld door paar netwerken (@pairdocs) op CodePen.
in het voorbeeld hierboven kunt u zien dat de <div> met de class=”resizable” gemarkeerd is om te worden aangepast. De rest van uw alinea ‘ s worden echter niet beïnvloed, tenzij u opgeeft dat alle <p> elementen ook moeten worden aangepast.
jQuery for Resizing
jQuery verzorgt het zwaar tillen van het resizen. Als u niet bekend bent met jQuery, check out onze jQuery Basics artikel om een greep te krijgen van de gemeenschappelijke concepten.
de eerste stap is het aanmaken van een $ (document).klaar functie die al uw jQuery verklaringen zal omhullen.
$(document).ready(function(){//jQuery statements//jQuery statements});
vervolgens voegen we het eerste jQuery statement toe om binnen deze functie te gaan.
var resize = new Array('element','.class'); resize = resize.join(',');
deze verklaring bepaalt welke elementen of klassen moeten worden opgenomen in de resizing. Deze elementen/klassen worden opgeslagen in de variabele “resize.”Als je kijkt naar het voorbeeld van het lettertype voor het wijzigen van de grootte, zul je zien dat het element <p> en de klasse” resizable ” zijn gekozen voor het wijzigen van de grootte.
nadat u hebt vastgesteld welke elementen of klassen zullen worden beïnvloed, moet u de code instellen om de lettergrootte daadwerkelijk te wijzigen wanneer een bezoeker communiceert met uw resizing interface.
Reset de lettergrootte
onder onze” var resize ” statement, gaan we een statement toevoegen dat het lettertype zal resetten naar de oorspronkelijke grootte.
var resetFont = $(resize).css('font-size'); $(".reset").click(function(){ $(resize).css('font-size', resetFont); });
dit statement roept de elementen of klassen aan die u hebt opgeslagen in de variabele” resize “en wanneer op de link met de klasse” reset ” wordt geklikt, zal het attribuut font-size in CSS terugkeren naar de oorspronkelijke grootte.
de $(“.reset”).click (function () roept de klasse “reset” aan vanuit de HTML. Dit stelt de jQuery in staat om de lettergrootte te resetten wanneer de gebruiker interageert met de tekst in verband met de “reset” klasse. In ons voorbeeld is deze tekst gewoon de “reset” link.
verhoog de lettergrootte
vervolgens moeten we een statement toevoegen dat de lettergrootte zal vergroten. In ons voorbeeld hebben we de “verhoging” klasse toegevoegd aan de ” + “link, dus we moeten de jquery actie van het vergroten van de grootte koppelen aan de”+”.
dit voorbeeld doet precies dat.
//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; });
het voorbeeld begint met de vaststelling dat dit statement afhankelijk is van een gebruiker die op de tekst klikt die hoort bij de klasse “verhogen”. Dit is een ” + ” in ons voorbeeld. De volgende drie regels voegen nieuwe variabelen toe: originalFontSize, originalFontNumber en newFontSize.
originalFontSize verzamelt de huidige lettergrootte uit de CSS en slaat deze op. originaFontNumber ontleedt dit nummer zodat jQuery het kan lezen. Vervolgens neemt newFontSize het nummer dat is opgeslagen in originalFontNumber en vermenigvuldigt het met 1.2.
dan gaat de laatste regel in de CSS en verandert de lettergrootte om overeen te komen met newFontSize.
deze reeks wordt uitgevoerd elke keer als op ” + ” wordt geklikt.
de lettergrootte verkleinen
de afname-statement lijkt sterk op de vorige statement. In plaats van de lettergrootte te vermenigvuldigen met een getal dat het oorspronkelijke lettertype zal verhogen, vermenigvuldigt de afname statement het oorspronkelijke lettertype nummer met een decimaal, waardoor het vermindert.
//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; });});
deze reeks wordt uitgevoerd elke keer dat op de ” – ” wordt geklikt. Dit verkleint de lettergrootte bij elke klik.
jQuery is een open-source software permissive onder een MIT-licentie. jQuery is geen product van Pair Networks, Inc., en paar netwerken biedt geen garantie voor jQuery. Houd er rekening mee dat er vele niveaus van javascript-bibliotheken beschikbaar zijn. Neem contact op met uw IT-professional voor advies en begeleiding over een geschikte bibliotheek. Dit specifieke product kan al dan niet aan uw behoeften voldoen. Pair Networks, Inc. is het verstrekken van ondersteuning voor deze tutorial voor uw gemak en is niet verantwoordelijk voor de prestaties van jQuery. Lees aandachtig de Voorwaarden en de omvang van de diensten voor een online dienst of product dat u overweegt te kopen of te gebruiken.
