Share
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.
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!
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).
Deze code is vrij eenvoudig; dus het vereist niet al te veel overzicht.
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.
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.
(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.
$ .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".
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.
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 = ;
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.
Accentsconagua
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.
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.
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.
, 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.
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?
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";.
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.
(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); 
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.
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…
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!
