Share
Det är svårt. Du läser handledning efter handledning, men de antar att du vet mer än du faktiskt gör. När du är klar är du kvar och känner dig mer förvirrad än du ursprungligen var. Varför skapade han ett tomt objekt? Vad betyder det när du skickar "alternativ" som en parameter? Vad gör "defaultsettings" faktiskt?
Var aldrig rädd för; Jag ska visa dig exakt hur du bygger din egen "tooltip" -plugg, på begäran av en av våra lojala läsare.
Det kan hjälpa till att tänka på plugins på samma sätt som du skulle fungera. Har du någonsin funnit dig att upprepa samma procedurer
för plats efter plats? Kanske har du skapat ditt eget tabbingsystem som du gillar att använda. Snarare än att skriva samma kodtid och
gång igen, skulle det inte vara lättare om vi kunde vända ditt långa kodblock till en rad? Det är i huvudsak vad en plugin gör för oss.
Det möjliggör återanvändning, vilket är viktigast - om du vill hålla din timlön hög!
Skapa ett nytt projekt i din favorit kodredigerare och klistra in i följande html.
Du kan fortfarande inte skapa ett jQuery-plugin? Poängen med att använda Lorem Ipsum är att den har en mer eller mindre normal fördelning av bokstäver, i motsats till att använda "Innehåll här, innehåll här", vilket gör att det ser ut som läsbart engelska. Många skrivbordspubliceringspaket och webbsidoredigerare använder nu Lorem Ipsum som standardmodelltext, och en sökning efter "lorem ipsum" kommer att avslöja många webbplatser som fortfarande är i sin spädbarn. Olika versioner har utvecklats under åren, ibland av misstag, ibland med syfte (injicerad humor och liknande).
Denna kod är ganska enkel; så det kräver inte för mycket av en översikt.
Jag tycker vanligtvis att det är lättare att bygga min plugin om jag först bestämmer hur jag ska ringa den. Tänk på följande kod.
Jag har bestämt mig för att jag vill ha namnet på mitt plugin för att bara kallas "tooltip". Jag har också bestämt att jag vill kunna skicka i några
parametrar för att anpassa mitt verktygstips något. Detta kommer endast att vara frivilligt för användaren. Om så önskas kan han eller hon bara skriva:
I det här fallet standard alternativ kommer att användas.
Så nu när vi vet hur plugin kommer att ringas, låt oss gå vidare och bygga det! Skapa en ny fil i ditt projekt och namnge det "jQuery.tooltip.js". Det finns vissa namngivningskonventioner när du skapar ett plugin som eventuellt kommer att användas av andra. Vi börjar med att skriva 'jQuery', följt av namnet på vårt plugin. Men jag är säker på att du inser att tusentals människor har skapat ett eget verktygs plugin. Du kan bestämma att det är nödvändigt att förorda "tooltip" med en unik sträng; kanske dina initialer. Hur som helst, det spelar ingen roll för mycket. Du är fri att namnge ditt plugin men du önskar.
(funktion ($) ... kod) (jQuery);
Vi måste först försäkra oss om att symbolen "$" inte leder oss till några problem. Vad händer om vi också använder andra Javascript-bibliotek i vår ansökan? Har du någonsin tänkt på det? I sådana fall skulle vi behöva ändra alla "$" i vårt dokument till "jQuery". Det enda problemet är att det här är en ganska slarvlös lösning. Låt oss istället skapa en självkalla anonym funktion och skicka "$" som ett alias. På det sättet är vi fria att använda "$" så mycket vi vill utan att behöva oroa oss för några konflikter.
$ .fn.tooltip = funktion (alternativ)
Inom vårt omslag måste vi deklarera vårt nya plugin och göra det lika med följande funktion. Vi kan utföra denna uppgift genom att skriva jQuery.fn (kort för prototyp).namnet på vårt plugin.
Kom ihåg när jag angav att användaren skulle kunna göra små ändringar av verktygstipset? Dessa ändringar lagras inom parametern "Options".
var standard = bakgrund: '# e3e3e3', färg: 'svart', rundad: false,
Det är troligt att användaren kanske inte anger några alternativ. Så, vi ställer in våra egna "standard" alternativ. Eftersom det här är en handledning för nybörjare, kommer vi inte göra för mycket här. Mestadels visar detta vad som är möjligt. Vi tillåter användaren att välja en bakgrundsfärg, färg och huruvida verktygstipset är avrundet eller ej.
Senare i vår kod, när vi vill komma åt dessa värden, kan vi helt enkelt skriva: defaults.rounded.
Så hur kan vi avgöra om användaren lägger till sina egna alternativ? Svaret är att vi måste slå samman "standard" med "alternativ".
inställningar = $ .extend (, standardvärden, alternativ);
Vi har skapat en ny variabel som heter "inställningar" och har berättat för jQuery att kombinera "standard" och "alternativ" och placera resultaten i ett nytt objekt. Vid sammanslagning kommer de användardefinierade alternativen att ha företräde framför standardinställningarna.
Du kanske undrar varför jag inte har lagt till "var" innan inställningarna. Tekniskt är det inte nödvändigt, men det anses vara bästa praxis. Om du rullar upp lite ser du att efter vårt standardvärde har jag lagt till ett komma. När vi gör det kan vi fortsätta skapa fler variabler utan att behöva vara var varje gång. Till exempel…
var joe = ; var är = ; var bra = ;
kan bli…
var joe = , is = , bra = ;
this.each (function () var $ this = $ (this); var title = this.title;
Det är viktigt att komma ihåg att den förpackade uppsättningen som användaren skickar till det här plugin kan innehålla många element - inte bara en. Vi bör se till att vi använder en för varje uttalande - eller jQuerys "varje" metod - att cykla genom koden.
Vi börjar vår nya funktion genom att cache $ (detta). Inte bara kommer det att rädda oss några tecken, men det kommer också att påskynda saker, någonsin så lite. Det är inte nödvändigt, men anses vara god praxis. Många frågar, "Varför lägger du till dollarteckenet framför din variabel?". Vi gör detta för att påminna oss om att vi arbetar med jQuery-objektet. Genom att göra det minns jag att jag kan ringa saker som: $ this.click () ;. Därefter lagrar jag värdet på titelattributet i en variabel som heter "title". Du får se varför vi måste göra detta på ett ögonblick.
Accentsconagua
om ($ this.is ('a') && $ this.attr ('title')! = ") this.title ="; $ This.hover (function (e) Det är lätt att glömma vad $ det här hänvisar till. När du glömmer, gå bara tillbaka till det sätt du kallar "tooltip" -metoden.
$ (A.tooltip) tooltip ().
Vi kan se här att $ detta hänvisar till varje ankerkod som har en klass av "verktygstips".
Tillbaka till koden; om elementet i den förpackade uppsättningen faktiskt är en ankaremärke, och dess "titel" -attribut inte är tomt, kör sedan någon kod. Detta är ganska självförklarande. Jag vill inte köra ett gäng kod om användaren av misstag passerar i en bild. Dessutom vill jag inte skapa min verktygslådan om det inte finns något att visa!
Inom mitt "if" -sättning ställer jag in attributet "titel" på ankaretiketten lika med ingenting. Detta stoppar webbläsarens standardverktygstips från att läsa in. Därefter lägger jag till en händelselyssnare för när $ detta eller ankaretiketten svängs över. När det är skapar vi en ny funktion och skickar händelseobjektet som en parameter. Oroa dig inte för det här för tillfället ska jag förklara senare.
var title = $ this.attr ('title'); $ ('() .text ). fadeIn (350); Jag har skapat en variabel som heter "titel" och gjorde det lika med det värde som finns i ankretikettens "titel" -attribut. Det här är inte nödvändigt verkligen - men det hjälper mig.
När vi lägger till HTML-taggar i vårt jQuery-uttalande kan vi faktiskt skapa ett nytt element istället för att hämta ett. Vi skapar en ny div-tagg med ett ID för "tooltip". Därefter använder vi jQuerys underbara chaning förmåga att enkelt utföra en massa procedurer.
om (standardvärderingar) $ ('# tooltip'). addClass ('rounded'); Som standard är vårt "runda" alternativ inställt på "false". Om "default.rounded" returneras sant (vilket innebär att användaren lagt till den här parametern) måste vi lägga till en klass av "avrundad" till vår CSS-fil. Vi skapar den filen snart.
, funktion () // mouse out $ ('# tooltip'). hide (); ); "Hover" accepterar två funktioner: musen över och musen ut. Vi har lagt till lämplig kod för när användaren musar över vår valda ankerkod. Men vi måste också skriva en kod som tar bort verktygstipset när musen har lämnat ankretiketten.
Det skulle vara trevligt att tvinga verktygslådan att skifta när musen rör sig. Låt oss genomföra det snabbt.
$ this.mousemove (funktion (e) $ ('# tooltip'). css (topp: e.pageY + 10, vänster: e.pageX + 20);); När musen rör sig över ankerkoden skapar du en funktion och skickar återigen händelseobjektet som en parameter. Hitta elementet "verktygstips" och justera dess CSS. Du bör inse att det är den exakta koden som vi tidigare skrev. Vi återställer enkelt dessa värden till de nya. Nifty, eh?
Vi måste tillåta användaren att fortsätta kedja efter att han heter "tooltip". Till exempel:
$ ('a.tooltip'). tooltip (). css (...) .remove (); För att tillåta denna kedjning måste vi returnera "detta". Strax innan du stänger locket, lägg till "returnera det här".
Du har just lyckats skapa ett fullt fungerande plugin. Det är inte för avancerat, men det låter oss granska några viktiga funktioner. Här är den slutliga koden.
(funktion ($) $ .fn.tooltip = funktion (alternativ) var standard = bakgrund: '# e3e3e3', färg: 'svart', avrundat: false, inställningar = $ .extend (, alternativ () this.each (funktion () var $ this = $ (detta); var title = this.title; om ($ this.is ('a') && $ this.attr ('title')! = ") this.title ="; $ this.hover (funktion (e) // mouse over $ ('') .appendTo (' body ') .text (title) .hide () .css (backgroundColor: settings.background, färg: settings.color, topp: e.pageY + 10, vänster: e.pageX + 20 ). fadeIn (350); om (settings.rounded) $ ('# tooltip'). addClass ('rounded'); , funktion () // mouse out $ ('# tooltip'). ta bort (); ); $ this.mousemove (funktion (e) $ ('# tooltip'). css (topp: e.pageY + 10, vänster: e.pageX + 20);); ); // returnerar jQuery-objektet för att möjliggöra kedjan. returnera detta; ) (jQuery); 
Det sista steget är att lägga till en bit av CSS för att prettify vårt verktygstips. Skapa en ny CSS-fil som heter 'default.css' och klistra in följande i.
#tooltip background: # e3e3e3 url (... /images/search.png) no-repeat 5px 50%; gränsen: 1px solid #BFBFBF; flyta till vänster; fontstorlek: 12px; max bredd: 160px; vaddering: 1em 1em 1em 3em; position: absolut; .rounded -moz-border-radius: 3px; -webkit-gränsen-radien: 3px;
Ingenting för komplicerat här. Jag hänvisar till en bakgrundsbild som innehåller det vanliga "sök" förstoringsglaset. Du är välkommen att ladda ner källkoden för att använda den. Dessutom har jag lagt till lite vaddering, en maximal bredd och en typsnittstorlek. Det mesta av detta kommer ner till preferens. Du är fri att redigera det men du önskar.
Den enda vitala egenskapen är "position: absolute;". Tidigare ställer vi upp "topp" och "vänster" värden med jQuery. För att den positioneringen ska träda i kraft måste vi ställa ställningen till absolut! Det här är viktigt. Om du inte gör det fungerar det inte.
Till alla dem som har mailat mig ber om denna handledning hoppas jag att det har hjälpt på något sätt. Om jag inte förklarade mig tillräckligt bra, var noga med att se den associerade screencasten och / eller fråga en kommentar. Jag ska försöka hjälpa dig till min bästa förmåga. Tills nästa gång…
Om du har ett bra grepp om de tekniker som presenteras i den här handledningen är du redo att fortsätta! Överväg att registrera dig för ett Net Plus-medlemskap för att se en avancerad handledning, av Dan Wellman, som lär dig att bygga ett mer komplicerat jQuery-plugin. Det kommer också med en tillhörande skärmdump. Var noga med att registrera dig nu!
