Share
Aan de slag met elk type kader kan een intimiderende ervaring zijn. Om te helpen hebben we deze week een uitgebreide tutorial en een lange screencast om een crashcursus voor deze populaire JavaScript-bibliotheek te bieden. Met zo veel focus op jQuery, is het gemakkelijk om te vergeten dat Mootools een even krachtige bibliotheek is met een enorme aanhang.
Deze tutorial bevat een screencast die beschikbaar is voor leden van Tuts + Premium.
Na de eerste verhuizing naar Mootools was ik gefrustreerd door het gebrek aan gemeenschapsondersteuning en belandde ik onmiddellijk in de richting van Prototype. Nadat ik meer vertrouwd was met het werken met kaders, ben ik teruggegaan naar Mootools en heb ik niet achterom gekeken.
Met deze tutorial ga ik proberen ervoor te zorgen dat je een goed begin hebt met het Mootools-framework. Ik zal je helpen bij het downloaden en instellen van alles en enkele basiselementen van Mootools. Daarna ga ik wat tijd besteden aan het doornemen van de Mootools Docs, een site die je heel vaak zult bezoeken tijdens het gebruik van Mootools..
Oké, genoeg verhalen, laten we onze handen vies maken.
Het leuke van puur werken met javascript is dat we de bestanden niet op een web of lokale server hoeven uit te voeren. Alles wat u nodig hebt voor deze zelfstudie is:
Voor deze zelfstudie zal ik Firefox en Firebug gebruiken om u enkele foutopsporingstips te laten zien, dus ik raad aan dat u zowel firefox als Firebug gebruikt. Firebug maakt het werken met Mootools of een ander raamwerk 100 keer eenvoudiger.
Je kunt firebug hier downloaden
Ga naar www.Mootools.net/download
Voor nu gaan we zowel de Core- als de More-bibliotheek opnemen. Dit is alleen om ervoor te zorgen dat we niets missen. Wanneer u zich meer op uw gemak voelt met Mootools, zult u zich realiseren dat niet alle componenten nodig zijn voor specifieke toepassingen, dus u kunt op maat gemaakte Mootools-bibliotheken maken die passen bij uw behoefte en de bestandsgroottes klein houden.
Download het Mootools 1.2.3 YUI gecomprimeerde bestand en sla het op uw bureaublad op.
Ga naar de meer builder, selecteer elke optie en download het YUI gecomprimeerde bestand.
Laten we een nieuwe map maken met de naam Moo en binnen die map kunt u een andere map maken met de naam inc. Gewoon om dingen eenvoudiger te maken, maak nog een bestand aan in onze inc map met de naam js en gooi beide Mootools-bestanden in die map.
Maak binnen onze map Moo een nieuw bestand met de naam index.html en open die sucker.
Het is open? Goed, open het nu ook in Firefox. Je zou een blanco pagina moeten zien. Schakel terug naar uw index.html-bestand in uw editor.
Om Mootools in ons script op te nemen, moeten we twee regels code aan uw HTML-bestand toevoegen. Als u ooit een JavaScript-bestand in een script hebt opgenomen voordat dit heel vertrouwd voor u is.
We zijn nu klaar en klaar om te starten!
Om Mootools zover te krijgen dat hij met elementen op onze pagina praat, gebruiken we de functie $ () om een element met zijn ID te krijgen.
Laten we een nieuwe div maken, een ID en wat tekst geven en Mootools er vervolgens mee laten praten.
Laten we daarna wat javascript-tags plaatsen, zodat we kunnen beginnen met het schrijven van enkele Mootools.Hallo jongens!
We hebben div gemaakt en hebben er een ID van gegeven "doos". We hebben wat tekst erin gestopt en een aantal script-tags gemaakt, zodat we kunnen beginnen met het invoeren van Mootools-goedheid.
Als we de functie $ gebruiken en de ID van onze doos doorgeven, kunnen we zien dat Mootools niet alle kenmerken van onze "doos" div. Ons variabele element bevat nu al die gegevens.
Accentsconagua
var element = $ ('box'); Als we de pagina vernieuwen, kunnen we niet zichtbaar zien dat er iets gebeurt, maar we weten dat er dingen gaande zijn op de achtergrond. Dit is waar console.log () en Firebug in het spel komen.
Als je Firebug opent, zou je een lege console moeten zien. Met console.log () kunnen we informatie aan Firebug doorgeven om voor ons weer te geven. Dit is uiterst handig bij het debuggen van een script, omdat u het kunt gebruiken om informatie in verschillende stappen van uw script weer te geven om te zien waar dingen falen.
console.log ('Oh, hoi allemaal!'); 
We kunnen het ook gebruiken om informatie weer te geven die anders niet zou worden weergegeven in onze browser.
Laten we console.log () gebruiken om wat informatie over ons weer te geven "doos" div.
console.log (element);
Dus we hebben geleerd dat we $ () kunnen gebruiken om een element te krijgen, maar wat als we de informatie van veel elementen willen krijgen. We willen geen 100 exemplaren van $ () gebruiken die gewoon rommelig worden. Dit is waar de $$ () in het spel komt!
Wie er een moet krijgen, laat er veel halen!
Laten we 5 links toevoegen aan onze pagina.
Ik ben de eerste schakel
Ik ben de tweede link
Ik ben de derde schakel
Ik ben de vierde schakel
Ik ben de vijfde schakel
... javascript tags ... var links = $$ ('a'); console.log (links);
Onze links-variabele bevat nu een reeks van al onze links.
Oké, dus we hebben onze elementen gemaakt en nu hebben we Mootools met ze aan het praten, maar dit is niet leuk. De gebruiker van het front-end ziet geen veranderingen, dus laten we weggaan van dit saaie backend-materiaal en iets leukers gaan gebruiken!
We hebben zojuist de elementen behandeld met onze getterfuncties. We kunnen een enkel element krijgen met $ () en de elementen-ID. We hebben ook behandeld om meerdere elementen te krijgen met $$ () en het elementtype.
Wanneer u $$ () gebruikt, kunnen we de HTML-tagnaam doorgeven of CSS-categorieselectors gebruiken om een groep elementen te verzamelen. Een snel voorbeeld van het nemen van klassenamen zou er als volgt uit kunnen zien.
var elements = $$ ('. myclass'); Dat zou een array van alle elementen op de pagina retourneren met de css-klasse van "mijn klas".
Theorie is droog als een bot en daar zijn de docs voor maar je bent hier gekomen om je handen vuil te maken, dus laten we vies worden.
Nu we onze elementen krijgen, kunnen we de functies van de setter gebruiken om de elementen op het scherm te manipuleren.
Onze "doos" div ziet er nogal gewoon uit dus laten we er wat kleur aan toevoegen. We hebben ons element al in onze elementvariabele geplaatst.
element.set ('styles', 'color': 'red'); We gebruiken onze elementvariabele en we maken de set () -functie vast met element.set ().
Er zijn veel argumenten die we kunnen gebruiken om ons element te veranderen, maar voor nu gaan we stijlen gebruiken. Vervolgens geven we enkele opties door aan ons stijlenargument. We geven de kleuroptie door en stellen onze tekst in op rood. Stijlen kunnen alle beschikbare CSS-opties gebruiken. Laten we de achtergrondkleur veranderen terwijl we hier zijn. Voel je vrij om met de stijlen te spelen en zie hoe kleurrijk je ons box-element kunt maken.
element.set ('styles', 'color': 'red', 'background': 'yellow'); Onze "doos" element ziet er niet iets minder duidelijk uit. Als we veel stijlen zouden willen toepassen op ons box-element, zou het uiteindelijk een hoop onnodige code kunnen zijn. Gelukkig kunnen we CSS-stijlen en een ander setargument gebruiken om de code te verlagen. Ga je gang en wis element.set () code. We gaan enkele css-stijlen toevoegen met behulp van inline css.
Opmerking: om dingen gemakkelijker te maken, gaan we onze CSS in het bestand schrijven, maar wanneer u een echte website maakt, is het een goede gewoonte om al uw CSS en Javascript in een apart bestand te hebben.
Boven je "doos" div laat enkele stijltags toevoegen en een klasse van .myclass maken.
We kunnen nu set ('stijl') gebruiken om onze nieuwe stijl aan ons element toe te voegen.
element.set ( 'klasse', 'myclass');
Een paar andere argumenten die we kunnen gebruiken met set zijn HTML en tekst. Enkele basisvoorbeelden hiervan zijn:
element.set ( 'html','Hallo jongens, nu ben ik vetgedrukt
'); element.set ('text', 'Hey guys, no html here');
Welk argument u gebruikt, hangt af van waar u het voor moet gebruiken. Als u geen HTML-waarden hoeft door te geven, gebruikt u tekst en omgekeerd als u HTML-waarden wilt doorgeven.
We hebben set () gebruikt om een aantal stijlen aan onze toe te voegen "doos" div, maar we hadden de klasse net kunnen toevoegen aan de div met behulp van HTML. We hoeven Mootools niet echt te gebruiken om de stijl toe te voegen als we deze alleen maar wijzigen voordat de gebruiker de wijziging ziet. Dit is waar gebeurtenissen van pas komen.
Laten we doorgaan en al die links verwijderen die we hebben gemaakt en onze javascript-tags wissen.
Uw index.html-bestand zou nu alleen deze code moeten bevatten:
Hallo jongens!
Maak een nieuwe link en geef hem een ID van de knop rechtsonder "doos" div.
Nu gaan we een evenement toevoegen aan deze knop, zodat we een aantal code kunnen uitvoeren wanneer een gebruiker op de link klikt. We gebruiken addEvent () om dit te doen.
$ ('knop'). addEvent ('klik', functie (e) ); We gebruiken de vertrouwde $ () functie om Mootools te vertellen dat we met de link willen praten met een ID van de knop. Vervolgens voegen we de argumenten addEvent () en pass 2 toe. Het eerste argument is de gebeurtenis die we willen vastleggen, namelijk wanneer een gebruiker op de koppeling klikt. Het tweede argument is een functie met een variabele van e. Deze functie wordt uitgevoerd als de gebruiker op de link klikt en de variabele van e de gebeurtenis passeert. U zult begrijpen waarom we in deze volgende stap een variabele met de functie doorgeven.
... binnen addEvent ... e.stop ();
We kennen de functie stop () toe aan onze variabele e om de browser te stoppen de linkactie te verzenden. Meestal wanneer u op de koppeling klikt, wordt de pagina vernieuwd en gaan al uw wijzigingen verloren. e.stop () stopt de browser om de pagina te verversen, zodat we wat Mootools magie kunnen doen!
Nu hebben we Mootools de klik-gebeurtenis laten vastleggen, zodat we Mootools onze klasse van .myclass aan onze kunnen toevoegen "doos" div wanneer op de link wordt geklikt.
... binnen addEvent () ... element.set ('class', 'myclass'); Sla dit op, vernieuw de pagina en klik op uw link. Door op de link te klikken, moet de div nu een stijl hebben. We hebben dat allemaal gedaan zonder de pagina te vernieuwen. Dit is waar Mootools erg interessant begint te worden.
Snelle kleine opfriscursus voordat we verder gaan. We hebben geleerd hoe je getterfuncties ($ en $$) kunt gebruiken om Mootools met elementen op onze pagina te laten praten. Toen kwamen we erachter dat we setter-functies konden gebruiken om die elementen te manipuleren. Gebeurtenissen laten gebruikersinteractie vastleggen, zodat we elementen in realtime kunnen manipuleren zonder de pagina te hoeven vernieuwen om elke verandering te weerspiegelen.
Met Mootools kunt u ook nieuwe elementen maken, zodat we de gebruiker de pagina kunnen laten aanpassen. Om dit te doen zullen we de nieuwe Element () en injection () functies gebruiken.
Laten we beginnen met een nieuw HTML-bestand. Verwijder alles van index.html of maak een nieuw bestand.
In ons bestand gaan we een div en 2 links maken. Ga je gang en creëer die nu!
We gaan de $$ () gebruiken om een evenement aan beide links op de pagina toe te voegen. We gaan de klikgebeurtenis vastleggen en vervolgens een nieuw element maken. Ten slotte gaan we ons nieuwe element injecteren in onze "resultaat" div.
$$ ('a'). addEvent ('klik', functie (e) e.stop ();); We gebruiken $$ ('a') om alle links te grijpen en vervolgens addEvent () aan elke link te koppelen. We doen dit omdat het de codering vermindert, zodat we niet elke ID van de links hoeven te vinden en addEven voor ze hoeven te maken. We gaan de ID van elke link gebruiken om te bepalen welke stijl we moeten toevoegen. Laten we wat snelle css maken voor de dozen die we gaan maken.
Nu is het tijd om onze elementen te maken en ze in de pagina te injecteren.
var class = this.id; var box = nieuw Element ('div', 'class': class); box.inject ($ ( 'resultaat')); Eerst maken we een variabele genaamd "klasse" Houd de ID vast van de link waarop is geklikt. Onze volgende regel zorgt voor het creëren van het element. We doen dit door het nieuwe Element () te gebruiken en vervolgens enkele argumenten door te geven. Het eerste argument is het type element dat we willen maken. We willen een div maken, dus we geven een waarde van div. De tweede set is onze opties. We willen een andere klasse toewijzen, afhankelijk van op welke link is geklikt. We doen dit door eerst de functie te vertellen dat we het willen instellen "klasse" optie, dan passeren we onze variabele van klasse die ook zal terugkeren "blauwe doos" of "Grey_box".
De laatste regel is ons nieuwe element, dat we in een geplaatst hebben "doos" variabel en injecteert het in onze "resultaat" div. Mootools weet het te injecteren "resultaat" omdat we de "resultaat" div met behulp van een gettermethode als de belangrijkste optie.
Als we nu de pagina vernieuwen en beginnen met het klikken op onze links, zou u moeten zien dat kleine vakjes direct worden gemaakt en aan de pagina worden toegevoegd.
Op dit punt in de tutorial zou je redelijk comfortabel moeten zijn met het gebruik van getter- en setterfuncties om Mootools zover te krijgen dat ze met onze elementen praten.
Voor het laatste deel van deze tutorial ga ik iets vertellen over de animatie- en effectfuncties die Mootools aanbiedt.
Laat een nieuw bestand maken. In dat bestand maak je een div met wat tekst erin en een link.
Hallo jongens!
Ik heb ID's aan elk element toegevoegd, zodat we Mootools met hen kunnen laten praten.
Om te beginnen, laten we een evenement koppelen aan de link. Dit zou nu heel vertrouwd moeten lijken.
$ ('knop'). addEvent ('klik', functie (e) e.stop ();); Nu we Mootools de klikgebeurtenis hebben laten maken, laten we onze "doos" div fade in en uit bij elke klik.
. $ ( 'Box') verdwijnen ( 'toggle');
Nu, wanneer we op onze link klikken, moet het vak div verdwijnen. Als we opnieuw op de link klikken, wordt deze opnieuw weergegeven.
Fading is cool en alles, maar laten we wat stijl toevoegen aan de box en kijken of we het kunnen laten groeien!
We gaan de functie tween () gebruiken om sommige kenmerken van ons te animeren "doos" div.
In onze klikgebeurtenis kan de functie fade () worden verwijderd en vervangen door tween ().
//$('box').fade('toggle); $ ('box'). tween ('height', '200'); Als we nu op de link klikken, moet onze box groter worden.
De functie tween heeft twee argumenten nodig. De eerste is het attribuut dat we willen manipuleren en de tweede is een waarde. We willen de hoogte van de box wijzigen en we willen dat deze animeert tot 200 px.
Wat als we wilden dat de box met 10px zou groeien elke keer dat we op de link klikten. Eerst zouden we de huidige hoogte van de doos moeten krijgen. Ik denk dat we dat kunnen doen met onze $ () getter-functie.
var box = $ ('box'); var height = box.getHeight (); var new_height = height + 10; box.tween ('height', new_height); Eerst wijzen we onze toe "doos" div naar een variabele van vak. Vervolgens gebruiken we een ingebouwde functie van Mootools genaamd getHeight () om de huidige hoogte van onze te krijgen "doos" div. We willen dat de box met 10 px toeneemt telkens als er op de link wordt geklikt, dus we maken een nieuwe variabele met de naam new_height en wijzen deze een waarde van height + 10 toe. Dit neemt de huidige hoogte en verhoogt deze met 10. Ten slotte koppelen we de tween ( ) functie om onze box variabele, vertel het we willen de hoogte animeren en geven de waarde van new_height.
Als u op de link klikt, zou het vak moeten groeien. Als u hier nogmaals op klikt, blijft deze met elke muisklik groeien.
Mootools heeft een uitgebreid documentgedeelte op hun website. http://Mootools.net/docs/core
Als u van plan bent om Mootools te gebruiken, zult u zeer bekend worden met dit gedeelte van hun site. Het is opgedeeld in de verschillende beschikbare klassen en functies die Mootools te bieden heeft.
De sectie die u het meest zult bezoeken, zal het Element-gedeelte zijn. Dit is de sectie met alle informatie over hoe Mootools communiceert en de elementen op de pagina manipuleert.
Ik heb je brede streken gegeven om je te laten wennen aan hoe Mootools werkt en als je wilt blijven leren, stel ik voor dat je een paar pagina's in de Mootools-documenten leest..
