== Einführung ==Dies ist die Fortsetzung zum ersten Teil http://www.easy-coding.de/wiki/html-ajax-und-co/jquery-eigenes-plugin-part-1-grundlagen.html, in dem die Grundlagen erklärt wurden. In diesem Teil erkläre ich, wie man erweiterte Parameter hinzufügt.
== Vorbereitung ==Nehmen wir unsere Beispieldateien, vom vorherigen Teil.
plugin_first.js
Alles anzeigen
HTML:
Alles anzeigen
== Beginn ==Nun fangen wir an. Zuerst wenden wir uns unserer JS-Datei zu. Um mehrere Parameter und vorallem default-Parameter setzen zu können übergeben wir keine einzelnen Variablen, sondern gleich ein ganzes Objekt, was wir so machen, wenn unser Objekt 'paras' heißt:
Alles anzeigen
== Default-Parameter ==Momentan haben wir ein Objekt mit den Paramtern, die übergeben werden. Jetzt können wir auch noch Default-Paramter setzen, indem wir ein Objekt erstellen, das die Default-Parameter enthält und dieses anschließend mit unserem ersten Objekt zusammenführen:
Alles anzeigen
== PlugIn nutzen ==Da wir nun unser Plugin fertig haben, können wir es ausprobieren. Da es nun über Default-Werte verfügt gibt es verschiedenste Möglichkeiten:
== Vorbereitung ==Nehmen wir unsere Beispieldateien, vom vorherigen Teil.
plugin_first.js
Quellcode
HTML:
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>
== Beginn ==Nun fangen wir an. Zuerst wenden wir uns unserer JS-Datei zu. Um mehrere Parameter und vorallem default-Parameter setzen zu können übergeben wir keine einzelnen Variablen, sondern gleich ein ganzes Objekt, was wir so machen, wenn unser Objekt 'paras' heißt:
Quellcode
== Default-Parameter ==Momentan haben wir ein Objekt mit den Paramtern, die übergeben werden. Jetzt können wir auch noch Default-Paramter setzen, indem wir ein Objekt erstellen, das die Default-Parameter enthält und dieses anschließend mit unserem ersten Objekt zusammenführen:
Quellcode
- $.fn.extend({
- pluginOwn: function(paras)
- {
- var defaults = {
- speed: 1500, //Diese Default-Werte werden
- art: top; //später zu unserem 'paras'-Objekt hinzugefügt,
- movement: '500'; //wenn 'paras' diese Eigenschaften noch nicht hat
- };
- var paras = $.extend(defaults, paras); //Zusammenführung der beiden Objekte
- return this.each(function()
- {
- $(this).animate({paras.art: '+='+paras.movement+}, paras.speed); //Normaler Zugriff auf die Eigenschaften eines Objekts
- });
- }
- });
== PlugIn nutzen ==Da wir nun unser Plugin fertig haben, können wir es ausprobieren. Da es nun über Default-Werte verfügt gibt es verschiedenste Möglichkeiten:
7.562 mal gelesen