Share
Browsers zullen automatisch een tooltip weergeven wanneer u een titel attribuut. Internet Explorer zal ook het alt-attribuut gebruiken. Maar in deze zelfstudie laat ik je zien hoe je snel een jQuery-plug-in kunt schrijven die de typische browsertooltip zal vervangen door iets kleins.
Een van de geweldige tools die we hebben in onze goodiebag voor webontwikkeling zijn tooltips. Een tooltip is een doos
die verschijnt wanneer u uw cursor op een element zoals een hyperlink plaatst. Het biedt aanvullende
informatie over dat element. Een koppeling met weinig of geen tekst (een pictogram) kan bijvoorbeeld verwarrend zijn.
Geef een extra zin of twee in een tooltip om aan uw gebruikers uit te leggen wat er zal gebeuren als ze erop klikken.
Deze tutorial zou waarschijnlijk in de categorie Intermediate passen. De instructies gaan ervan uit dat je op zijn minst hebt
een basiskennis van HTML / CSS, slicing-technieken en jQuery.
Als je een opfriscursus op jQuery nodig hebt, volgen hier een aantal aanbevolen sites:
Om een goed beeld te krijgen van de bestanden die betrokken zijn in deze tutorial, is hier wat de bestandsstructuur eruit zou moeten zien
zoals tegen de tijd dat je klaar bent.
Hier is een overzicht van wat elk bestand / map is:
Open Photoshop, of uw software naar keuze, en maak een geweldige tooltip. In plaats van ontwerpen
op een effen witte achtergrond kan het helpen om uw tooltip op te stellen op een achtergrond die vergelijkbaar is met die van uw site.
Op die manier gaat het naadloos in elkaar over. Voor het grootste deel is er geen goede of foute manier
om deze stap te voltooien. Gebruik gewoon je verbeeldingskracht en creativiteit.
Voor dit specifieke ontwerp moet u de tooltip in 3 verschillende afbeeldingen splitsen. Voor dit specifieke ontwerp is een PNG nodig om transparantie te behouden.
1) Het bovenste stuk. 2) Een dunne plak van 1 pixel die verticaal in het midden wordt herhaald. 3) Het onderste stuk. Het vierde deel van het onderstaande schema toont de drie
stukken nadat ze waren uitgesneden.
Plaats deze afbeeldingsbestanden in een map met de naam "afbeeldingen".
Opmerking: Internet Explorer houdt NIET van PNG-transparantie. Zelfs IE 7 ondersteunt het slechts gedeeltelijk. Als je a animeert
PNG met JavaScript, elk gebied met transparantie wordt tijdens beweging zwart. Ik gebruik dit ontwerp
goed wetend dat het problemen zal hebben in IE die moeilijk zijn om mee te werken.
Met de afbeeldingen in plakjes kunnen we doorgaan naar de HTML- en CSS-markup. Dit is het gemakkelijkste deel van het geheel
zelfstudie.
Deze HTML-markup wordt binnenkort verplaatst naar een extern JavaScript-bestand, dus typ dit gewoon in
is het handigst en kan later worden doorverwezen.
Er zijn er drie div -tags. Twee genest in een ouder. De eerste div, "tip" wordt gebruikt om alles bij elkaar te houden
en toon het bovenste gedeelte van de tooltip, tipTop.png.
"tipMid" zal uiteindelijk de tekst bevatten die de tooltip zal weergeven. Het zal ook hebben tipMid.png verticaal binnen herhalen.
"tipBtm" is er alleen om het onderste gedeelte van de tooltip weer te geven, tipBtm.png.
Binnenkant van index.html, voeg een aantal filler-tekst en enkele elementen toe met de titel-attributen ingevuld. Zoals:
Dit is een link
In de kop van index.html, u moet een link maken naar de stylesheet en de twee JavaScript-bestanden.
De gebruikte CSS voor deze tooltip is relatief eenvoudig, voeg gewoon het volgende toe style.css
.tip width: 212px; padding-top: 37px; Geen weergeven; positie: absoluut; achtergrond: transparante URL (images / tipTop.png) no-repeat boven; .tipMid background: transparent url (images / tipMid.png) repeat-y; opvulling: 0 25px 20px 25px; .tipBtm background: transparent url (images / tipBtm.png) no-repeat bottom; hoogte: 32px;
Laat me het bovenstaande uitleggen.
Het wikkelelement, .tip, wordt gebruikt om alles bij elkaar te houden. Het heeft een topvulling van 37 pixels.
Dat is de hoogte van het beeld op de achtergrond. De opvulling duwt de onderliggende elementen naar beneden om te onthullen
het beeld achter. Het heeft ook een absolute positie, zodat we het bovenaan de pagina kunnen verplaatsen
inhoud.
De andere twee klassen hebben eenvoudigweg een achtergrondafbeelding en, in het geval van .topMid, opvulling om de
inhoud die erin wordt geplaatst, wat ruimte om te ademen.
jQuery is vrij cool op zichzelf. Maar de echte magie is om het uit te breiden met een plug-in. Wanneer je je
coderen in een plug-in, je maakt het herbruikbaar. Op die manier kunt u een codebibliotheek opbouwen en nooit schrijven
dezelfde code twee keer.
Hier is de tooltip-plug-in in zijn geheel:
$ .fn.betterTooltip = function (options) / * Stel de opties in voor de tooltip waartoe toegang kan worden verkregen buiten de plugin * / var defaults = speed: 200, delay: 300; var options = $ .extend (standaardinstellingen, opties); / * Maak een functie die de tooltip-markup maakt. Voeg vervolgens de tooltip toe aan het hoofdgedeelte * / getTip = function () var tTip = ""+""; return tTip; $ (" body "). prepend (getTip ()); / * Geef elk item met de klasse die bij de plug-in hoort de mogelijkheid om de tooltip * / $ (this) .each (function () aan te roepen var $ this = $ (this); var tip = $ ('. tip'); var tipInner = $ ('. tip .tipMid'); var tTitle = (this.title); this.title = ""; var offset = $ (this) .offset (); var tLeft = offset.left; var tTop = offset.top; var tWidth = $ this.width (); var tHeight = $ this.height (); / * Mouse over en uit functies * / $ this.hover (function () tipInner.html (tTitle); setTip (tTop, tLeft); setTimer ();, function () stopTimer (); tip.hide ();) ; / * Vertraag de fade-in-animatie van de tooltip * / setTimer = function () $ this.showTipTimer = setInterval ("showTip ()", defaults.delay); stopTimer = function () clearInterval ($ this. showTipTimer); / * Plaats de knopinfo ten opzichte van de klasse die bij de knopinfo hoort * / setTip = functie (boven, links) var topOffset = tip.height (); var xTip = (links-30) + "px"; var yTip = (top-topOffset-60) + "px"; tip.css ('top' : yTip, 'left': xTip); / * Deze functie stopt de timer en maakt de fade-in-animatie * / showTip = function () stopTimer (); tip.animate ("top": "+ = 20px", "opacity": "toggle", defaults.speed); ); ;"+""+""+"
Nu je hebt gezien hoe de code eruit ziet, is het tijd om het te ontleden.
Maak eerst een .js-bestand en geef dit de naam jquery.betterTooltip.js om het compatibel te maken met jQuery
plugin standaarden.
Binnen dat .js-bestand staat de volgende code:
$ .fn.betterTooltip = function () );
Hiermee wordt een openbare functie gemaakt die kan worden opgeroepen vanuit de hoofd van een document of
een ander extern .js-bestand. Om uw plug-in op te roepen, moet u de volglijn bellen vanuit een$ (Document) .ready pagina evenement.
Accentsconagua
$ (document) .ready (function () $ ('. tTip'). betterTooltip ();); De bovenstaande regel koppelt de plug-in aan elk element met de klassenaam "tTip". Evenzo jij
zou het kunnen hechten aan elk element van uw keuze.
Om te voorkomen dat de plug-in voor elk project moet worden gewijzigd, is het belangrijk om enkele van de
variabelen en instellingen, zodat ze van buiten de plug-in zelf kunnen worden aangepast. Het uiteindelijke doel zou zijn
om de plug-in nooit aan te raken, past u gewoon de instellingen aan. Om dit te doen, voeg het volgende toe aan dat eerste blok
van code:
$ .fn.betterTooltip = function (options) / * Stel de opties in voor de tooltip die van buitenaf toegankelijk is * / var defaults = speed: 200, delay: 300; var options = $ .extend (standaardinstellingen, opties); );
Hierdoor kunnen de instellingen "speed" en "delay" worden gewijzigd wanneer de plug-in als volgt wordt opgeroepen:
$ ('. tTip'). betterTooltip (speed: 600, delay: 600); Deze zijn volledig optioneel. Als dit niet wordt opgegeven, gebruikt de plug-in de standaardwaarden.
Weet je nog die HTML die je hebt getypt voor de tooltip? Het wordt nu officieel weergegeven.
In deze reeks code wordt de inhoudsmanipulatie van jQuery "voorafgaan" gebruikt om de knopinfo in te voegen
onmiddellijk na de opening lichaam label. Op deze manier kunnen we ervoor zorgen dat de tooltip
staat bovenop alles.
/ * Maak een functie die de tooltip-markup maakt. Voeg vervolgens de tooltip toe aan het hoofdgedeelte * / getTip = function () var tTip = ""+""; return tTip; $ (" body "). prepend (getTip ());"+""+""+"
Dit is een van de belangrijkste en nuttigste aspecten van een jQuery-plug-in. De $ (this) .each-functie
doorloopt elk pagina-element dat aan de plug-in is gekoppeld wanneer het werd opgeroepen. In dit geval is het
alle elementen met de klasse "tTip". Wanneer het door elk element loopt, past het de eigenschappen en methoden toe
die u opgeeft.
$ (this) .each (function () var $ this = $ (this); var tip = $ ('. tip'); var tipInner = $ ('. tip .tipMid'); var tTitle = (this. titel); this.title = ""; var offset = $ (this) .offset (); var tLeft = offset.left; var tTop = offset.top; var tWidth = $ this.width (); var tHeight = $ this.height (); / * Muis over en uit functies * / $ this.hover (function () tipInner.html (tTitle); setTip (tTop, tLeft); setTimer ();, function () stopTimer ( ); tip.hide ();); Dit is vrij eenvoudig. De bovenste helft bestaat uit een aantal eigenschappen voor de hoogte, breedte, x & y-positie en
zelfs de titelattribuutwaarde van de "tTip" -elementen. Ik gebruik de jQuery offset () CSS-methode om de bovenste en linker positie te bepalen. Er is ook een
hover-functie toegewezen aan elke "tTip" -klasse die methoden op de muis aanroept. Deze methoden worden beschreven
verderop in de tutorial.
Een belangrijk onderdeel van de $ (this) .each-functie is deze regel code die het titelkenmerk verwijdert:
this.title = "";
Het hele punt van deze tooltip is om de generieke te vervangen
tooltip met een beter opvallende versie. Als u het titelkenmerk niet verwijdert, namelijk de browser
gebruikt om generieke tooltip te genereren, krijg je dueltooltips. Zoals dit:
/ * Vertraag de fade-in-animatie van de knopinfo * / setTimer = function () $ this.showTipTimer = setInterval ("showTip ()", defaults.delay); stopTimer = function () clearInterval ($ this.showTipTimer); Deze twee methoden, setTimer en stopTimer worden gebruikt om een vertraging te creëren vanaf het moment waarop de gebruiker zweeft
hun cursor op het element met de klasse "tTip" en wanneer de knopinfo verschijnt. Deze
is belangrijk om vervelende gebruikers te voorkomen. Ik weet zeker dat we allemaal de frustratie delen als we per ongeluk zweven
over een van die pop-upadvertenties die zijn verborgen in de inhoud van sites.
De methode setTimer maakt een setInterval-object dat "showTip ()" aanroept nadat de toegewezen tijd verstreken is.
Om setInterval niet oneindig te laten lus maken, wordt de methode stopTimer aangeroepen om het setInterval-object te stoppen.
/ * Plaats de knopinfo ten opzichte van de klasse die is gekoppeld aan de knopinfo * / setTip = functie (boven, links) var topOffset = tip.height (); var xTip = (links-30) + "px"; var yTip = (top-topOffset-60) + "px"; tip.css ('top': yTip, 'left': xTip); De hover-functie binnen de $ (this). Each-lus, die eerder is gemaakt, roept setTip () aan. Het doel is om te positioneren
de tooltip direct boven het "tTip" -element. Dit gebeurt voorafgaand aan de fade-in-animatie.
/ * Deze functie stopt de timer en maakt de fade-in-animatie * / showTip = function () stopTimer (); tip.animate ("top": "+ = 20px", "opacity": "toggle", defaults.speed); ); ; Last but not least, de functie showTip (). Hiermee wordt het animale () UI-effect van jQuery gebruikt om de knopinfo te vervagen
terwijl tegelijkertijd naar beneden glijden.
Zodra u klaar bent en tevreden bent met uw resultaten, kunt u uw plug-in verplaatsen van de eenvoudige HTML-pagina vol vultekst naar
de echte wereld en zet het in gebruik.
Dit is een heel basaal voorbeeld van wat een tooltip-plug-in kan doen. Het leuke van nu is om het robuuster te maken.
Er zijn allerlei manieren om deze plug-in uit te breiden. Een noodzakelijke verbetering zou detecteren
de locatie van de tooltip in relatie tot de grenzen van het browservenster en dienovereenkomstig de tooltip weergeven
het wordt niet afgesneden.
Bedankt voor het lezen van deze tutorial. Ik hoop dat het enig licht werpt op hoe u jQuery kunt gebruiken om uw website's te verbeteren
interface.
Laat de opmerkingen beginnen! Ik wil horen wat je denkt. Helpt deze techniek gebruikers daadwerkelijk om zich heen te verplaatsen?,
of is het gewoon een andere ergernis?
