Correction d’une vulnérabilité dans CSS avec jquery: un exemple pratique

Aujourd’hui, nous allons examiner un problème réel que CSS ne peut pas facilement résoudre, et examiner les méthodes de réparation de jquery. Dans mon travail de développement frontal, j’utilise souvent JavaScript et jquery, la bibliothèque \
Si vous voulez une brève introduction à jquery lui – même, voici un aperçu rapide des concepts et un bon tutoriel pour débutants. Notre exemple réel n’est pas beaucoup plus compliqué que le tutoriel, alors revenez dès que possible! Problème: l’une des Parties les plus uniques du menu de navigation de débordement wpshout Layout est son menu de navigation latérale. Nous l’aimons beaucoup, mais c’est aussi la source de la complexité stylistique derrière les exemples d’aujourd’hui. Notre menu de navigation est absolument positionné, ce qui peut entraîner un débordement en plus de sa forme généralement intéressante, notre menu de navigation se trouve en fait en partie au – dessus du conteneur de contenu principal, et le texte de l’article se trouve à: Cliquez sur zoom pour gérer cette mise en page et d’autres complexités de mise en page, et notre menu de navigation doit être absolument positionné. Cet attribut CSS, emplacement: absolu, Extraire les éléments du flux de mise en page principal de la page HTML. L’élément peut encore être associé à d’autres éléments Dom, mais ces autres éléments l’ignorent complètement dans leurs décisions de mise en page. Comme les éléments sont ignorés les uns des autres, des résultats vraiment problématiques peuvent être obtenus. En particulier, que se passe – t – il si le menu de navigation est plus haut
Du prochain article? Il devient laid, les éléments se chevauchent de façon inappropriée, et c’est ce que j’appelle un \ Cliquez pour agrandir nous avons besoin d’une hauteur minimale, mais quelle hauteur minimale devrions – nous choisir? Même pour les articles courts, nous voulons que le pied de page apparaisse uniquement sous le menu de navigation: Cependant, en cliquant pour agrandir, il n’y a aucun moyen de dire dans CSS « n’accédez qu’en dessous de cet élément absolument placé », car une partie de l’emplacement absolu est que d’autres éléments ignorent l’élément absolument placé dans leurs décisions de mise en page. Par conséquent, nous devons définir une hauteur minimale pour le conteneur principal de l’article, qui dans ce cas est la DIV de la classe de contenu principale: En cliquant sur zoom, nous devons continuellement détecter la hauteur du menu et régler la hauteur minimale du conteneur principal à cette hauteur. CSS ne peut pas le faire, mais jquery peut le faire. Quelle doit être la hauteur minimale? Il doit être \
Ce dont nous avons besoin, c’est d’une détection continue de la hauteur des menus et des réglages. Le contenu principal est le même. CSS ne peut pas le faire, mais jquery peut le faire. Correction: hauteur minimale de la page. Pour résoudre ce problème, j’a i écrit un script jquery, page Min height. JS, dans le thème wpshout. Je l’ai mis en file d’attente. Sujet PHP; Je ne vais pas montrer ce processus ici, donc si vous avez besoin de savoir comment faire la file d’attente pour les scripts et les STI
Regardez notre article sur ce sujet. C’est la hauteur minimale de la page. JS lui – même: (fonction ($) {\/ \/ 1. Définir la variable var navmenu = ‘. Navigation principale’; var pagecontent = ‘. Contenu principal’; var gap = parseint ($(‘html’). CSS (‘font size’), 10) * 2; \/ \/ 2. Définir la fonction assigner la hauteur minimale à la fonction setpagemin () {var height = $(navmenu). Height (); $(pagecontent). CSS (‘Min height’, height + GAP);} $ (fenêtre). Load (Function () {\/ \/ 3. Run Function Load setpagemin () on the first Window; \/ \/ 4. Run Function every 120ms when the window is redimensionné $(Window). Resize (Function () {settimeout (Function () {setpagemin ();), 120);});});}) (jquery); Je vais expliquer ce code en quatre parties, correspondant aux quatre sections précédentes.
1. Définir les variables dans cette section, nous définissons quelques variables que nous utiliserons dans le reste du script: navmenu est le nom de la classe de menu de navigation, comme indiqué ci – dessous. Navigation principale. Pagecontent est le nom de classe du conteneur de contenu principal, ici. Contenu principal. L’écart peut sembler déroutant, mais il s’agit d’un entier égal au « double de la taille du caractère principal du document HTML (en pixels) ». J’ai utilisé ce numéro pour créer un \
2. Définition setpagemin () Cette section définit une fonction setpagemin () qui fait deux choses: trouver la hauteur actuelle (en pixels) de l’objet spécifié par navmenu, c’est – à – dire. Navigation principale, menu de navigation lui – même. Définissez le contenu de la page du projet. Le contenu principal, donc sa hauteur minimale est égale à la hauteur du navmenu plus l’écart défini précédemment. 3. Exécuter setpagemin ()
Windowsload $(Windows). Chargement (fonction () {}); Définit une fonction qui s’exécute lorsque tous les objets Dom sont entièrement affichés dans le navigateur. C’est la hauteur du menu de navigation que nous pouvons mesurer de façon fiable, donc la première chose que nous devons faire à ce stade est d’exécuter setpagemin ().
4. Lancez setpagemin () pendant les heures de redimensionnement de la fenêtre, mais nous n’avons pas terminé. Que se passe – t – il si l’utilisateur redimensionne la fenêtre du navigateur? Cela rend facilement le menu de navigation plus haut ou plus court, ce qui le fait se chevaucher ou bien en dessous des limites fixées lors de notre premier appel à setpagemin (). Par conséquent, nous devons écouter l’utilisateur redimensionner la fenêtre et exécuter la fonction lorsque la fenêtre est redimensionnée. C’est $(fenêtre). Redimensionner (fonction () {}); Fa. Qu’est – ce qui est à l’intérieur de la fonction? La chose la plus simple est donc d’appeler setpagemin () comme suit:.
$(fenêtre). Redimensionner (fonction () {setpagemin ();}); Cependant, JavaScript est très nerveux. Le code ci – dessus exécutera setpagemin (); L’utilisateur Redimensionne le Navigateur toutes les millisecondes. Cela est excessif et peut entraîner un comportement de page instable. Au lieu de cela, nous lancerons setpagemin (); Toutes les 120 millisecondes. Ils sont environ huit fois par seconde: très rapides et beaucoup moins intenses pour les humains. C’est ce que fait le code suivant: settimeout (fonction () {setpagemin ();}, 120); Si vous souhaitez en savoir plus sur settimeout, je vous encourage à le lire! C’est une grande fonctionnalité avec une utilisation incroyable.
Dans certains cas, cette section exécute setpagemin (); Chaque fois que l’utilisateur redimensionne la fenêtre du navigateur, environ 8 fois par seconde, cela signifie que nous définissons la hauteur minimale pour le contenu principal par rapport à la mesure réelle