JQuery - Plugins: Unterschied zwischen den Versionen
Aus Wikizone
Steff (Diskussion | Beiträge) (Der Seiteninhalt wurde durch einen anderen Text ersetzt: „Siehe: JavaScript - Plugins“) |
|||
| Zeile 1: | Zeile 1: | ||
Siehe: [[JavaScript - Plugins]] | Siehe: [[JavaScript - Plugins]] | ||
| + | |||
| + | == Aufbau == | ||
| + | <pre> | ||
| + | //this is a jquery plugin, | ||
| + | //jquery plugins start this way | ||
| + | //so you could select $('img').imageCrop(); | ||
| + | $.fn.imageCrop = function(customOptions) { | ||
| + | //Iterate over each object | ||
| + | this.each(function() { | ||
| + | //keeps the current iterated object in a variable | ||
| + | //current image will be kept in this var untill the next loop | ||
| + | var currentObject = this, | ||
| + | //creates a new Image object | ||
| + | image = new Image(); | ||
| + | // And attach imageCrop when the object is loaded | ||
| + | //correct | ||
| + | image.onload = function() { | ||
| + | $.imageCrop(currentObject, customOptions); | ||
| + | }; | ||
| + | //sets the src to wait for the onload event up here ^ | ||
| + | image.src = currentObject.src; | ||
| + | }); | ||
| + | // Unless the plug-in is returning an intrinsic value, always have the | ||
| + | // function return the 'this' keyword to maintain chainability | ||
| + | return this; | ||
| + | }; | ||
| + | </pre> | ||
Aktuelle Version vom 19. März 2019, 15:36 Uhr
Siehe: JavaScript - Plugins
Aufbau[Bearbeiten]
//this is a jquery plugin,
//jquery plugins start this way
//so you could select $('img').imageCrop();
$.fn.imageCrop = function(customOptions) {
//Iterate over each object
this.each(function() {
//keeps the current iterated object in a variable
//current image will be kept in this var untill the next loop
var currentObject = this,
//creates a new Image object
image = new Image();
// And attach imageCrop when the object is loaded
//correct
image.onload = function() {
$.imageCrop(currentObject, customOptions);
};
//sets the src to wait for the onload event up here ^
image.src = currentObject.src;
});
// Unless the plug-in is returning an intrinsic value, always have the
// function return the 'this' keyword to maintain chainability
return this;
};