U kunt nog steeds geen jQuery-plug-in maken?

Het is zwaar. Je leest tutorial na tutorial, maar ze gaan er allemaal vanuit dat je meer weet dan je eigenlijk doet. Tegen de tijd dat je klaar bent, voel je je meer in de war dan je aanvankelijk was. Waarom creëerde hij een leeg object? Wat betekent het als u "opties" als parameter doorgeeft? Wat doen "defaultsettings" eigenlijk??

Nooit bang zijn; Ik ga u precies laten zien hoe u uw eigen "tooltip" -plug-in bouwt, op verzoek van een van onze trouwe lezers.




Waarom zou ik een plug-in maken in de eerste plaats??

Het kan helpen om plugins op dezelfde manier te bedenken als functies. Heb je ooit ondervonden dat je dezelfde procedures herhaalde
voor site na site? Misschien hebt u uw eigen tabsysteem gemaakt dat u graag gebruikt. In plaats van dezelfde codetijd en te schrijven
opnieuw, zou het niet eenvoudiger zijn als we uw lange codeblok in één regel zouden kunnen veranderen? Dat is in wezen wat een plug-in voor ons doet.
Het maakt hergebruik mogelijk, wat van het grootste belang is - als u uw uurloon hoog wilt houden!

Stap 1: De markup

Maak een nieuw project in uw favoriete codebewerker en plak de volgende html in.

      Je kunt nog steeds geen jQuery-plug-in maken?   

Het punt van het gebruik van Lorem Ipsum is dat het een min of meer normale verdeling van letters heeft, in tegenstelling tot het gebruik van 'Inhoud hier, inhoud hier', waardoor het lijkt op leesbaar Engels. Veel desktop publishing-pakketten en webpagina-editors gebruiken Lorem Ipsum nu als hun standaard modeltekst en een zoekopdracht naar 'lorem ipsum' zal vele websites ontdekken die nog in de kinderschoenen staan. Verschillende versies zijn in de loop der jaren geëvolueerd, soms per ongeluk, soms expres (geïnjecteerde humor en dergelijke).

Uitleg

Deze code is vrij eenvoudig; dus het vereist niet al te veel overzicht.

  • Referentie een CSS-bestand dat we binnenkort zullen maken. Dit zal ons in staat stellen onze tooltip te stylen.
  • Voeg een algemene tekst toe met enkele ankertags. Merk op dat sommige van hen een klasse van "tooltip" bevatten.
    Dit is belangrijk!
  • Importeer jQuery van het CDN van Google.
  • Bel onze tooltip met jQuery. Maak je daar nog geen zorgen over. Ik zal het binnenkort uitleggen.

Stap 2: De plug-in bellen

Ik vind meestal dat het eenvoudiger is om mijn plug-in te bouwen als ik eerst bepaal hoe ik het ga noemen. Beschouw de volgende code.

 

Ik heb besloten dat ik de naam van mijn plug-in gewoon "tooltip" wil noemen. Ik heb ook vastgesteld dat ik er een paar wil doorgeven
parameters om mijn tooltip enigszins aan te passen. Dit is echter alleen voor de gebruiker optioneel. Indien gewenst, kan hij of zij gewoon typen:

 

In dit geval is de standaard opties worden gebruikt.

Stap 3: De plug-in bouwen

Dus nu we weten hoe de plug-in wordt genoemd, laten we doorgaan en het bouwen! Maak een nieuw bestand in uw project en noem het "jQuery.tooltip.js". Er zijn bepaalde naamgevingsconventies bij het maken van een plug-in die mogelijk door anderen kan worden gebruikt. We beginnen met het schrijven van 'jQuery', gevolgd door de naam van onze plug-in. Ik weet echter zeker dat je je realiseert dat duizenden mensen hun eigen tooltip-plug-in hebben gemaakt. U zou kunnen vaststellen dat het noodzakelijk is om een ​​"tooltip" vooraf te gaan met een unieke reeks; misschien je initialen. Hoe dan ook, het maakt niet zoveel uit. U bent vrij om uw plugin een naam te geven zoals u dat wilt.

JQuery doorgeven als een parameter

 (functie ($) ... code) (jQuery);

We moeten er eerst voor zorgen dat het "$" -symbool ons niet in de problemen brengt. Wat als we ook andere Javascript-bibliotheken in onze applicatie zouden gebruiken? Heb je daar ooit over nagedacht? In dergelijke gevallen zouden we elke "$" in ons document moeten veranderen in "jQuery". Het enige probleem is dat dit een nogal slordige oplossing is. Laten we in plaats daarvan een zelfoproepende anonieme functie maken en '$' als een alias doorgeven. Op die manier kunnen we '$' net zoveel gebruiken als we willen zonder ons zorgen te maken over eventuele conflicten.

De plug-in een naam geven

 $ .fn.tooltip = functie (opties) 

Binnen onze wrap moeten we onze nieuwe plugin declareren en gelijk maken aan de volgende functie. We kunnen deze taak volbrengen door jQuery.fn (afkorting van prototype) in te voeren.de naam van onze plug-in.

Weet je nog toen ik opperde dat de gebruiker kleine aanpassingen in de tooltip moest kunnen maken? Die wijzigingen worden opgeslagen onder de parameter "options".

De standaardwaarden instellen

 var defaults = background: '# e3e3e3', color: 'black', rounded: false,

Het is waarschijnlijk dat de gebruiker geen opties opgeeft. Dus we zullen onze eigen "standaard" -opties instellen. Omdat dit een tutorial voor beginners is, zullen we hier niet te veel doen. Meestal laat dit zien wat mogelijk is. We laten de gebruiker een achtergrondkleur, kleur kiezen en of de knopinfo is afgerond.

Later in onze code, wanneer we toegang willen tot deze waarden, kunnen we gewoon typen: defaults.rounded.

De standaardwaarden samenvoegen met de opties

Dus hoe kunnen we bepalen of de gebruiker zijn of haar eigen opties toevoegt? Het antwoord is dat we 'defaults' moeten samenvoegen met 'options'.

 instellingen = $ .uitbreiding (, standaardinstellingen, opties);

We hebben een nieuwe variabele gemaakt, "instellingen" genaamd, en hebben jQuery verteld om 'standaardwaarden' en 'opties' samen te voegen en de resultaten in een nieuw object te plaatsen. Bij het samenvoegen heeft de gebruiker die 'opties' heeft gekozen voorrang op de standaardwaarden.
U vraagt ​​zich misschien af ​​waarom ik vóór de instellingen geen "var" heb toegevoegd. Technisch gezien is dit niet verplicht, hoewel het als de beste methode wordt beschouwd. Als u een beetje omhoog schuift, ziet u dat na ons standaardobject een komma is toegevoegd. Wanneer we dat doen, kunnen we doorgaan met het maken van meer variabelen zonder dat we elke keer 'var' nodig hebben. Bijvoorbeeld…

 var joe = ; var is = ; var good = ;

kan worden…

 var joe = , is = , goed = ;

Voor elke ...

 this.each (function () var $ this = $ (this); var title = this.title;

Het is belangrijk om te onthouden dat de ingepakte set die de gebruiker doorgeeft aan deze plug-in veel elementen kan bevatten - niet slechts één. We moeten ervoor zorgen dat we een voor elke instructie gebruiken - of de "elke" methode van jQuery - om door de code te bladeren.

We beginnen onze nieuwe functie door $ (dit) te cachen. Het zal ons niet alleen een paar karakters besparen, maar het zal ook de dingen versnellen, zelfs al is het maar een beetje. Het is niet verplicht, maar wordt als een goede gewoonte beschouwd. Veel mensen vragen: "Waarom voeg je het dollarteken toe voor je variabele?". We doen dit om onszelf eraan te herinneren dat we met het jQuery-object werken. Door dat te doen, herinner ik me dat ik dingen kan noemen als: $ this.click () ;. Vervolgens bewaar ik de waarde van het titelkenmerk in een variabele genaamd "titel". Je zult zien waarom we dit in een moment moeten doen.

Foutcontrole

 if ($ this.is ('a') && $ this.attr ('title')! = ") this.title ="; $ This.hover (function (e) 

Het is gemakkelijk om te vergeten waar dit naar verwijst. Wanneer u het vergeet, gaat u gewoon terug naar de manier waarop u de "tooltip" -methode aanroept.

 $ ( 'A.tooltip') tooltip (.);

We kunnen hier zien dat $ dit verwijst naar elke ankertag die een klasse van "tooltip" heeft.

Terug naar de code; als het element in de omwikkelde set in feite een ankertag is EN het bijbehorende kenmerk 'title' niet leeg is, voer dan een code uit. Dit is nogal vanzelfsprekend. Ik wil geen reeks code uitvoeren als de gebruiker per ongeluk een afbeelding doorgeeft. Bovendien wil ik mijn tooltip-kader niet maken als er niets te tonen is!

In mijn "als" -instructie stel ik het "title" -attribuut van de ankertag in op niks. Hiermee wordt voorkomen dat de standaardinfo van de browser wordt geladen. Vervolgens voeg ik een gebeurtenislistener toe voor wanneer $ this, of de ankertag, over zweeft. Wanneer dit het geval is, maken we een nieuwe functie en geven we het gebeurtenisobject door als een parameter. Maak je daar nu geen zorgen over, ik zal het later uitleggen.

Onze tooltip maken

 var title = $ this.attr ('title'); $ ('
') .appendTo (' body ') .hide () .text (title) .css (backgroundColor: settings.background, color: settings.color, top: e.pageY + 10, left: e.pageX + 20 ) .fadeIn (350);

Ik heb een variabele gemaakt met de naam 'titel' en deze gelijk gemaakt aan de waarde die het attribuut 'titel' van het ankertag bevat. Dit is echt niet nodig - maar het helpt me.

Wanneer we html-tags aan onze jQuery-instructie toevoegen, kunnen we eigenlijk een nieuw element maken in plaats van er een op te halen. We maken een nieuwe div-tag met een id van 'tooltip'. Vervolgens zullen we de prachtige mogelijkheden van jQuery gebruiken om met gemak een aantal procedures uit te voeren.

  • .appendTo ( 'body') : Neem het element dat we zojuist hebben gemaakt en voeg het toe aan het body-element, net voor de afsluitende 'body'-tag.
  • .verbergen() : Ik wil dat onze tooltip verdwijnt. Om dit effect te bereiken, moet het eerst zijn weergave op nul hebben.
  • .tekst (titel) : We hebben onze div-tag gemaakt; maar het is nog steeds leeg. Laten we wat tekst toevoegen. We specificeren dat wat er ook in het titelattribuut staat, in deze div moet worden geplaatst.
  • .css (...) : We plaatsen de achtergrondkleur, kleur, bovenste en linker posities van onze tooltip met CSS. Weet je nog dat we de standaardinstellingen samen met de door de gebruiker geselecteerde opties samenvoegden tot een nieuw 'instellingen'-object? Dat komt nu in het spel. De achtergrondkleur is gelijk aan 'settings.background'; kleur is 'settings.color'. Ten slotte moeten we aangeven waar op de pagina de knopinfo moet verschijnen. We kunnen het gebeurtenisobject gebruiken. Het bevat twee eigenschappen met de naam 'pageY' en 'pageX'. Deze bevatten de waarden van de exacte coördinaten van waar het anker zweefde. Om een ​​beetje opvulling toe te voegen, voegen we respectievelijk 10px en 20px toe.
  • .fadeIn (350) : In de loop van ongeveer een derde van een seconde zal onze tooltip vervagen.
 if (defaults.rounded) $ ('# tooltip'). addClass ('afgerond'); 

Onze 'afgeronde' optie is standaard ingesteld op 'false'. Als 'defaults.rounded' echter true retourneert (wat betekent dat de gebruiker deze parameter heeft toegevoegd), moeten we een klasse van 'afgerond' toevoegen aan ons CSS-bestand. We zullen dat bestand binnenkort maken.

Muis uit

 , function () // mouse out $ ('# tooltip'). hide (); );

"Hover" accepteert twee functies: muis over en muis uit. We hebben de juiste code toegevoegd voor wanneer de gebruiker de geselecteerde ankertag overziet. Maar we moeten ook een code schrijven die de tooltip verwijdert zodra de muis de ankertag heeft verlaten.

Muis verplaatsen

Het zou leuk zijn om de tooltip box te dwingen om te verschuiven als onze muis beweegt. Laten we dat snel implementeren.

 $ this.mousemove (functie (e) $ ('# tooltip'). css (top: e.pageY + 10, links: e.pageX + 20););

Wanneer de muis over de ankertag beweegt, maakt u een functie en geeft u het gebeurtenisobject opnieuw door als een parameter. Zoek het 'tooltip' element en pas de CSS aan. Je moet je realiseren dat dit de exacte code is zoals we eerder schreven. We resetten deze waarden eenvoudigweg voor de nieuwe. Handig, eh?

Sta toe voor Chaning

We moeten de gebruiker toestaan ​​door te gaan met ketenen nadat hij "tooltip" heeft genoemd. Bijvoorbeeld:

 $ ('a.tooltip'). tooltip (). css (...) .remove ();

Om deze ketening mogelijk te maken, moeten we 'dit' teruggeven. Voeg vlak voor uw sluitende accolade toe: "retourneer dit";.

Plugin voltooid!

U hebt zojuist een volledig werkende plug-in gemaakt. Het is niet te geavanceerd, maar het gaf ons de mogelijkheid enkele belangrijke functies te bekijken. Hier is de definitieve code.

Laatste jQuery

 (functie ($) $ .fn.tooltip = functie (opties) var standaard = background: '# e3e3e3', kleur: 'zwart', afgerond: false, instellingen = $ .extend (, standaardinstellingen, opties); this.each (function () var $ this = $ (this); var title = this.title; if ($ this.is ('a') && $ this.attr ('title')! = ") this.title ="; $ this.hover (functie (e) // mouse over $ ('
') .appendTo (' body ') .text (title) .hide (). css (backgroundColor: settings.background, color: settings.color, top: e.pageY + 10, left: e.pageX + 20 ) .fadeIn (350); if (settings.rounded) $ ('# tooltip'). addClass ('afgerond'); , function () // mouse out $ ('# tooltip'). remove (); ); $ this.mousemove (functie (e) $ ('# tooltip'). css (top: e.pageY + 10, links: e.pageX + 20);); ); // geeft het jQuery-object als resultaat om de koppeling mogelijk te maken. geef dit terug; ) (jQuery);

Stap 4: CSS

De laatste stap is om een ​​beetje CSS toe te voegen om onze tooltip mooier te maken. Maak een nieuw CSS-bestand met de naam 'default.css' en plak het volgende in.

 #tooltip background: # e3e3e3 url (... /images/search.png) no-repeat 5px 50%; rand: 1px vast #BFBFBF; zweven: links; lettergrootte: 12px; maximale breedte: 160 px; opvulling: 1em 1em 1em 3em; positie: absoluut;  .rond -moz-border-radius: 3px; -webkit-border-radius: 3px; 

Niets is te ingewikkeld hier. Ik verwijs naar een achtergrondafbeelding die het standaard 'zoek'-vergrootglas bevat. U bent van harte welkom om de broncode te downloaden om deze te gebruiken. Daarnaast heb ik een beetje opvulling, een maximale breedte en een lettergrootte toegevoegd. Het meeste komt neer op voorkeur. Je bent vrij om het te bewerken zoals je wilt.

De enige vitale eigenschap is "positie: absoluut;". Eerder hebben we de "top" - en "left" -waarden ingesteld met jQuery. Om die positionering effect te laten hebben, moeten we de positie op absoluut zetten! Dit is belangrijk. Als u dit niet doet, zal het niet werken.

Bedankt voor het lezen

Aan iedereen die mij een e-mail heeft gestuurd met het verzoek om deze tutorial, ik hoop dat het op de een of andere manier geholpen is. Als ik mezelf niet goed genoeg heb uitgelegd, moet je de bijbehorende screencast bekijken en / of een opmerking plaatsen. Ik zal proberen je naar mijn beste vermogen te helpen. Tot de volgende keer…

Klaar voor niveau 2?

Als u een goed begrip hebt van de technieken die in deze zelfstudie worden gepresenteerd, bent u klaar om verder te gaan! Overweeg je in te schrijven voor een Net Plus-lidmaatschap om een ​​geavanceerde zelfstudie van Dan Wellman te bekijken die je leert hoe je een meer gecompliceerde jQuery-plug-in kunt bouwen. Het komt ook met een bijbehorende screencast. Meld u nu aan!

  • Abonneer u op de NETTUTS RSS-feed voor meer dagelijkse webontwikkelingen, tuts en artikelen.