Plugins maken in jQuery
Door zelf code die je vaak gebruikt om te zetten naar jQuery-plugins, zorg je ervoor dat je deze code eenvoudig kan toepassen in andere projecten en je je kan bezighouden met het maken van nieuwe functionaliteiten en oplossingen.
Om een groot aantal pagina’s (30.000+) te kunnen blijven beheren terwijl de website optimaal blijft functioneren, hebben wij onlangs het documentbeheer van ons Accessify WCMS aangepast, zodat we naar deze pagina’s kunnen blijven verwijzen, zonder dat ook de browser in één keer te maken krijgt met tienduizenden objecten die in een keer verwerkt moeten worden en de browser laten crashen.
We hebben dit kunnen versnellen door de pagina’s in dropdowns asynchroon en gepagineerd op te halen, wat betekent dat ze niet in één keer verwerkt worden, maar alleen een subselectie van de aanwezige documenten. We hebben hiervoor een plugin gemaakt in jQuery waarin alle logica zit waarmee we deze functionaliteit realiseren. Eénmaal gemaakt, kon deze functionaliteit worden toegepast op verschillende plekken, vrijwel zonder extra aanpassingen – dat is de kracht van plugins in jQuery.
Ik zal hieronder een korte uitleg geven over hoe je plugins maakt in jQuery. Niet op basis van de asynchrone plugin die wij hebben gemaakt voor Accessify WCMS, maar een eenvoudiger voorbeeld.
Een plugin bevat enkele eigenschappen en handelingen:
- Je geeft aan op welke elementen deze van toepassing is.
- Je geeft eventueel opties aan.
- Er is een code die wordt uitgevoerd voor elk van de geselecteerde elementen.
Als voorbeeld maken we een plugin waarmee je de titel van een pagina waarnaar een linkje verwijst dynamisch als title-attribuut toepast op het linkje wanneer je er met je muis overheen gaat. Iets wat in de praktijk niet veel zal voorkomen, maar een leuke use case.
Op mijn lokale webserver heb ik twee HTML-pagina’s en ze linken naar elkaar (in verband met CROS link ik naar pagina’s op dezelfde server):
<body>
<p>Een voorbeeld van <a href="http://localhost/pagina1.html" class="een">een linkje naar een website</a>.</p>
<p>Een voorbeeld van <a href="http://localhost/pagina2.html" class="twee">een linkje naar een website</a>.</p>
Eerst definiëren we een plugin via de fn functie van jQuery:
$.fn.TitleOnHoverApplier = function(options){
return this;
}
We kunnen deze plugin op één element toepassen, maar we willen het op meerdere kunnen toepassen, dus zorgen we ervoor dat we door alle elementen gedefinieerd door de selector loopen:
$.fn.TitleOnHoverApplier = function(options){
return this.each(function(){
});
};
In principe zeggen we alleen dat bij een hover of mouseover een bepaalde functie moet worden uitgevoerd. In deze functie halen we de pagina op waarnaar verwezen wordt, zetten deze in een tijdelijk jQuery-object, halen het title-element op en gebruiken dat voor de title-attribuut van de betreffende link:
$.fn.TitleOnHoverApplier = function(options){
var settings = $.extend({maxLength: 1000}, options);
var anchorOnHover = function(){
var $this = $(this);
$(this).unbind('mouseover', anchorOnHover);
var href = $this.attr('href');
$.get(href, function(data){
var content = $('<div></div>').html($(data));
var title = content.find('title').text().substring(0, settings.maxLength);
$this.attr('title', title);
});
};
return this.each(function(){
$(this).bind('mouseover', anchorOnHover);
});
};
We kunnen ook opties meegeven, zodat de maximale lengte niet 1000 is, maar iets wat we zelf beslissen:
$(function(){
$('a.een').TitleOnHoverApplier({maxLength: 10});
$('a.twee').TitleOnHoverApplier();
});
Je kunt je ook voorstellen dat de maximale lengte gebaseerd is op een data-attribuut van de link.
Deze plugin kan ik nu gebruiken in andere projecten en direct toepassen, zodat ik zo min mogelijk tijd kwijt ben aan het implementeren van bestaande oplossingen en tijd kan besteden aan het maken van nieuwe functionaliteiten.
Meer informatie: How to Create a Basic Plugin | jQuery Learning Center
