Vous pouvez utiliser jQuery pour permettre aux visiteurs de votre site Web de redimensionner la police de votre site. C’est une interface utile à avoir, car vos visiteurs peuvent agrandir ou réduire la taille de la police à leur guise, leur offrant la meilleure expérience de lecture. Si vous n’êtes pas familier avec jQuery, consultez notre article sur les bases de jQuery pour une explication du fonctionnement de jQuery.
Il s’agit d’un affichage de code interactif qui vous montre le code HTML, CSS, jQuery et une démonstration de la sortie.
Configuration du code HTML pour le redimensionnement
La première chose à faire est de configurer votre code HTML afin que jQuery puisse déterminer quoi redimensionner. Si vous n’êtes pas familier avec l’équipement de votre document HTML pour référencer jQuery, consultez notre article Préparer votre HTML pour jQuery.
Tout d’abord, vous devez ajouter une interface de redimensionnement. Ne vous inquiétez pas, cela semble plus compliqué qu’il ne l’est en réalité. C’est juste quelque chose avec lequel les utilisateurs de votre site Web peuvent interagir pour redimensionner la police de votre page Web. Comme vous pouvez le voir dans l’exemple ci-dessus, nous avons utilisé des liens représentés par plus, moins et le mot « réinitialiser. »
<a class="increase">+</a><a class="decrease">-</a><a class="reset">reset</a>
Chaque lien doit avoir une classe qui représente l’action, comme « augmenter » ou « diminuer. »Lorsque nous ajoutons le jQuery, nous allons utiliser ces classes pour indiquer quel lien doit augmenter, diminuer ou réinitialiser la taille de la police.
Maintenant, évaluez les éléments ou sections que vous souhaitez redimensionner. S’il s’agit d’une section, vous pouvez créer un div < > avec une classe afin de pouvoir spécifier une zone unique à redimensionner.
Voir l’exemple de classe de polices Pen jQuery: Redimensionnement de la page Web par des réseaux de paires (@pairdocs) sur CodePen.
Dans l’exemple ci-dessus, vous pouvez voir que le < div > avec la classe = »redimensionnable » est marqué pour être redimensionné. Cependant, le reste de vos paragraphes ne sera pas affecté, sauf si vous spécifiez que tous les éléments < p > doivent également être redimensionnés.
jQuery pour le redimensionnement
jQuery gère le levage lourd du redimensionnement. Si vous n’êtes pas familier avec jQuery, consultez notre article sur les bases de jQuery pour vous familiariser avec les concepts courants.
La première étape consiste à créer undocument(document).fonction ready qui enfermera toutes vos instructions jQuery.
$(document).ready(function(){//jQuery statements//jQuery statements});
Ensuite, nous allons ajouter la première instruction jQuery pour entrer dans cette fonction.
var resize = new Array('element','.class'); resize = resize.join(',');
Cette instruction établit quels éléments ou classes doivent être inclus dans le redimensionnement. Ces éléments/classes sont stockés dans la variable « redimensionner. »Si vous regardez l’exemple de police de redimensionnement, vous verrez que l’élément <p > et la classe « redimensionnable » ont été choisis pour le redimensionnement.
Après avoir établi quels éléments ou classes seront affectés, vous devez configurer le code pour modifier réellement la taille de la police lorsqu’un visiteur interagit avec votre interface de redimensionnement.
Réinitialiser la taille de la police
Sous notre instruction « var resize », nous allons ajouter une instruction qui réinitialisera la police à sa taille d’origine.
var resetFont = $(resize).css('font-size'); $(".reset").click(function(){ $(resize).css('font-size', resetFont); });
Cette instruction appelle les éléments ou les classes que vous avez stockés dans la variable « redimensionner » et, lorsque le lien avec la classe « réinitialiser » est cliqué, l’attribut font-size en CSS reviendra à sa taille d’origine.
Le $ (« .réinitialiser »).click(function() appelle la classe « reset » à partir du code HTML. Cela permet à jQuery de réinitialiser la taille de la police lorsque l’utilisateur interagit avec le texte associé à la classe « reset ». Dans notre exemple, ce texte est simplement le lien « réinitialiser ».
Augmentez la taille de la police
Ensuite, nous devons ajouter une instruction qui augmentera la taille de la police. Dans notre exemple, nous avons ajouté la classe « increase » au lien « + », nous devons donc lier l’action jQuery consistant à augmenter la taille au « + ».
Cet exemple fait exactement cela.
//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; });
L’exemple commence par établir que cette instruction dépend du fait qu’un utilisateur clique sur le texte associé à la classe « increase « . C’est un « + » dans notre exemple. Les trois lignes suivantes ajoutent de nouvelles variables: originalFontSize, originalFontNumber et newFontSize.
originalFontSize collecte la taille de police actuelle du CSS et la stocke. originaFontNumber analyse ce nombre afin que jQuery puisse le lire. Ensuite, newFontSize prend le nombre stocké dans originalFontNumber et le multiplie par 1,2.
Ensuite, la dernière ligne entre dans le CSS et modifie la taille de la police pour qu’elle corresponde à newFontSize.
Cette séquence s’exécutera à chaque clic sur le « + ».
Diminuer la taille de la police
L’instruction decrease est très similaire à l’instruction précédente. Cependant, au lieu de multiplier la taille de la police par un nombre qui augmentera le numéro de police d’origine, l’instruction decrease multiplie le numéro de police d’origine par une décimale, ce qui le réduit.
//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; });});
Cette séquence s’exécutera à chaque clic sur le « -« . Cela réduira la taille de la police à chaque clic.
jQuery est un logiciel open source permissif sous licence MIT. jQuery n’est pas un produit de Pair Networks, Inc., et Pair Networks ne fournit aucune garantie pour jQuery. Veuillez noter qu’il existe de nombreux niveaux de bibliothèques javascript disponibles. Veuillez consulter votre professionnel de l’informatique pour obtenir des conseils et des conseils sur une bibliothèque appropriée. Ce produit spécifique peut ou non répondre à vos besoins. Réseaux de paires, Inc. fournit un support pour ce tutoriel pour votre commodité et n’est pas responsable des performances de jQuery. Veuillez lire attentivement les conditions et la portée des services pour tout service ou produit en ligne que vous envisagez d’acheter ou d’utiliser.
