Plugins maken in jQuery

Geschreven door: op vrijdag 29 juni 2018

Leestijd: 4 minuten

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


Andere blogartikelen

  • Herschrijf regels binnen IIS: Introductie

    Geschreven door: op maandag 28 juni 2021

    Herschrijf regels binnen IIS: IntroductieIIS herschrijf regels zijn een krachtige tool om URls te herschrijven zodat deze bijvoorbeeld beter bruikbaar en begrijpelijker zijn voor de gebruikers. Door ...

    Bekijk het artikel »
  • Voorwaardelijke URL Rewrites

    Geschreven door: op donderdag 24 juni 2021

    In IIS kan je met behulp van rewrites de aanvragen naar je site omleiden of aanpassen. Deze rewrites wil je vaak niet altijd toepassen, maar voorwaardelijk. Hiervoor kan je condities gebruiken. Bij he ...

    Bekijk het artikel »
  • Debuggen met breakpoints in Visual Studio

    Geschreven door: op maandag 21 juni 2021

    Het ontwikkelen van applicaties bestaat voor een groot gedeelte uit het oplossen van problemen en het vinden en verhelpen van vreemde bugs. Er zijn hier veel hulpmiddelen en strategieën voor. Je kan f ...

    Bekijk het artikel »
Bel 072 5345 888
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator:
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book »

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book ›