Share
Komme i gang med en hvilken som helst type rammeverk kan være en skremmende opplevelse. For å hjelpe, har denne uken en dybdeopplæring og lang screencast for å gi et kollaps for dette populære JavaScript-biblioteket. Med så mye fokus på jQuery, er det lett å glemme at Mootools er et like kraftig bibliotek med stor etterspørsel.
Denne opplæringen inneholder en screencast tilgjengelig for Tuts + Premium medlemmer.
Etter den første flyttingen til Mootools ble jeg frustrert over mangelen på samfunnsstøtte og endte opp med å gå tilbake til Prototype umiddelbart. Etter at jeg var mer komfortabel med å arbeide med rammer jeg flyttet tilbake til Mootools og ikke har sett tilbake.
Med denne opplæringen skal jeg prøve å sørge for at du har en god start på Mootools-rammeverket. Jeg kommer til å gå deg gjennom å få alt nedlastet og installert, så vel som noen av de grunnleggende elementene i Mootools. Deretter skal jeg tilbringe litt tid på å gå gjennom hvordan du bruker Mootools Docs, som er et nettsted du vil besøke veldig ofte under bruk av Mootools.
Ok, nok historier, la oss få våre hender skitne.
Det fine med å jobbe rent med javascript er at vi ikke trenger å kjøre filene på en web eller lokal server. Alt du trenger for denne opplæringen er:
For denne opplæringen bruker jeg Firefox og Firebug for å vise deg noen feilsøkingstips, så jeg anbefaler at du bruker firefox samt Firebug. Firebug vil gjøre arbeid med Mootools, eller et hvilket som helst rammeverk, 100x lettere.
Du kan laste ned firebug her
Gå over til www.Mootools.net/download
For nå skal vi inkludere både Core and More-bibliotekene. Dette er bare for å sikre at vi ikke mangler noe. Når du blir mer komfortabel med Mootools, vil du innse at ikke alle komponentene er nødvendige for bestemte applikasjoner, slik at du kan skreddersy bygge Mootools-biblioteker for å passe dine behov og holde filstørrelsene små.
Last ned Mootools 1.2.3 YUI komprimert fil og lagre den på skrivebordet.
Flytt til mer byggmester, velg hvert alternativ og last ned den komprimerte filen YUI.
La oss lage en ny mappe som heter Moo, og i den mappen kan vi lage en annen mappe som heter inc. Bare for å gjøre det enklere, lag en enda fil i vår innkatalog, kalt js, og kaste begge Mootools-filene i den mappen.
Inne i vår Moo-mappe, opprett en ny fil kalt index.html og åpne den sucker opp.
Er det åpent? Bra, nå åpner den også i Firefox. Du bør se en tom side. Bytt tilbake til index.html-filen din i editoren din.
For å inkludere Mootools i vårt skript, må vi legge til 2 linjer med kode til HTML-filen din. Hvis du noen gang har tatt med en javascript-fil i et skript før dette vil være veldig kjent for deg.
Vi er nå klar og klar til å gå!
For å få Mootools til å snakke med elementer på vår side bruker vi $ () -funksjonen for å få et element med det ID.
La oss lage en ny div, gi den en ID og litt tekst, og la Mootools snakke med den.
Etter det kan vi sette noen javascript-koder, så vi kan begynne å skrive noen Mootools.Hei folkens!
Vi har laget div og ga den en ID av "eske". Vi satte inn litt tekst på innsiden av det og opprettet noen skriptkoder, slik at vi kan begynne å skrive inn noen Mootools godhet.
Hvis vi bruker $ -funksjonen og sender passordets ID, kan vi se at Mootools ikke får alle egenskapene til vår "eske" div. Vårt variabelt element inneholder nå alle dataene.
Accentsconagua
var element = $ ('boks'); Hvis vi oppdaterer siden, kan vi ikke synlig se at noe som skjer, men vi vet at ting skjer i bakgrunnen. Dette er hvor console.log () og Firebug kommer inn i spill.
Hvis du åpner Firebug, bør du se en tom konsoll. Ved hjelp av console.log () kan vi sende informasjon til Firebug for å vise for oss. Dette er ekstremt nyttig når du feilsøker et skript fordi du kan bruke det til å vise informasjon i ulike trinn i skriptet ditt for å se hvor ting går galt.
console.log ('Oh, Hei alle!'); 
Vi kan også bruke den til å vise informasjon som ellers ikke ville bli vist i nettleseren vår.
Lar bruker console.log () for å vise litt informasjon om vår "eske" div.
console.log (element);
Så vi har lært at vi kan bruke $ () for å få et element, men hva hvis vi ønsker å få informasjonen om mange elementer. Vi vil ikke bruke 100 forekomster av $ () som bare blir rotete. Dette er hvor $$ () kommer inn i spill!
Hvem trenger å få en, lar oss få mange!
Lar vi legge til 5 linker til vår side.
Jeg er den første linken
Jeg er den andre lenken
Jeg er den tredje lenken
Jeg er den fjerde lenken
Jeg er den femte lenken
... javascript-koder ... var lenker = $$ ('a'); console.log (koblinger);
Våre koblingsvariabler inneholder nå en rekke av alle våre koblinger.
Ok, så vi har skapt våre elementer, og nå har vi Mootools å snakke med dem, men dette er ikke noe moro. Den forreste sluttbrukeren ser ingen endringer, så vi kan flytte bort fra dette kjedelige backendspillet og flytte inn på noe litt morsommere!
Vi har nettopp dekket å få elementene ved hjelp av våre getter-funksjoner. Vi kan få et enkelt element ved hjelp av $ () og element-ID. Vi har også dekket å få flere elementer ved å bruke $$ () og elementstypen.
Når du bruker $$ (), kan vi enten passere HTML-taggenavnet eller bruke CSS-klassevalgere til å hente gruppen av elementer. Et raskt eksempel på grabbende klassenavn ville se slik ut.
varelementer = $$ ('myclass'); Det ville returnere en rekke av alle elementene på siden med css klassen av "klassen min".
Teorien er tørr som et bein, og det er det doktoren er for, men du kom hit for å få hendene skitne, så vi kan bli skitne.
Nå som vi får elementene våre, kan vi bruke setterfunksjonene til å manipulere elementene på skjermen.
Våre "eske" div ser ganske vanlig ut, så vi kan legge til litt farge på den. Vi har allerede satt vårt element inn i vår elementvariabel.
element.sett ('stiler', 'farge': 'rødt'); Vi bruker vår elementvariabel, og vi legger til set () -funksjonen ved å bruke element.set ().
Det er mange argumenter vi kan bruke for å endre elementet, men for nå skal vi bruke stiler. Deretter sender vi noen alternativer til våre stiler argument. Vi passerer fargealternativet og setter vår tekst til rød. Stiler kan bruke alle tilgjengelige css-alternativer. La oss endre bakgrunnsfargen mens vi er her. Du er velkommen til å leke med stilene og se hvor fargerikt du kan gjøre vårt bokselement.
element.set ('stiler', 'farge': 'rødt', 'bakgrunn': 'gul'); Våre "eske" elementet ser ikke ut litt mindre vanlig. Hvis vi ønsket å bruke mange stilarter til bokselementet, kan det ende opp med å bli mye unødvendig kode. Heldigvis kan vi bruke CSS-stiler og et annet sett argument for å kutte ned på kode. Gå videre og slett ut element.set () kode. Vi skal legge til noen css-stiler ved hjelp av inline css.
Merk: For å gjøre det enklere skal vi skrive vår CSS inne i filen, men når du lager et eget nettsted, er det god praksis å ha alle dine CSS og Javascript i separat fil.
Over din "eske" div kan legge til noen stilkoder og lage en klasse av .myclass.
Vi kan nå bruke sett ('style') for å legge til vår nye stil til vårt element.
element.set ( 'klasse', 'MyClass');
Et par andre argument vi kan bruke med sett er HTML og tekst. Noen grunnleggende eksempler på dette er:
element.set ( 'html','Hey Guys, nå er jeg modig
'); element.set ('tekst', 'Hei folkens, ingen html her');
Hvilket argument du bruker vil avhenge av hva du trenger å bruke den til. Hvis du ikke trenger å sende HTML-verdier, vil du bruke tekst og vise versa hvis du trenger å sende HTML-verdier.
Vi har brukt sett () for å legge til noen stiler til vår "eske" div, men vi kunne nettopp la klassen til div ved hjelp av HTML. Vi trenger egentlig ikke å bruke Mootools for å legge til stilen hvis vi bare endrer den før brukeren selv ser endringen. Det er her hendelsene kommer til nytte.
Lar oss gå videre og slette alle de koblingene vi opprettet og fjerner våre javascript-tagger.
Index.html-filen din bør nå bare inkludere denne koden:
Hei folkens!
Opprett en ny lenke og gi den en ID-knapp rett under ut "eske" div.
Nå skal vi legge til en begivenhet til denne knappen, slik at vi kan utføre noen kode når en bruker klikker koblingen. Vi bruker addEvent () for å gjøre dette.
$ ('button'). addEvent ('klikk', funksjon (e) ); Vi bruker den kjente $ () -funksjonen til å fortelle Mootools vi vil snakke med linken med en ID-knapp. Deretter legger vi til addEvent () og sender 2 argumenter. Det første argumentet er det arrangementet vi ønsker å fange opp som er når en bruker klikker koblingen. Det andre argumentet er en funksjon med en variabel av e. Denne funksjonen skal utføres når brukeren klikker på linken og variabelen av e passerer hendelsen. Du forstår hvorfor vi sender en variabel med funksjonen i dette neste trinnet.
... inne i addEvent ... e.stop ();
Vi tildeler stop () -funksjonen til vår variabel av e for å stoppe nettleseren for å sende koblingsaksjonen. Vanligvis når du klikker koblingen, oppdateres siden, og alle endringene dine vil gå tapt. e.stop () stopper nettleseren fra å forfriskne siden, slik at vi kan gjøre noen Mootools magi!
Nå har vi Mootools fange klikkhendelsen, så vi kan gjøre Mootools legge til vår klasse av .klassen til vår "eske" div når lenken er klikket.
... inne i addEvent () ... element.set ('klasse', 'myclass'); Lagre dette, oppdater siden og klikk koblingen din. Ved å klikke på linken, skal div nå ha noen styling til den. Vi gjorde alt det uten å oppdatere siden. Det er her Mootools begynner å bli veldig interessant.
Rask liten oppfriskning før vi fortsetter. Vi har lært hvordan du bruker getter-funksjoner ($ og $$) for å tillate Mootools å snakke med elementer på vår side. Da lærte vi at vi kunne bruke setterfunksjoner til å manipulere disse elementene. Hendelser tillater bruk for å fange brukerinteraksjon slik at vi kan manipulere elementer i realtid uten å måtte oppdatere siden for å gjenspeile hver endring.
Mootools vil også gi deg mulighet til å lage nye elementer på fluen, slik at vi kan la brukeren tilpasse siden. For å gjøre dette skal vi bruke de nye elementene () og inject () -funksjonene.
Lar oss starte med en ny HTML-fil. Slett alt fra index.html eller opprett en ny fil.
I vår fil skal vi lage en div og 2 linker. Gå videre og lag dem nå!
Vi skal bruke $$ () for å legge til en begivenhet i begge linkene våre på siden. Vi skal fange klikkhendelsen og deretter opprette et nytt element. Til slutt skal vi injisere vårt nye element i vår "resultat" div.
$$ ('a'). addEvent ('klikk', funksjon (e) e.stop ();); Vi bruker $$ ('a') til å hente alle koblingene og deretter legge til addEvent () til hver lenke. Vi gjør dette fordi det kutter ned på koding, slik at vi ikke trenger å finne hver ID av koblingene og opprette addEvents for dem. Vi skal bruke IDen til hver lenke for å finne ut hvilken stil vi må legge til. Kan piske opp litt rask css for boksene vi skal lage.
Nå er det på tide å lage våre elementer og injisere dem inn på siden.
var klasse = this.id; var boks = nytt element ('div', 'klasse': klasse); box.inject ($ ( 'resultat')); Først oppretter vi en variabel som kalles "klasse" Hold IDen til lenken som ble klikket. Vår neste linje tar seg av å skape elementet. Vi gjør dette ved å bruke nytt element () og deretter overføre noen argumenter. Det første argumentet er typen element vi ønsker å opprette. Vi ønsker å lage en div, så vi overfører en verdi av div. Det andre settet er våre alternativer. Vi ønsker å tildele en annen klasse, avhengig av hvilken kobling som ble klikket. Vi gjør dette ved først å fortelle funksjonen som vi vil sette "klasse" alternativ, så passerer vi vår variabel i klassen som kommer tilbake enten "Blue_box" eller "Grey_box".
Den siste linjen tar vårt nye element, som vi satte inn i en "eske" variabel og injiserer den i vår "resultat" div. Mootools vet å injisere det inn i "resultat" fordi vi passerer "resultat" div bruker en getter-metode som hovedalternativet.
Nå, hvis vi oppdaterer siden og begynner å klikke på linkene våre, bør du se at de små boksene blir opprettet på fluen og legges til siden.
På dette tidspunktet i opplæringen bør du være ganske komfortabel med å bruke getter og setterfunksjoner for å få Mootools til å snakke med elementene våre.
I den siste delen av denne opplæringen kommer jeg til å berøre noen av animasjons- og effektfunksjonene som Mootools tilbyr.
Lar skape en ny fil. Inne i den filen opprette en div med litt tekst på innsiden av den og en lenke.
Hei folkens!
Jeg har lagt til ID-er for hvert element slik at vi kan få Mootools å snakke med dem.
For å starte, la vi legge ved en hendelse til koblingen. Dette burde se veldig godt kjent nå.
$ ('button'). addEvent ('klikk', funksjon (e) e.stop ();); Nå som vi har Mootools å fange klikk hendelsen, la oss gjøre "eske" div fade inn og ut på hvert klikk.
. $ ( 'Boks') falme ( 'toggle');
Nå, når vi klikker på vår lenke, skal boksen div forsvinne. Hvis vi klikker på koblingen igjen, vises den igjen.
Fading er kult og alt, men vi kan legge til litt stil i boksen og se om vi kan få det til å vokse!
Vi skal bruke funksjonen tween () for å animere noen attributter av vår "eske" div.
Inne i vår klikkhendelse kan vi fjerne uttoning () -funksjonen og erstatte den med tween ().
//$('box').fade('toggle '); $ ('boks'). tween ('høyde', '200'); Nå, hvis vi klikker på lenken, bør boksen vår bli høyere.
Tween-funksjonen tar 2 argumenter. Den første er attributtet vi vil manipulere og det andre er en verdi. Vi ønsker å endre boksenes høyde og vi vil at den skal animere til 200px.
Hva om vi ønsket at boksen skulle vokse med 10px hver gang vi klikket på linken. Først må vi få den nåværende høyden på boksen. Jeg tror vi kan gjøre det med vår $ () getter-funksjon.
var boks = $ ('boks'); var height = box.getHeight (); var new_height = høyde + 10; box.tween ('høyde', new_height); Først tildeler vi vår "eske" div til en variabel av boksen. Deretter bruker vi en innebygd funksjon av Mootools kalt getHeight () for å få dagens høyde "eske" div. Vi ønsker at boksen skal vokse med 10px hver gang linken klikkes, slik at vi lager en ny variabel som heter new_height og tilordner den en verdi på høyde + 10. Dette tar den nåværende høyden og øker den med 10. Til slutt legger vi tweenen ( ) Funksjonen til boksen variabel, fortell det vi ønsker å animere høyden og send den verdien av new_height.
Hvis du klikker på linken, bør boksen vokse. Hvis du klikker på den igjen, vil den fortsette å vokse med hvert enkelt museklikk.
Mootools har en omfattende dokumentavdeling på deres hjemmeside. http://Mootools.net/docs/core
Hvis du planlegger å bruke Mootools, blir du veldig kjent med denne delen av nettstedet. Det er brutt opp i de forskjellige tilgjengelige klassene og funksjonene som Mootools har å tilby.
Den delen du vil besøke mest vil være Element-delen. Dette er delen som har all informasjon om hvordan Mootools kommuniserer og manipulerer elementene på siden.
Jeg har gitt dine brede slag for å hjelpe deg med å bli vant til hvordan Mootools fungerer, og hvis du vil fortsette å lære, foreslår jeg at du leser over noen av sidene i Mootools-dokumentene.
