Share
Det er tøft. Du leser opplæringen etter opplæringen, men de antar at du vet mer enn du egentlig gjør. Når du er ferdig, er du igjen følelsen mer forvirret enn du i utgangspunktet var. Hvorfor opprettet han en tom gjenstand? Hva betyr det når du sender "alternativer" som en parameter? Hva gjør "defaultsettings" faktisk?
Aldri frykt; Jeg skal vise deg nøyaktig hvordan du bygger ditt eget "tooltip" -plugin, på forespørsel fra en av våre lojale lesere.
Det kan bidra til å tenke på plugins på samme måte som du vil fungere. Har du noen gang funnet deg selv å gjenta de samme prosedyrene
for nettsted etter nettsted? Kanskje du har laget ditt eget tabbingsystem som du liker å bruke. Snarere enn å skrive samme kode tid og
Tid igjen, ville det ikke vært enklere om vi kunne slå din lange kodeblokk i en linje? Det er egentlig hva et plugin gjør for oss.
Det gjør det mulig å gjenbrukes, noe som er viktigst - hvis du vil holde timelønnen høy!
Opprett et nytt prosjekt i din favorittkodeditor, og lim inn i følgende html.
Du kan fortsatt ikke opprette et jQuery-plugin? Poenget med å bruke Lorem Ipsum er at den har en mer eller mindre vanlig fordeling av bokstaver, i motsetning til bruk av innhold her, innhold her, slik at det ser ut som lesbar engelsk. Mange desktop publishing-pakker og websiden redaktører bruker nå Lorem Ipsum som standardmodelltekst, og et søk etter 'lorem ipsum' vil avdekke mange nettsteder fremdeles i sin barndom. Ulike versjoner har utviklet seg gjennom årene, noen ganger ved et uhell, noen ganger med vilje (injisert humor og lignende).
Denne koden er ganske enkel; så det krever ikke for mye oversikt.
Jeg finner vanligvis at det er lettere å bygge pluginet hvis jeg først bestemmer hvordan jeg skal ringe det. Vurder følgende kode.
Jeg har bestemt at jeg vil at navnet på pluginet mitt bare skal kalles "tooltip". Jeg har også bestemt meg for at jeg vil kunne passere noen få
parametere for å tilpasse mitt verktøytips litt. Dette vil bare være valgfritt for brukeren selv. Hvis det er foretrukket, kan han eller hun bare skrive:
I dette tilfellet er det misligholde alternativer vil bli brukt.
Så nå som vi vet hvordan pluginet blir kalt, la oss gå videre og bygge det! Opprett en ny fil i prosjektet ditt, og oppgi navnet "jQuery.tooltip.js". Det er visse navngivningskonvensjoner når du oppretter et plugin som potensielt kan brukes av andre. Vi begynner med å skrive 'jQuery', etterfulgt av navnet på pluginet vårt. Imidlertid er jeg sikker på at du innser at tusenvis av mennesker har opprettet sin egen plugin for verktøytips. Du kan bestemme at det er nødvendig å forord "tooltip" med en unik streng; kanskje dine initialer. Uansett spiller det ingen rolle for mye. Du er fri til å gi navnet ditt plugin, men du ønsker det.
(funksjon ($) ... kode) (jQuery);
Vi må først sørge for at symbolet "$" ikke gir oss noen problemer. Hva om vi også bruker andre Javascript-biblioteker i vår søknad? Har du noen gang tenkt på det? I slike tilfeller må vi endre "$" i dokumentet til "jQuery". Det eneste problemet er at dette er en ganske sløv løsning. I stedet la vi lage et selvtillit som anroper anonym funksjon, og passere "$" som et alias. På den måten er vi fri til å bruke "$" så mye som vi liker uten å måtte bekymre deg for konflikter.
$ .fn.tooltip = funksjon (alternativer)
I vår pakke må vi deklarere vårt nye plugin og gjøre det lik den følgende funksjonen. Vi kan utføre denne oppgaven ved å skrive jQuery.fn (kort for prototype).navnet på pluginet vårt.
Husk da jeg angav at brukeren skulle kunne gjøre små endringer i verktøytipset? Disse modifikasjonene lagres i parameteren "Options".
var standard = bakgrunn: '# e3e3e3', farge: 'svart', avrundet: false,
Det er sannsynlig at brukeren kanskje ikke angir noen alternativer. Så, vi bestemmer våre egne "standard" alternativer. Fordi dette er en veiledning for nybegynnere, vil vi ikke gjøre for mye her. For det meste viser dette hva som er mulig. Vi tillater brukeren å velge en bakgrunnsfarge, farge og om verktøylippen er avrundet eller ikke.
Senere i vår kode, når vi ønsker å få tilgang til disse verdiene, kan vi bare skrive: defaults.rounded.
Så hvordan kan vi avgjøre om brukeren legger til sine egne opsjoner? Svaret er at vi må slå sammen 'standard' med 'alternativer'.
innstillinger = $ .extend (, standardinnstillinger, alternativer);
Vi har opprettet en ny variabel som heter "innstillinger", og har fortalt at jQuery skal fusjonere "standard" og "alternativer", og plassere resultatene i en ny gjenstand. Ved sammenslåing vil de valgte brukerne ha forrang over standardverdiene.
Du lurer kanskje på hvorfor jeg ikke har lagt til "var" før innstillinger. Teknisk er det ikke nødvendig, selv om det regnes som best praksis. Hvis du skal rulle litt opp, ser du at etter at standardinnstillingene har blitt lagt til, la jeg til et komma. Når vi gjør det, kan vi fortsette å skape flere variabler uten behov for "var" hver gang. For eksempel…
var joe = ; var er = ; var bra = ;
kan bli…
var joe = , er = , bra = ;
this.each (function () var $ this = $ (dette); var title = this.title;
Det er viktig å huske på at det pakkede settet som brukeren passerer til dette pluginet, kan inneholde mange elementer - ikke bare en. Vi bør sørge for at vi bruker en for hver setning - eller jQuery's "hver" metode - å sykle gjennom koden.
Vi starter vår nye funksjon ved å cache $ (dette). Ikke bare vil det spare oss noen få tegn, men det vil også øke hastigheten, aldri så lett. Det er ikke nødvendig, men anses å være god praksis. Mange spør: "Hvorfor legger du dollarskiltet foran variabelen?". Vi gjør dette for å minne oss selv om at vi jobber med jQuery-objektet. Ved å gjøre det, husker jeg at jeg kan ringe ting som: $ this.click () ;. Deretter lagrer jeg verdien av tittelattributtet i en variabel kalt "tittel". Du vil se hvorfor vi må gjøre dette på et øyeblikk.
Accentsconagua
hvis ($ this.is ('a') && $ this.attr ('title')! = ") this.title ="; $ This.hover (funksjonen (e) Det er lett å glemme hva $ dette refererer til. Når du glemmer, bare gå tilbake til måten du ringer "tooltip" metoden.
$ ( 'A.tooltip') tooltip (.);
Vi kan se her at $ dette refererer til hver ankermerke som har en klasse av "verktøytips".
Tilbake til koden; hvis elementet i det pakkede settet egentlig er en ankermerke, og dets «tittel» -attributt ikke er tomt, så kjør noe kode. Dette er ganske selvforklarende. Jeg ønsker ikke å kjøre en haug med kode hvis brukeren ved et uhell passerer i et bilde. I tillegg vil jeg ikke lage min verktøykasse hvis det ikke er noe å vise!
Innenfor min "if" erklæring, setter jeg "tittel" -attributtet til ankermerket lik ingenting. Dette vil stoppe nettleserens standard verktøytips fra lasting. Deretter legger jeg til en hendelseslytter for når $ dette eller ankeretiketten er svevet over. Når det er, lager vi en ny funksjon og sender hendelsesobjektet som en parameter. Ikke bekymre deg for dette for nå, forklarer jeg senere.
var title = $ this.attr ('title'); $ ('') .appendTo (' body ') .hide () .text (title) .css (backgroundColor: settings.background, farge: settings.color, topp: e.pageY + 10, left: e.pageX + 20 ). fadeIn (350); Jeg har opprettet en variabel kalt "tittel" og gjort det lik den verdien som er angitt i ankermerkeens "tittel" attributt. Dette er ikke nødvendig egentlig - men det hjelper meg.
Når vi legger til html-koder i vår jQuery-setning, kan vi faktisk opprette et nytt element, i stedet for å hente en. Vi lager en ny div-tagg med et ID for "tooltip". Deretter bruker vi jQuery's fantastiske chaning evner til å utføre en rekke prosedyrer med letthet.
hvis (default.rounded) $ ('# tooltip'). addClass ('avrundet'); Som standard er alternativet 'avrundet' satt til 'false'. Men hvis 'standardinnstillinger.runde' returnerer sant (som betyr at brukeren har lagt til denne parameteren), må vi legge til en klasse av 'avrundet' til vår CSS-fil. Vi lager den filen snart.
, funksjon () // mus ut $ ('# tooltip'). skjul (); ); "Hover" aksepterer to funksjoner: musen over og musen ut. Vi har lagt til riktig kode for når brukeren musker over vår valgte ankermerke. Men vi må også skrive noen kode som fjerner verktøytipset når musen har forlatt ankermerket.
Det ville være fint å tvinge verktøytipsboksen til å skifte når musen beveger seg. La oss implementere det raskt.
$ this.mousemove (funksjon (e) $ ('# tooltip'). css (topp: e.pageY + 10, venstre: e.pageX + 20);); Når musen beveger seg over ankeretiketten, oppretter du en funksjon og sender en gang til hendelsesobjektet som en parameter. Finn elementet "verktøytips", og juster dets CSS. Du bør innse at det er den nøyaktige koden som vi tidligere skrev. Vi tilbakestiller enkelt disse verdiene til de nye. Nifty, eh?
Vi må tillate brukeren å fortsette å kutte etter at han har kalt "tooltip". For eksempel:
$ ('a.tooltip'). tooltip (). css (...) .remove (); For å tillate denne kjedingen må vi returnere "dette". Like før din lukkede krøllebøyle legger du til "returner dette;".
Du har nettopp opprettet en fullt fungerende plugin. Det er ikke for avansert, men det tillot oss å gjennomgå noen viktige funksjoner. Her er den endelige koden.
(funksjon ($) $ .fn.tooltip = funksjon (alternativer) var standard = bakgrunn: '# e3e3e3', farge: 'svart', avrundet: false, settings = $ .extend (, alternativer); this.each (function ) var $ this = $ (dette); var title = this.title; if ($ this.is ('a') && $ this.attr ('title')! = ") this.title ="; $ this.hover (funksjon (e) // mus over $ ('') .appendTo (' body ') .text (title) .hide () .css (backgroundColor: settings.background, farge: settings.color, topp: e.pageY + 10, venstre: e.pageX + 20 ). fadeIn (350); hvis (settings.rounded) $ ('# tooltip'). addClass ('avrundet'); , funksjon () // mus ut $ ('# tooltip'). fjern (); ); $ this.mousemove (funksjon (e) $ ('# tooltip'). css (topp: e.pageY + 10, venstre: e.pageX + 20);); ); // returnerer jQuery-objektet for å tillate kjetting. returnere dette; ) (jQuery); 
Det siste trinnet er å legge til litt av CSS for å prettify vårt verktøytips. Opprett en ny CSS-fil kalt 'default.css', og lim inn følgende i.
#tooltip bakgrunn: # e3e3e3 url (... /images/search.png) no-repeat 5px 50%; grense: 1px solid #BFBFBF; flyte: venstre; skriftstørrelse: 12px; maksimal bredde: 160px; polstring: 1em 1em 1em 3em; posisjon: absolutt; .rundet -moz-grense-radius: 3px; -webkit-grense-radius: 3px;
Ingenting er for komplisert her. Jeg refererer til et bakgrunnsbilde som inneholder det vanlige "søk" forstørrelsesglasset. Du er velkommen til å laste ned kildekoden for å bruke den. I tillegg har jeg lagt til litt polstring, maksimal bredde og en skriftstørrelse. Mesteparten av dette kommer ned til preferanse. Du kan redigere det uansett.
Den eneste vitale egenskapen er "posisjon: absolutt;". Tidligere setter vi "topp" og "venstre" verdier med jQuery. For at denne posisjoneringen skal tre i kraft, må vi sette stillingen til absolutt! Dette er viktig. Hvis du ikke gjør det, vil det ikke fungere.
Til alle de som har sendt meg spørre om denne opplæringen, håper jeg det er hjulpet på noen måte. Hvis jeg ikke forklarte meg godt nok, må du se den tilhørende skjermbildet, og / eller spør en kommentar. Jeg vil prøve å hjelpe deg til det beste jeg har. Til neste gang…
Hvis du har en solid forståelse av teknikkene som presenteres i denne opplæringen, er du klar til å gå videre! Overvei å registrere deg for et Net Plus-medlemskap for å se en avansert opplæringsoppgave, av Dan Wellman, som skal lære deg hvordan du bygger et mer komplisert jQuery-plugin. Det kommer også med en tilhørende screencast. Pass på å registrere deg nå!
