In „Eigenes jQuery-Plugin selbst schreiben“ habe ich gezeigt, wie man ganz einfach ein eigenes jQuery Plugin schreiben kann. Aus Speicherplatzgründen empfiehlt es sich aber Plugins, die mehrfach instanziiert werden, mit einem Prototypen anzulegen. Wie das funktioniert, soll folgender Code exemplarisch zeigen.
Das jQuery-Plugin „myWidget“ gibt im Sekundentakt die ID des Elements aus, auf dem es angewandt wurde. Im data-Attribut des Elements wird eine Instanz zum Plugin gehalten, über die das Plugin dann auch wieder gestoppt werden kann (mit der destroy-Methode).
Plugin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| function MyWidget(element, options) {
this.$element = $(element);
this.options = options;
this.init();
}
MyWidget.prototype.init = function() {
var self = this;
this.intervalID = window.setInterval(function() {
console.log(self.$element.attr('id'));
}, 1000);
this.$element.data('my-widget-instance', this);
};
MyWidget.prototype.destroy = function() {
window.clearInterval(this.intervalID);
};
$.fn.myWidget = function(options) {
return this.each(function() {
new MyWidget(this, options);
});
}; |
function MyWidget(element, options) {
this.$element = $(element);
this.options = options;
this.init();
}
MyWidget.prototype.init = function() {
var self = this;
this.intervalID = window.setInterval(function() {
console.log(self.$element.attr('id'));
}, 1000);
this.$element.data('my-widget-instance', this);
};
MyWidget.prototype.destroy = function() {
window.clearInterval(this.intervalID);
};
$.fn.myWidget = function(options) {
return this.each(function() {
new MyWidget(this, options);
});
};
Aufruf
var element = jQuery('#tilePreview').myWidget();
element.data('my-widget-instance').destroy(); |
var element = jQuery('#tilePreview').myWidget();
element.data('my-widget-instance').destroy();
