I widget HTML sono frammenti DOM o piccole porzioni di contenuto che possono essere aggiunti alla struttura di un elemento della pagina. Usare i widget ci permette di evitare di usare ripetutamente il wrapper $() o il metodo html() per creare nuovo contenuto con jQuery, concentrandoci invece sull'efficacia e l'automatizzazione del processo. Vediamo un esempio.
Creiamo il plugin Widget:
(function($) {
$.fn.Widget = function(options) {
var that = this;
var settings = {
element: '<div/>',
attributes: {},
content: ''
};
options = $.extend(settings, options);
return that.each(function() {
$(options.element, options.attributes).
html(options.content).
appendTo(that);
});
};
})(jQuery);
Il plugin sfrutta una caratteristica del wrapper jQuery: se il secondo parametro passato dopo l'elemento da creare è un oggetto letterale, le sue proprietà verranno usate per definire gli attributi e i metodi dell'elemento.
Per esempio, dato questo elemento HTML:
<div id="test"></div>
applicando il plugin in questo modo:
$(function() {
$('#test').Widget({
element: '<p/>',
attributes: {id: 'foo'},
content: 'Test'
});
});
avremo la seguente struttura modificata:
<div id="test">
<p id="foo">Test</p>
</div>