Share
Sie denken vielleicht: "Was ist die ganze Aufregung mit jQuery? Sie müssen eine Reihe von Plugins herunterladen, um die Bibliothek sogar lohnenswert zu machen." Erstens stimmt das nicht. Zweitens wurde die jQuery-Bibliothek speziell für diesen Zweck entwickelt. Indem die Kernbibliothek so klein wie möglich gehalten wird (ca. 16 KB), können Benutzer nach eigenem Ermessen weitere Plugins anwenden. Heute werde ich Ihnen zeigen, wie Sie Ihr erstes "Center" -Plugin von Grund auf erstellen. Lass uns anfangen!
Wir möchten ein Plugin erstellen, das den Stil eines bestimmten Elements dynamisch anpasst, um es stets vertikal und horizontal auf der Seite zentriert zu halten - selbst wenn die Größe des Browser-Fensters geändert wird. Vorne ist sehr wenig erforderlich. Sie müssen nur sicherstellen, dass Sie die jQuery-Bibliothek heruntergeladen haben.
Der erste Schritt beim Erstellen eines Plugins ist das Hinzufügen einer leeren Javascript-Datei. Namenskonventionen besagen, dass die Datei "YourPluginName.jQuery.js" heißen soll. Stellen Sie nach dem Erstellen dieser Datei sicher, dass Sie in Ihrem Dokument einen Verweis darauf erstellen.
Als nächstes fügen Sie den folgenden Code ein.
Accentsconagua
(function ($) $ .fn.center = function () var element = this; $ (element) .load (function () changeCss (); $ (window) .bind ("resize", function ()) changeCss ();); Funktion changeCss () var imageHeight = $ (Element) .height (); var imageWidth = $ (Element) .width (); var windowWidth = $ (window) .width (); var windowHeight = $ (window) .height (); $ (Element) .css ("position": "absolute", "left": windowWidth / 2 - imageWidth / 2, "top": windowHeight / 2 - imageHeight / 2 );;);;) (jQuery); Ich werde im Video viel detaillierter darauf eingehen, aber ich möchte noch ein paar wichtige Punkte besprechen. Jedes Mal, wenn Sie ein Plugin erstellen, muss es mit folgenden Elementen versehen werden:
$ .fn.center = function () ;
"Center" sollte durch den Namen des Plugins ersetzt werden. Dadurch wird jQuery informiert, dass Sie seine Methoden erweitern. Nun, obwohl es absolut nichts tut, können wir unsere Center-Methode aufrufen mit:
$ (function () $ ("# someElement"). center ();); Sie müssen wissen, wie Sie ein Bild auf einer Seite manuell zentrieren, bevor Sie das Plugin erstellen. Zunächst muss Ihr Element absolut positioniert sein. Ansonsten wird es offensichtlich nicht rühren, wenn wir die Werte für "left" und "top" ändern. Als Nächstes muss das Bild um 50% der Browserbreite nach links verschoben werden. Um die Breite des Bildes zu kompensieren, müssen wir die Hälfte des Bildes subtrahieren.
function changeCss () var imageHeight = $ (Element) .height (); var imageWidth = $ (Element) .width (); var windowWidth = $ (window) .width (); var windowHeight = $ (window) .height (); $ (Element) .css ("position": "absolute", "left": windowWidth / 2 - imageWidth / 2, "top": windowHeight / 2 - imageHeight / 2); ; Dadurch wird die Bildmitte perfekt in die Mitte der Seite gesetzt. Es ist ein bisschen schwer mit Text zu erklären. Schauen Sie sich das Video an, um eine genauere Erklärung zu erhalten.
Wenn Sie fortfahren, müssen Sie einen Listener für die Größenänderung des Browserfensters erstellen.
$ (window) .bind ("resize", function () changeCss ();); "ChangeCss ()" ist eine Funktion, die die linken und oberen Werte unseres Bildes einstellt. Wenn Sie es erneut aufrufen, wenn die Größe des Fensters geändert wird, berechnet jQuery diese Werte neu.
Wenn Sie Fragen haben, können Sie gerne einen Kommentar hinterlassen, und ich werde sicherstellen, dass ich antworte. Wie immer ist dies möglicherweise nicht "real world ready". Was passiert, wenn der Benutzer Javascript deaktiviert hat? Natürlich gibt es einige Möglichkeiten, dies mit reinem CSS zu tun - aber ich schweife ab.
Das sollte es tun! Der Screencast wird in den nächsten 24 Stunden auch auf ITUNES abrufbar sein.
