Share
Att komma igång med någon typ av ramverk kan vara en skrämmande upplevelse. För att hjälpa till, denna vecka har vi ett djupt handledning och en lång skärmdump för att ge en krasch-kurs för det här populära JavaScript-biblioteket. Med så mycket fokus på jQuery är det lätt att glömma att Mootools är ett lika kraftfullt bibliotek med ett stort efterföljande.
Denna handledning innehåller en skärmdump som är tillgänglig för Tuts + Premium-medlemmar.
Efter den första flytten till Mootools blev jag frustrerad med bristen på samhällsstöd och slutade flytta tillbaka till Prototype omedelbart. Efter att jag var mer bekväm med att arbeta med ramar flyttade jag tillbaka till Mootools och har inte tittat tillbaka.
Med denna handledning kommer jag att försöka se till att du har en bra början på Mootools-ramen. Jag ska gå igenom dig genom att få allt nedladdat och installerat samt några av de grundläggande elementen i Mootools. Efter det kommer jag att spendera lite tid på att gå igenom hur du använder Mootools Docs, vilket är en webbplats som du kommer att besöka mycket ofta under användning av Mootools.
Okej, tillräckligt med historier, får våra händer smutsiga.
Det fina med att arbeta rent med javascript är att vi inte behöver köra filerna på en web-eller lokal server. Allt du behöver för denna handledning är:
För denna handledning använder jag Firefox och Firebug för att visa dig några felsökningstips, så jag rekommenderar att du använder Firefox såväl som Firebug. Firebug kommer att göra arbetet med Mootools, eller något ramverk, 100x lättare.
Du kan ladda ner firebug här
Gå över till www.Mootools.net/download
För närvarande kommer vi att inkludera både Core and More-biblioteken. Detta är bara för att se till att vi saknar något. När du blir mer bekväm med Mootools kommer du att inse att inte alla komponenter behövs för specifika applikationer, så du kan skräddarsy bygga Mootools-bibliotek för att passa dina behov och behålla filstorlekarna små.
Ladda ner komprimerad Mootools 1.2.3 YUI-fil och spara den på skrivbordet.
Flytta till mer byggare, välj alla alternativ och hämta den komprimerade filen YUI.
Låt oss skapa en ny mapp som heter Moo och inuti den mappen kan vi skapa en annan mapp som heter inc. Bara för att göra det enklare, skapa en enda fil i vår inc-mapp som heter js och kasta båda Mootools-filer i den mappen.
Inne i vår Moo-mapp skapar du en ny fil som heter index.html och öppnar det som suger upp.
Är det öppet? Bra, öppna den nu i Firefox också. Du borde se en tom sida. Byt tillbaka till din index.html-fil i din redigerare.
För att inkludera Mootools i vårt manus måste vi lägga till 2 rader kod till din HTML-fil. Om du någonsin har inkluderat en javascript-fil i ett skript innan detta kommer att vara mycket bekant för dig.
Vi är nu installerade och redo att gå!
För att få Mootools att prata med element på vår sida använder vi funktionen $ () för att få ett element med dess ID.
Låt oss skapa en ny div, ge den ett ID och en del text och gör sedan Mootools prata med det.
Därefter lägger vi några javascript-taggar så att vi kan börja skriva några Mootools.Hej killar!
Vi har skapat div och gav det ett ID av "låda". Vi lade in lite text inuti den och skapade några skript taggar så att vi kan börja skriva in några Mootools godhet.
Om vi använder $ -funktionen och skickar ID-adressen till vår ruta kan vi se att Mootools inte får alla attribut hos vår "låda" div. Vårt variabla element innehåller nu all den informationen.
Accentsconagua
var element = $ ('box'); Om vi uppdaterar sidan kan vi inte synligt se att allt händer, men vi vet att saker händer i bakgrunden. Det här är där console.log () och Firebug kommer in i spel.
Om du öppnar Firebug ska du se en tom konsol. Med hjälp av console.log () kan vi vidarebefordra information till Firebug för att visa för oss. Det här är mycket användbart när du felsöker ett skript eftersom du kan använda den för att visa information i olika steg i ditt skript för att se var sakerna misslyckas.
console.log ('Åh, Hej Alla!'); 
Vi kan också använda den för att visa information som annars inte skulle visas i vår webbläsare.
Låt oss använda console.log () för att visa lite information om vår "låda" div.
console.log (element);
Så vi har lärt oss att vi kan använda $ () för att få ett element, men om vi vill få informationen om många element. Vi vill inte använda 100 instanser av $ () som bara blir röriga. Det här är $$ () som kommer in i spel!
Vem behöver få en, får många!
Låt oss lägga till 5 länkar till vår sida.
Jag är den första länken
Jag är den andra länken
Jag är den tredje länken
Jag är den fjärde länken
Jag är den femte länken
... javascript-taggar ... var länkar = $$ ('a'); console.log (länkar);
Våra länkarvariabel innehåller nu en rad av alla våra länkar.
Okej, så vi har skapat våra element och nu har vi Mootools att prata med dem, men det här är inte kul. Den främre slutanvändaren ser inga förändringar, så vi kan flytta oss bort från det här tråkiga bakstycket och flytta oss till något lite roligare!
Vi har just täckt med att få elementen med våra getterfunktioner. Vi kan få ett enda element med $ () och elementets ID. Vi har också täckt att få flera element med $$ () och elementstypen.
När du använder $$ () kan vi antingen skicka HTML-taggnamnet eller använda CSS-klassväljare för att fånga en grupp av element. Ett snabbt exempel på gripande klassnamn skulle se ut så här.
var element = $$ ('myclass'); Det skulle returnera en uppsättning av alla element på sidan med css klassen av "min klass".
Teorin är torr som ett ben och det är vad docs är för men du kom hit för att få dina händer smutsiga, så vi kan bli smutsiga.
Nu när vi får våra element kan vi använda setterfunktionerna för att manipulera elementen på skärmen.
Vår "låda" div ser ganska slätt ut så vi kan lägga lite färg på den. Vi har redan satt in vårt element i vår elementvariabel.
element.set ('stilar', 'färg': 'rött'); Vi använder vår elementvariabel och vi bifogar funktionen set () med hjälp av element.set ().
Det finns många argument vi kan använda för att ändra vårt element, men för närvarande ska vi använda stilar. Därefter passerar vi några alternativ till vårt stilargument. Vi passerar färgalternativet och ställer in texten till rött. Stilar kan använda alla tillgängliga css-alternativ. Låt oss ändra bakgrundsfärgen medan vi är här. Känn dig fri att leka med stilar och se hur färgstark du kan göra vårt lådelement.
element.set ('stilar', 'färg': 'rött', 'bakgrund': 'gult'); Vår "låda" elementet ser inte lite mindre vanligt ut. Om vi ville tillämpa många stilar på vårt lådelement skulle det kunna bli mycket onödigt kod. Lyckligtvis kan vi använda CSS-stilar och ett annat angivet argument för att skära ner på kod. Fortsätt och ta bort element.set () -koden. Vi ska lägga till några css-stilar med inline css.
Obs! För att göra det enklare ska vi skriva vår CSS i filen, men när du skapar en verklig webbplats är det bra att ha all din CSS och Javascript i separat fil.
Ovanför din "låda" div kan lägga till några stilkoder och skapa en klass av .myclass.
Vi kan nu använda set ('style') för att lägga till vår nya stil till vårt element.
element.set ( 'klass', 'MyClass');
Några andra argument vi kan använda med set är HTML och text. Några grundläggande exempel på detta är:
element.set ( 'html','Hej Killar, nu är jag djärv
'); element.set ('text', 'Hej killar, ingen html här');
Vilket argument du använder beror på vad du behöver använda det för. Om du inte behöver skicka HTML-värden, skulle du använda text och vice versa om du behövde överföra HTML-värden.
Vi har använt set () för att lägga till några stilar till vår "låda" div, men vi kunde bara ha lagt till klassen till div med HTML. Vi behöver inte verkligen använda Mootools för att lägga till stilen om vi bara ändrar den innan användaren ser förändringen. Det är här händelserna är till nytta.
Låt oss fortsätta och ta bort alla länkar vi skapade och rensa våra javascript-taggar.
Din index.html-fil ska nu bara innehålla den här koden:
Hej killar!
Skapa en ny länk och ge den ett ID-knapp direkt under "låda" div.
Nu ska vi lägga till en händelse i den här knappen, så vi kan utföra en kod när en användare klickar på länken. Vi använder addEvent () för att göra detta.
$ ('button'). addEvent ('klick', funktion (e) ); Vi använder den bekanta $ () -funktionen för att berätta för Mootools vi vill prata med länken med ett ID-knapp. Därefter bifogar vi addEvent () och skickar 2 argument. Det första argumentet är det händelse som vi vill fånga vilket är när en användare klickar på länken. Det andra argumentet är en funktion med en variabel av e. Denna funktion kommer att utföras när användaren klickar på länken och variabeln för e skickar händelsen. Du förstår varför vi överför en variabel med funktionen i det här nästa steget.
... inuti addEvent ... e.stop ();
Vi tilldelar stop () -funktionen till vår variabel av e för att stoppa webbläsaren för att skicka länkåtgärden. Vanligtvis när du klickar på länken uppdateras sidan och alla dina ändringar kommer att gå vilse. e.stop () stannar webbläsaren från att uppdatera sidan så att vi kan göra några Mootools magic!
Nu har vi Mootools fånga klickhändelsen så att vi kan göra Mootools lägga till vår klass av .myclass till vår "låda" div när länken är klickad.
... inuti addEvent () ... element.set ("klass", "myclass"); Spara det här, uppdatera sidan och klicka på din länk. När du klickar på länken ska div nu ha lite styling till den. Vi gjorde allt det utan att uppdatera sidan. Här börjar Mootools bli mycket intressant.
Snabb liten uppdatering innan vi fortsätter. Vi har lärt oss hur man använder getterfunktioner ($ och $$) för att tillåta Mootools att prata med element på vår sida. Då lärde vi oss att vi kunde använda setterfunktioner för att manipulera dessa element. Händelser tillåter användning för att fånga användarinteraktion så att vi kan manipulera element i realtid utan att behöva uppdatera sidan för att reflektera varje förändring.
Mootools tillåter dig också att skapa nya element på flugan så att vi kan låta användaren anpassa sidan. För att göra detta ska vi använda de nya Element () och inject () funktionerna.
Låt oss börja med en ny HTML-fil. Ta bort allt från index.html eller skapa en ny fil.
I vår fil ska vi skapa div och 2 länkar. Gå vidare och skapa dem nu!
Vi ska använda $$ () för att lägga till en händelse i båda våra länkar på sidan. Vi ska fånga klickhändelsen och skapa ett nytt element. Slutligen kommer vi att injicera vårt nya element i vårt "resultat" div.
$$ ('a'). addEvent ('klick', funktion (e) e.stop ();); Vi använder $$ ('a') för att fånga alla länkar och sedan bifoga addEvent () till varje länk. Vi gör det här eftersom det skär ner på kodningen så att vi inte behöver hitta varje ID för länkarna och skapa addEvents för dem. Vi ska använda ID för varje länk för att bestämma vilken stil vi behöver lägga till. Låt piska upp några snabba css för de lådor vi ska skapa.
Nu är det dags att skapa våra element och spruta in dem på sidan.
var klass = this.id; var box = nytt element ('div', 'class': class); box.inject ($ ( 'resultat')); Först skapar vi en variabel som heter "klass" Håll ID-numret för länken som klickades. Vår nästa rad tar hand om att skapa elementet. Vi gör detta genom att använda nytt Element () och sedan överföra några argument. Det första argumentet är den typ av element vi vill skapa. Vi vill skapa en div, så vi passerar ett värde av div. Den andra uppsättningen är våra alternativ. Vi vill tilldela en annan klass beroende på vilken länk som har klickat. Vi gör det genom att först tala om den funktion som vi vill ställa in "klass" alternativ, då passerar vi vår variabel i klassen som kommer att returnera heller "Blue_box" eller "Grey_box".
Den sista raden tar vårt nya element, som vi placerat i en "låda" variabel och sprutar den in i vårt "resultat" div. Mootools vet att injicera det i "resultat" för att vi passerar "resultat" div med hjälp av en getter-metod som huvudalternativ.
Nu om vi uppdaterar sidan och börjar klicka på våra länkar bör du se att de lilla rutorna skapas i flygningen och läggs till på sidan.
Vid denna punkt i handledningen borde du vara ganska bekväm med att använda getter och setterfunktioner för att få Mootools att prata med våra element.
I den sista delen av den här handledningen kommer jag att beröra några av de animations- och effekterfunktioner som Mootools erbjuder.
Låt oss skapa en ny fil. Inuti den filen skapar en div med lite text inuti den och en länk.
Hej killar!
Jag har lagt till ID: er för varje element så att vi kan få Mootools att prata med dem.
Till att börja med kan vi bifoga en händelse till länken. Detta bör se väldigt bekant ut nu.
$ ('button'). addEvent ('klick', funktion (e) e.stop ();); Nu när vi har Mootools fånga klickhändelsen, låt oss göra vårt "låda" div blekna in och ut på varje klick.
. $ (Box) blekna (toggle ");
Nu när vi klickar på vår länk bör boxen div blekna bort. Om vi klickar på länken igen kommer den att visas igen.
Fading är coolt och allt, men vi kan lägga till lite stil i lådan och se om vi kan göra det växa!
Vi ska använda funktionen tween () för att animera några attribut av vår "låda" div.
Inne i vårt klickhändelse kan vi ta bort fade () -funktionen och ersätta den med tween ().
//$('box').fade('toggle '); $ ('box'). tween ('height', '200'); Nu om vi klickar på länken, bör vår ruta växa längre.
Tween-funktionen tar 2 argument. Det första är det attribut vi vill manipulera och det andra är ett värde. Vi vill ändra höjden på rutan och vi vill att den ska animera till 200px.
Vad händer om vi ville att rutan skulle växa med 10px varje gång vi klickade på länken. Först skulle vi behöva få den aktuella höjden på lådan. Jag tror att vi kan göra det med vår $ () getter-funktion.
var box = $ ('box'); var height = box.getHeight (); var new_height = höjd + 10; box.tween ('height', new_height); Först tilldelar vi vår "låda" div till en variabel i rutan. Därefter använder vi en inbyggd funktion av Mootools som heter getHeight () för att få dagens höjd "låda" div. Vi vill att rutan växer med 10px varje gång länken klickas så vi skapar en ny variabel som heter new_height och tilldelar den ett värde av höjd + 10. Det tar den nuvarande höjden och ökar den med 10. Till sist bifogar vi tweenen ( ) funktion till vår lådvariabel, berätta det vi vill animera höjden och ge den värdet av new_height.
Om du klickar på länken ska rutan växa. Om du klickar på det igen kommer det att fortsätta att växa med varje musklick.
Mootools har en omfattande dokumentavdelning på deras hemsida. http://Mootools.net/docs/core
Om du planerar att använda Mootools kommer du att bli mycket bekant med den här delen av deras webbplats. Det är uppdelat i de olika tillgängliga klasserna och funktioner som Mootools har att erbjuda.
Den sektion som du kommer att besöka mest kommer att vara avsnittet Element. Det här är det avsnitt som har all information om hur Mootools kommunicerar och manipulerar elementen på sidan.
Jag har gett dina breda slag för att du ska bli van vid hur Mootools fungerar och om du vill fortsätta att lära mig, föreslår jag att du läser över några av sidorna i Mootools-dokumenten.
