Share
Vous pourriez penser en vous-même: "Quel est le problème avec jQuery? Vous devez télécharger de nombreux plugins pour que la bibliothèque en vaille la peine.". Tout d'abord, ce n'est pas vrai. Deuxièmement, la bibliothèque jQuery a été spécialement conçue à cet effet. En gardant la bibliothèque principale aussi petite que possible - environ 16 ko - les utilisateurs peuvent ensuite appliquer des plugins supplémentaires à leur propre discrétion. Aujourd'hui, je vais vous apprendre à construire votre premier plugin "Centre" à partir de zéro. Commençons!
Nous voulons créer un plug-in qui ajustera dynamiquement le style d'un élément spécifié afin de le maintenir à tout moment centré verticalement et horizontalement sur la page, même lorsque la fenêtre du navigateur est redimensionnée. Très peu de choses sont nécessaires à l’avance. Vous devez seulement vous assurer que vous avez téléchargé la bibliothèque jQuery..
La première étape lors de la création d'un plugin consiste à ajouter un fichier Javascript vierge. Les conventions de dénomination stipulent que le fichier doit être nommé "YourPluginName.jQuery.js". Une fois que vous avez créé ce fichier, assurez-vous de créer une référence dans le document..
Ensuite, collez le code suivant.
Accentsconagua
(fonction ($) $ .fn.center = fonction () var élément = ceci; $ (élément) .load (fonction () changeCss (); $ (fenêtre) .bind ("redimensionner", fonction () changeCss ();); fonction changeCss () var imageHeight = $ (élément) .height (); var imageWidth = $ (élément) .width (); var windowWidth = $ (fenêtre) .width (); var windowHeight = $ (window) .height (); $ (element) .css ("position": "absolute", "left": windowWidth / 2 - imageWidth / 2, "top": windowHeight / 2 - imageHeight / 2 );;);;) (jQuery); Je vais beaucoup plus en détail dans la vidéo, cependant, j'aimerais quand même revenir sur quelques points clés. Chaque fois que vous créez un plugin, il doit être enveloppé avec:
$ .fn.center = function () ;
"Centre" devrait être remplacé par le nom de votre plugin. Cela permet à jQuery de savoir que vous étendez ses méthodes. Maintenant, bien que cela ne fasse absolument rien, nous pouvons appeler notre méthode center avec:
$ (function () $ ("# someElement"). center ();); Vous devez comprendre comment centrer manuellement une image sur une page avant de créer le plug-in. Tout d'abord, votre élément doit être positionné absolument. Sinon, cela ne bougera évidemment pas lorsque nous modifierons les valeurs "gauche" et "haut". Ensuite, l'image doit être décalée de 50% de la largeur du navigateur vers la gauche. Enfin, pour compenser la largeur de l’image, il faut soustraire une moitié de la largeur de l’image..
fonction changeCss () var imageHeight = $ (element) .height (); var imageWidth = $ (element) .width (); var windowWidth = $ (fenêtre) .width (); var windowHeight = $ (window) .height (); $ (element) .css ("position": "absolu", "gauche": windowWidth / 2 - imageWidth / 2, "top": windowHeight / 2 - imageHeight / 2); ; Cela placera parfaitement le centre de l'image au centre de la page. C'est un peu difficile à expliquer avec un texte. Assurez-vous de regarder la vidéo pour une explication plus complète.
En continuant, nous devons créer un écouteur lorsque la fenêtre du navigateur est redimensionnée.
$ (window) .bind ("redimensionner", function () changeCss ();); "ChangeCss ()" est une fonction qui ajuste les valeurs de gauche et du haut de notre image. En l'appelant à nouveau lorsque la fenêtre est redimensionnée, jQuery recalculera ces valeurs.
Si vous avez des questions, n'hésitez pas à laisser un commentaire et je veillerai à ce que je réponde. Comme toujours, cela pourrait ne pas être "prêt du monde réel". Que se passe-t-il si le Javascript est désactivé? Et bien sûr, il y a quelques façons de faire cela en utilisant du CSS pur - mais je m'éloigne du sujet.
Ça devrait le faire! Le screencast sera également consultable sur ITUNES dans les vingt-quatre prochaines heures..
