== Einführung ==Hallo. Hier erkläre ich kurz, wie man sein eigenes jQuery-Plugin erstellen und anschließend auch benutzen kann. Das Beispiel, das ich verwenden werde ist nicht sehr sinnvoll, da es nur zur Demonstration dient. Es wird erklärt, wie man ein ganz einfaches Plugin erstellt und anschließend noch, wie man dieses Plugin mit eigenen Parametern verseht. Ihr solltet grundlegendes Wissen von jQuery besitzen.
== Anfang ==Zu aller erst erstellen wir eine HTML-Seite mit dem Standardinhalt:
Alles anzeigen
Nun erstellen wir eine leere Javascript-Datei, speichern sie unter dem Namen "plugin_first" ab und binden sie ein. Natürlich dazu auch noch jQuery über Google. Nun fehlt uns noch eine Box, auf die wir unser Plugin verwenden. Dieser div geben wir die id "test_box", die Farbe rot, die Maße 100px * 100px und die Position absolute, da wir die Box später animieren werden. Der Code unserer HTML-Seite sollte nun in etwa so aussehen:
Alles anzeigen
== Plugin erstellen ==Gehen wir zuerst zu unserer plugin_first-Datei. Um ein eigenes Plugin zu erstellen, beginnen wir mit $.fn.extend. Dies gibt praktisch bescheid, dass wir ein eigenes Plugin schreiben.
plugin_first.js
Unsere eigene Funktion wird pluginOwn heißen. Um unser Plugin zu erstellen und zu benennen, machen wir folgendes:
Um zu erreichen, dass auf jedes Element, das später ausgewählt wird die Funktion ausgeführt wird, schreiben wir zu aller erst Folgendes in unser Plugin:
Alles anzeigen
== Funktion des Plugins ==Als Beispiel nutzen wir jetzt einfach die animate Funktion, es kann aber auch jede andere jQuery- oder Javascript-Funktion benutzt werden.
plugin_first.js
Alles anzeigen
Durch das $(this) wird das Element ausgewählt, das wir später mit der Funktion auswählen werden. Der eigentliche Effekt ist animate({top: '+=100px'}, 1000). Das Element wird um 100 Pixel nach unten verschoben, dies geschieht mit einer Verzögerung von einer Sekunde.
== Testen ==Nun wollen wir das Plugin testen. Dazu fügen wir nach unserem style-Teil auf der HTML-Seite folgendes ein:
Dies sollte sich von alleine erklären.Jetzt kann man die Datei im Browser öffnen und schaut da, die Box bewegt sich.
== Parameter übergeben ==Man sieht ja bei jeder Funktion, dass auch Parameter übergeben werden. Dazu gehen wir wieder zu unserer Javascript-Datei.
Alles anzeigen
Nach unsererm Namen schreiben wir in die Funktionsklammern, die jeweiligen Variablennamen, die wir mit der Funktion übergeben wollen. In unserem Fall um wie viele Pixel sich die Box nach rechts bewegt und wie lange sie dazu braucht. Anschließend werden diese Variablen in die Funktion eingesetzt.
Um dies jetzt zu testen, müssen wir unsere HTML-Datei auch noch anspassen. Wir schreiben dort in die Funktion, dass die Box sich um 250 Pixel verschieben soll und dafür 1250 Millisekunden brauch.
plugin_first.html
== Fertig ==Eure Dateien sollten nun so aussehen:
plugin_first.js
Alles anzeigen
HTML-Seite
Alles anzeigen
== Schlusswort: ==Hier gehts zum zweiten Teil: jQuery: Eigenes Plugin [Part 2: Erweiterte Paramter]
== Anfang ==Zu aller erst erstellen wir eine HTML-Seite mit dem Standardinhalt:
Quellcode
Nun erstellen wir eine leere Javascript-Datei, speichern sie unter dem Namen "plugin_first" ab und binden sie ein. Natürlich dazu auch noch jQuery über Google. Nun fehlt uns noch eine Box, auf die wir unser Plugin verwenden. Dieser div geben wir die id "test_box", die Farbe rot, die Maße 100px * 100px und die Position absolute, da wir die Box später animieren werden. Der Code unserer HTML-Seite sollte nun in etwa so aussehen:
Quellcode
- <!DOCTYPE html>
- <html>
- <head>
- <title>Eigenes Plugin</title>
- <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
- <script language="javascript" type="text/javascript" src="plugin_first.js"></script>
- <style type="text/css">
- <!--
- #test_box {
- width: 100px;
- height: 100px;
- background-color: red;
- position: absolute;
- }
- -->
- </style>
- </head>
- <body>
- <div id="test_box"></div>
- </body>
- </html>
== Plugin erstellen ==Gehen wir zuerst zu unserer plugin_first-Datei. Um ein eigenes Plugin zu erstellen, beginnen wir mit $.fn.extend. Dies gibt praktisch bescheid, dass wir ein eigenes Plugin schreiben.
plugin_first.js
Unsere eigene Funktion wird pluginOwn heißen. Um unser Plugin zu erstellen und zu benennen, machen wir folgendes:
Um zu erreichen, dass auf jedes Element, das später ausgewählt wird die Funktion ausgeführt wird, schreiben wir zu aller erst Folgendes in unser Plugin:
Quellcode
== Funktion des Plugins ==Als Beispiel nutzen wir jetzt einfach die animate Funktion, es kann aber auch jede andere jQuery- oder Javascript-Funktion benutzt werden.
plugin_first.js
Quellcode
Durch das $(this) wird das Element ausgewählt, das wir später mit der Funktion auswählen werden. Der eigentliche Effekt ist animate({top: '+=100px'}, 1000). Das Element wird um 100 Pixel nach unten verschoben, dies geschieht mit einer Verzögerung von einer Sekunde.
== Testen ==Nun wollen wir das Plugin testen. Dazu fügen wir nach unserem style-Teil auf der HTML-Seite folgendes ein:
Dies sollte sich von alleine erklären.Jetzt kann man die Datei im Browser öffnen und schaut da, die Box bewegt sich.
== Parameter übergeben ==Man sieht ja bei jeder Funktion, dass auch Parameter übergeben werden. Dazu gehen wir wieder zu unserer Javascript-Datei.
Quellcode
Nach unsererm Namen schreiben wir in die Funktionsklammern, die jeweiligen Variablennamen, die wir mit der Funktion übergeben wollen. In unserem Fall um wie viele Pixel sich die Box nach rechts bewegt und wie lange sie dazu braucht. Anschließend werden diese Variablen in die Funktion eingesetzt.
Um dies jetzt zu testen, müssen wir unsere HTML-Datei auch noch anspassen. Wir schreiben dort in die Funktion, dass die Box sich um 250 Pixel verschieben soll und dafür 1250 Millisekunden brauch.
plugin_first.html
== Fertig ==Eure Dateien sollten nun so aussehen:
plugin_first.js
Quellcode
HTML-Seite
Quellcode
- <!DOCTYPE html>
- <html>
- <head>
- <title>Eigenes Plugin</title>
- <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
- <script language="javascript" type="text/javascript" src="plugin_first.js"></script>
- <style type="text/css">
- <!--
- #test_box {
- width: 100px;
- height: 100px;
- background-color: red;
- position: absolute;
- }
- -->
- </style>
- <script language="javascript" type="text/javascript">
- $(document).ready(function()
- {
- $('#test_box').pluginOwn(250, 1250);
- });
- </script>
- </head>
- <body>
- <div id="test_box"></div>
- </body>
- </html>
== Schlusswort: ==Hier gehts zum zweiten Teil: jQuery: Eigenes Plugin [Part 2: Erweiterte Paramter]
8.407 mal gelesen