Share
Nettlesere vil automatisk vise et verktøytips når du oppgir en tittel Egenskap. Internet Explorer vil også bruke alt attributtet. Men i denne opplæringen skal jeg vise deg hvordan du raskt skriver et jQuery-plugin som erstatter den typiske nettleserverktøyet med noe litt flashiert.
Et av de gode verktøyene vi har i vår webutvikling goodie-bag er verktøytips. Et verktøytips er en boks
som vises når du svever markøren over et element som en hyperkobling. Det gir tillegg
informasjon om det elementet. For eksempel kan en lenke med liten eller ingen tekst (et ikon) bli forvirrende.
Gi en ekstra setning eller to i et verktøytips for å forklare for brukerne hva som vil skje hvis de klikker på det.
Denne opplæringen vil trolig passe inn i kategorien Intermediate. Instruksjonene antar at du har minst
en grunnleggende forståelse av HTML / CSS, skiving teknikker og jQuery.
Hvis du trenger en oppdatering på jQuery, er det noen få anbefalte nettsteder:
Bare så du har en klar ide om filene som er involvert i denne opplæringen, her er hva filstrukturen skal se
som når du er ferdig.
Her er en oversikt over hva hver fil / mappe er:
Åpne Photoshop, eller programvaren din, og pisk opp et fantastisk, lurt verktøytips. Snarere enn å designe
På en vanlig hvit bakgrunn kan det bidra til å lage verktøytipset ditt på en bakgrunn som ligner på nettstedet ditt.
På den måten vil det blandes sømløst. For det meste er det ingen riktig eller feil måte
for å fullføre dette trinnet. Bare bruk din fantasi og kreativitet.
For denne spesielle designen må du kutte verktøytipset inn i 3 forskjellige bilder. Dette bestemte designet vil kreve en PNG for å bevare gjennomsiktigheten.
1) toppstykket 2) En tynn 1 piksel skive som vil gjenta vertikalt i midten. 3) Bunnstykket. Den fjerde delen av diagrammet nedenfor viser de tre
biter etter at de ble kuttet ut.
Plasser disse bildefilene i en mappe som heter "bilder".
Merk: Internet Explorer liker ikke PNG-gjennomsiktighet. Selv IE 7 støtter bare det delvis. Hvis du animerer en
PNG med JavaScript, vil ethvert område med gjennomsiktighet svinge øyeblikkelig mens du er i bevegelse. Jeg bruker dette designet
Å vite godt, det vil få problemer i IE som er vanskelig å jobbe rundt.
Med bildene skåret, kan vi gå videre til HTML- og CSS-oppslaget. Dette vil være den enkleste delen av hele
opplæringen.
Denne HTML-opprettingen vil snart bli flyttet til en ekstern JavaScript-fil, så skriv bare inn dette i hva som helst
er mest praktisk og kan henvises til senere.
Det er tre div tags. To nestet inne i en forelder. Den første div, "tips" vil bli brukt til å holde alt sammen
og vise toppdelen av verktøytipset, tipTop.png.
"tipMid" vil til slutt holde teksten som verktøytipset vil vise. Det vil også ha tipMid.png gjenta vertikalt inne i den.
"tipBtm" er bare der for å vise nederste del av verktøytipset, tipBtm.png.
Inni index.html, legg til en haug med fylletekst og noen elementer med deres tittelattributter fylt ut. Som for eksempel:
Dette er en lenke
I hodet av index.html, du må koble til stilarket og de to JavaScript-filene.
CSS som brukes til dette verktøytipset er relativt enkelt, bare legg til følgende til style.css
.tips bredde: 212px; polstring: 37px; skjerm: ingen; posisjon: absolutt; bakgrunn: gjennomsiktig url (bilder / tipTop.png) no-repeat topp; .tipMid bakgrunn: gjennomsiktig url (bilder / tipMid.png) repeat-y; polstring: 0 25px 20px 25px; .tipBtm background: transparent url (images / tipBtm.png) no-repeat bunn; høyde: 32px;
La meg forklare det ovenfor.
Innpakningselementet, .tip, brukes til å holde alt sammen. Den har en topppolstring på 37 piksler.
Det er høyden på bildet i bakgrunnen. Padding vil skyve barnelementene ned for å avsløre
bildet bak. Det har også en absolutt posisjon, slik at vi kan flytte den rundt på toppen av siden
innhold.
De andre to klassene har ganske enkelt et bakgrunnsbilde, og i tilfelle av .topMid, polstring for å gi
innhold som vil bli plassert inne, noe å puste inn.
jQuery er ganske kult av seg selv. Men den virkelige magien er å forlenge den med et plugin. Når du legger din
kode inn i et plugin, du gjør det gjenbrukbart. På den måten kan du bygge opp et kodebibliotek og aldri skrive
samme kode to ganger.
Her er verktøytipspluggen i sin helhet:
$ .fn.betterTooltip = funksjon (alternativer) / * Oppsett alternativene for verktøytipset som kan nås utenfor pluginet * / var defaults = speed: 200, delay: 300; var opsjoner = $ .extend (standard, alternativer); / * Opprett en funksjon som bygger verktøytipsmarkeringen. Deretter legger du verktøytipset til kroppen * / getTip = function () var tTip = ""+""; return tTip; $ (" body "). prepend (getTip ()); / * Gi hvert element med klassen assosiert med plugin muligheten til å ringe verktøytipset * / $ (dette) .each (funksjon var $ this = $ (dette); var tips = $ ('. tips'); var tipInner = $ ('.tips.tipMid'); var tTitle = (this.title); this.title = ""; var offset = $ (dette) .offset (); var tLeft = offset.left; var tTop = offset.top; var tWidth = $ this.width (); var tHeight = $ this.height (); / * Musen over og ut funksjoner * / $ this.hover (funksjon () tipInner.html (tTitle); setTip (tTop, tLeft); setTimer ();, funksjon () stopTimer (); tip.hide ();) ; / * Forsink fade-in animasjonen av verktøytipset * / setTimer = funksjon () $ this.showTipTimer = setInterval ("showTip ()", standardinnstillinger.delay); stopTimer = funksjon () clearInterval ($ dette. showTipTimer); / * Plasser verktøytipset i forhold til klassen som er knyttet til verktøytipset * / setTip = funksjon (øverst, venstre) var topOffset = tip.height (); var xTip = (left-30) + "px"; var yTip = (top-topOffset-60) + "px"; tip.css ('top' : yTip, 'left': xTip); / * Denne funksjonen stopper timeren og skaper fade-in animasjonen * / showTip = function () stopTimer (); tip.animate ("top": "+ = 20px", "opacity": "bytt", standardinnstillinger.speed); ); ;"+""+""+"
Nå som du har sett hvordan koden ser ut, er det på tide å dissekere det.
For å komme i gang, opprett en .js-fil og gi den navnet jquery.betterTooltip.js for å gjøre det kompatibelt med jQuery
plugin standarder.
Innenfor den .js-filen, ta med følgende kode:
$ .fn.betterTooltip = funksjon () );
Dette skaper en offentlig funksjon som kan påberopes fra hode av et dokument eller
en annen ekstern .js-fil. For å påkalle pluginet ditt, må du ringe følgelinjen fra innenfor a$ (Document) .ready sidehendelse.
Accentsconagua
$ (dokument) .ready (funksjon () $ ('. tTip'). betterTooltip ();); Ovenstående linje vil legge ved pluginet til hvert element med klassenavnet "tTip". På samme måte, du
kan legge den til et hvilket som helst element av ditt valg.
For å unngå å måtte endre plugin for hvert prosjekt, er det viktig å avsløre noen av
variabler og innstillinger slik at de kan tweaked fra utenfor selve plugin-modulen. Det ultimate målet ville være
For å aldri berøre pluginet, juster du innstillingene. For å gjøre dette, legg til følgende til den første brikken
av kode:
$ .fn.betterTooltip = funksjon (alternativer) / * Oppsett alternativene for verktøytipset som kan nås utenfra * / var defaults = hastighet: 200, forsinkelse: 300; var opsjoner = $ .extend (standard, alternativer); );
Dette gjør at innstillingene "hastighet" og "forsinkelse" kan endres når pluginet påberopes slik:
$ ('. tTip'). betterTooltip (hastighet: 600, forsinkelse: 600); Disse er helt valgfrie. Hvis ikke spesifisert, bruker plugin standardverdiene.
Husk at HTML du skrev opp for verktøytipset? Det vil nå gjøre sitt offisielle utseende.
I denne koden av koden brukes jQuery "prepend" innholdsmanipulering til å injisere verktøytipset
umiddelbart etter åpningen kropp stikkord. På denne måten kan vi forsikre oss om at verktøytipset
er plassert på toppen av alt.
/ * Opprett en funksjon som bygger verktøytipsmarkeringen. Deretter legger du verktøytipset til kroppen * / getTip = function () var tTip = ""+""; return tTip; $ (" body "). prepend (getTip ());"+""+""+"
Dette er en av de viktigste og nyttige aspektene ved et jQuery-plugin. $ (Dette) .each-funksjonen
sløyfer gjennom hvert sideelement som er knyttet til pluginet når det ble fremkalt. I dette tilfellet er det
alle elementene med "tTip" klassen. Når det løper gjennom hvert element, gjelder det egenskaper og metoder
som du spesifiserer.
$ (dette) .each (funksjon () var $ this = $ (dette); var tips = $ ('. tips'); var tipInner = $ ('.tips .tipMid'); var tTitle = (dette. tittel); this.title = ""; var offset = $ (dette) .offset (); var tLeft = offset.left; var tTop = offset.top; var tWidth = $ this.width (); var tHeight = $ this.height (); / * Mus over og ut funksjoner * / $ this.hover (funksjon () tipInner.html (tTitle); setTip (tTop, tLeft); setTimer ();, funksjon () stopTimer ); tip.hide ();); Dette er ganske enkelt. Den øverste halvdelen består av en haug med egenskaper for høyde, bredde, x & y posisjon og
til og med tittelattributtverdien av elementene "tTip". Jeg bruker jQuery offset () CSS-metoden for å hente topp- og venstreposisjonen. Det er også en
sveverfunksjon tilordnet hver "tTip" -klasse som kaller metoder på musen over og ut. Disse metodene vil bli beskrevet
lenger nede i opplæringen.
En viktig del av $ (denne) .each-funksjonen er denne linjen med kode her som fjerner tittelattributtet:
this.title = "";
Hele poenget med dette verktøytipset er å bytte generisk
verktøytips med en bedre iøynefallende versjon. Hvis du ikke fjerner tittelattributtet, som nettleseren
bruker til å generere den generiske verktøylippen, vil du få duellverktøystips. Som dette:
/ * Forsink fade-in animasjonen av verktøytipset * / setTimer = funksjon () $ this.showTipTimer = setInterval ("showTip ()", standardinnstillinger.delay); stopTimer = funksjon () clearInterval ($ this.showTipTimer); Disse to metodene, setTimer og stopTimer brukes til å opprette en forsinkelse fra når brukeren svinger
markøren over elementet med "tTip" -klassen og når verktøytipset ser ut. Dette
er viktig for å unngå irriterende brukere. Jeg er sikker på at vi alle deler frustrasjonen når vi ved et uhell svinger
over en av disse popup-annonser som er skjult i innholdet på nettsteder.
SetTimer-metoden oppretter et setInterval-objekt som kaller "showTip ()" etter at den tildelte tiden har passert.
For at setInterval ikke skal gå uendelig, blir metoden stopTimer kalt for å stoppe setInterval-objektet.
/ * Plasser verktøytipset i forhold til klassen som er knyttet til verktøytipset * / setTip = funksjon (øverst, venstre) var topOffset = tip.height (); var xTip = (left-30) + "px"; var yTip = (top-topOffset-60) + "px"; tip.css ('top': yTip, 'left': xTip); Hover-funksjonen inne i $ (denne) .each-kretsen, som ble opprettet tidligere, kaller setTip (). Hensikten er å posisjonere
verktøytipset rett over "tTip" -elementet. Dette gjøres før fade-in animasjonen.
/ * Denne funksjonen stopper timeren og skaper fade-in animasjonen * / showTip = function () stopTimer (); tip.animate ("top": "+ = 20px", "opacity": "bytt", standardinnstillinger.speed); ); ; Sist men ikke minst, funksjonen showTip (). Dette bruker jQuery's animate () UI-effekt for å fade verktøytipset inn
samtidig som du skyver den ned.
Når du er ferdig og fornøyd med resultatene dine, kan du flytte pluginet fra den grunnleggende HTML-siden full av fyllingstekst til
den virkelige verden og sette den i bruk.
Dette er et veldig grunnleggende eksempel på hva et verktøytip-plugin kan gjøre. Den morsomme delen nå vil være å gjøre den mer robust.
Det finnes alle mulige måter å utvide denne plugin på. En nødvendig forbedring ville være å oppdage
plasseringen av verktøylippen i forhold til grensesnittene til nettleservinduet og viser verktøylippen tilsvarende
det blir ikke kuttet av.
Takk for at du leste denne opplæringen. Jeg håper det gir litt lys på hvordan du kan bruke jQuery til å forbedre nettstedet ditt
grensesnitt.
La kommentarene begynne! Jeg vil høre hva du synes. Hjelper denne teknikken faktisk brukere med å komme seg lettere,
eller er det bare en annen irritasjon?
