Wenn man täglich mit JQuery arbeitet, bietet es sich an direkt ein PluIn zu schreiben. Diese können dann in anderen Projekten problemlos wieder verwendet werden.
Datei anlegen
Um den Überblick über die Plugins zu bewaren, sollte jedes Plugin seine eigene Datei Javascript Datei bekommen. Die Datei sollte nach folgenden Schema aufgebaut sein:
|
1 |
jquery.PLUGINNAME.js |
Nachdem das Plugin fertig ist, kann und sollte man auch eine komprimierte version davon erstellen. Der Name der komprimierte version wird so gebildet:
|
1 |
jquery.PLUGINNAME.min.js |
Zum komprimieren des Javascript Codes bietet sich der Google Closure compiler an.
Das Grundgerüst
Nachdem Wir nun eine Leere Datei haben können wir beginnen. Ein jQuery Plugin bekommt immer ein sogenannten Rahmen, der wie folgt aussieht:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
(function($){ $.fn.myPlugIn= function(options, theCallBackTest) { // default options var defaults = { optionA: 'blublub', optionB: 'defaultwert' }; // merke options with defaults var options = $.extend(defaults, options); // callback var theCallBackTest = function( argA ){ } // the plugin return this.each(function(i){ var obj = $(this); theCallBackTest('element: '+i); }); }; })(jQuery); |
Aufruf des Plugins
|
1 2 3 4 5 6 7 8 9 |
$("img").myPlugIn({ optionA:'blablub', optionB:'Ein Text' }); function theCallBackTest(argA){ alert('call callback function: theCallBackTest()'); alert('argA: '+argA); } |