JQuery - Plugins: Unterschied zwischen den Versionen
Aus Wikizone
| (Eine dazwischenliegende Version von einem anderen Benutzer wird nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | + | 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> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | var | ||
| − | var | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | $ | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | </ | ||
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;
};