JQuery liburutegiaren gainean plugin-ak eratzeko balio duten txantiloi ugari aurki daiteke interneten zehar. Ala ere, guztietan arazo berdinarekin aurkitu nahiz: pluginek aldagaien instantzia bakarra onartzen dute, hots, plugin instantzia guztiek aldagai global berberak erabili behar dituzte.
Hori ekiditeko hona hemen instantzietan aldagai propioak eraikiz plugin bat sortzeko balio duen txantiloila:
Lehenik eta behin, JavaScript klase arrunta sortu beharra da:
function JQueryClass(_options) {
this.options = _options;
};
JQueryClass.prototype.getValue = function() {
return this.options.value;
}; |
function JQueryClass(_options) {
this.options = _options;
};
JQueryClass.prototype.getValue = function() {
return this.options.value;
};
Ondoren klase horren instantziak sortuko dituen JQuery plugin-a eraiki:
(function($) {
var defaultOptions = {
value:0
},
instance_key = 'jqueryclass_key';
$.fn.jqueryclass = function(_options) {
var instance = this.data(instance_key);
if(instance == undefined) {
instance = new JQueryClass($.extend({}, defaultOptions, _options));
this.data(instance_key, instance);
}
return instance;
};
})(jQuery); |
(function($) {
var defaultOptions = {
value:0
},
instance_key = 'jqueryclass_key';
$.fn.jqueryclass = function(_options) {
var instance = this.data(instance_key);
if(instance == undefined) {
instance = new JQueryClass($.extend({}, defaultOptions, _options));
this.data(instance_key, instance);
}
return instance;
};
})(jQuery);
Eraikitako plugin-a testeatzeko honako kodea erabili daiteke. Emaitza bezala plugin instantzia bakoitzak bere “value” balio propioa pantailaratuko du. Kontuan izan kode hau ez dagoela guztiz osatua (ikus azpko index.html esteka test kode osoa ikusteko).
$(document).ready(function()
{
$('#container_default').jqueryclass({
});
$('#container_1').jqueryclass({
value:1
});
$('#container_2').jqueryclass({
value:2
});
alert("jqueryclass instance 0 value: " + $('#container_default').jqueryclass().getValue());
alert("jqueryclass instance 1 value: " + $('#container_1').jqueryclass().getValue());
alert("jqueryclass instance 2 value: " + $('#container_2').jqueryclass().getValue());
}); |
$(document).ready(function()
{
$('#container_default').jqueryclass({
});
$('#container_1').jqueryclass({
value:1
});
$('#container_2').jqueryclass({
value:2
});
alert("jqueryclass instance 0 value: " + $('#container_default').jqueryclass().getValue());
alert("jqueryclass instance 1 value: " + $('#container_1').jqueryclass().getValue());
alert("jqueryclass instance 2 value: " + $('#container_2').jqueryclass().getValue());
});
Erabilitako kode osoa eta testerako index fitxategia honako esteketan lor daitezke:
index.html (Test Fitxategia)
jqueryclass.js (JQuery plugin-aren txantiloila)
