Share
Iniziare con qualsiasi tipo di framework può essere un'esperienza intimidatoria. Per aiutare, questa settimana abbiamo un tutorial approfondito e un lungo screencast per fornire un corso accelerato per questa popolare libreria JavaScript. Con così tanta attenzione su jQuery, è facile dimenticare che Mootools è una libreria altrettanto potente con un enorme seguito.
Questo tutorial include uno screencast disponibile per i membri Tuts + Premium.
Dopo il trasferimento iniziale a Mootools, mi sentivo frustrato dalla mancanza di supporto da parte della community e ho finito per tornare immediatamente a Prototype. Dopo essermi sentito più a mio agio nel lavorare con i framework, sono tornato a Mootools e non mi sono voltato indietro.
Con questo tutorial, cercherò di assicurarmi di avere un ottimo inizio nel framework Mootools. Ti spiegherò come scaricare e configurare tutto e alcuni degli elementi base di Mootools. Dopo di che passerò un po 'di tempo a guidarti su come usare Mootools Docs, che è un sito che visiterai molto spesso durante l'uso di Mootools..
Va bene, abbastanza storie, ci sporchiamo le mani.
La cosa bella di lavorare esclusivamente con javascript è che non è necessario eseguire i file su un server web o locale. Tutto ciò di cui hai bisogno per questo tutorial è:
Per questo tutorial userò Firefox e Firebug per mostrarti alcuni suggerimenti per il debug, quindi ti consiglio di usare firefox e Firebug. Firebug renderà il lavoro con Mootools, o qualsiasi struttura, 100x più facile.
Puoi scaricare firebug qui
Vai su www.Mootools.net/download
Per ora includeremo sia le librerie Core che More. Questo è solo per assicurarsi che non ci manchi niente. Quando ti senti più a tuo agio con Mootools, ti renderai conto che non tutti i componenti sono necessari per applicazioni specifiche, quindi puoi creare librerie personalizzate Mootools per soddisfare le tue necessità e mantenere le dimensioni dei file piccole.
Scarica il file Mootools 1.2.3 YUI compresso e salvalo sul desktop.
Passare al più costruttore, selezionare ogni opzione e scaricare il file compresso YUI.
Creiamo una nuova cartella chiamata Moo e all'interno di quella cartella creiamo un'altra cartella chiamata inc. Solo per semplificare le cose, crea un altro file nella nostra cartella inc chiamata js e lancia i due file Mootools all'interno di quella cartella.
Dentro la nostra cartella Moo, crea un nuovo file chiamato index.html e apri quello sucker.
È aperto? Bene, ora aprilo anche in Firefox. Dovresti vedere una pagina vuota. Ritorna al tuo file index.html nel tuo editor.
Per includere Mootools nel nostro script, dobbiamo aggiungere 2 righe di codice al tuo file HTML. Se hai mai incluso un file javascript in uno script, questo ti sarà molto familiare.
Ora siamo pronti e pronti per partire!
Per ottenere Mootools per parlare con elementi sulla nostra pagina usiamo la funzione $ () per ottenere un elemento dal suo ID.
Creiamo un nuovo div, diamo un ID e un testo e poi facciamo parlare Mootools ad esso.
Dopo di ciò, inseriamo alcuni tag javascript in modo che possiamo iniziare a scrivere alcuni Mootools.Hey ragazzi!
Abbiamo creato div e gli abbiamo dato un ID di "scatola". Abbiamo inserito del testo all'interno di esso e abbiamo creato alcuni tag script in modo che possiamo iniziare a entrare in qualche bontà Mootools.
Se usiamo la funzione $ e passiamo l'id della nostra scatola, possiamo vedere che Mootools non sta ottenendo tutti gli attributi del nostro "scatola" div. Il nostro elemento variabile ora contiene tutti quei dati.
Accentsconagua
var element = $ ('box'); Se aggiorniamo la pagina, non possiamo vedere visivamente che qualcosa stia accadendo, ma sappiamo che le cose stanno accadendo in background. Qui è dove console.log () e Firebug entrano in gioco.
Se apri Firebug, dovresti vedere una console vuota. Usando console.log () possiamo passare le informazioni a Firebug per mostrarle per noi. Ciò è estremamente utile quando si esegue il debug di uno script perché è possibile utilizzarlo per visualizzare le informazioni in vari passaggi dello script per vedere dove si verificano errori.
console.log ('Oh, Ciao a tutti!'); 
Possiamo anche usarlo per visualizzare informazioni che altrimenti non verrebbero visualizzate nel nostro browser.
Consente di utilizzare console.log () per visualizzare alcune informazioni sul nostro "scatola" div.
console.log (elemento);
Quindi abbiamo imparato che possiamo usare $ () per ottenere un elemento, ma cosa succede se vogliamo ottenere le informazioni di molti elementi. Non vogliamo utilizzare 100 istanze di $ () che saranno solo confuse. È qui che entra in gioco il $$ ()!
Chi ha bisogno di averne uno, ne ha molti!
Aggiungiamo 5 link alla nostra pagina.
Sono il primo link
Sono il secondo link
Sono il terzo link
Sono il quarto link
Sono il quinto link
... tag javascript ... var links = $$ ('a'); console.log (link);
La nostra variabile link ora contiene una matrice di tutti i nostri link.
Va bene, quindi abbiamo creato i nostri elementi e ora abbiamo Mootools che parla con loro, ma questo non è affatto divertente. Il front-end non sta vedendo alcuna modifica, quindi spostiamoci da questo noioso back-end e passiamo a qualcosa di un po 'più divertente!
Abbiamo appena coperto di ottenere gli elementi usando le nostre funzioni getter. Possiamo ottenere un singolo elemento usando $ () e l'ID degli elementi. Abbiamo anche parlato di ottenere più elementi usando $$ () e il tipo di elemento.
Quando si usa $$ () possiamo passare il nome del tag HTML o usare selettori di classe CSS per afferrare un gruppo di elementi. Un rapido esempio di afferrare i nomi delle classi sarebbe simile a questo.
var elements = $$ ('. myclass'); Ciò restituirebbe una matrice di tutti gli elementi nella pagina con la classe css di "la mia classe".
La teoria è secca come un osso e questo è ciò che i documenti sono per ma sei venuto qui per sporcarti le mani, quindi lascia che ti sporchi.
Ora che stiamo ottenendo i nostri elementi, usiamo le funzioni setter per manipolare gli elementi sullo schermo.
Nostro "scatola" div è piuttosto semplice, quindi aggiungi un po 'di colore. Abbiamo già impostato il nostro elemento nella nostra variabile elemento.
element.set ('styles', 'color': 'red'); Usiamo la nostra variabile elemento e colleghiamo la funzione set () usando element.set ().
Ci sono molti argomenti che possiamo usare per cambiare il nostro elemento, ma per ora useremo gli stili. Successivamente passiamo alcune opzioni al nostro argomento di stili. Stiamo passando l'opzione di colore e impostando il nostro testo su rosso. Gli stili possono utilizzare tutte le opzioni CSS disponibili. Cambiamo il colore di sfondo mentre siamo qui. Sentiti libero di giocare con gli stili e di vedere quanto colorato puoi rendere il nostro elemento scatolato.
element.set ('styles', 'color': 'red', 'background': 'yellow'); Nostro "scatola" l'elemento non sembra un po 'meno semplice. Se volessimo applicare molti stili al nostro elemento scatola, potrebbe finire per essere un sacco di codice non necessario. Fortunatamente, possiamo usare gli stili CSS e un altro argomento set per ridurre il codice. Vai avanti ed elimina il codice element.set (). Stiamo per aggiungere alcuni stili CSS utilizzando css in linea.
Nota: per semplificare le cose, scriviamo il nostro CSS all'interno del file, ma quando creiamo un sito web è buona norma avere tutti i tuoi CSS e Javascript in un file separato.
Sopra il tuo "scatola" div lascia aggiungere alcuni tag di stile e creare una classe di .myclass.
Ora possiamo usare set ('style') per aggiungere il nostro nuovo stile al nostro elemento.
element.set ( 'classe', 'MyClass');
Alcuni altri argomenti che possiamo usare con set sono HTML e testo. Alcuni esempi di base di questo sono:
element.set ( 'html','Hey Ragazzi, ora sono audace
'); element.set ('text', 'Hey guys, no html here');
L'argomento che utilizzerai dipenderà da cosa devi usarlo. Se non è necessario passare valori HTML, si utilizzerà il testo e viceversa se è necessario passare valori HTML.
Abbiamo usato set () per aggiungere alcuni stili al nostro "scatola" div, ma avremmo potuto aggiungere la classe al div usando HTML. Non abbiamo davvero bisogno di usare Mootools per aggiungere lo stile se lo stiamo solo cambiando prima che l'utente veda la modifica. È qui che gli eventi tornano utili.
Andiamo avanti e cancelliamo tutti quei link che abbiamo creato e cancelliamo i nostri tag javascript.
Il tuo file index.html ora dovrebbe includere solo questo codice:
Hey ragazzi!
Crea un nuovo collegamento e assegnagli un ID del pulsante "scatola" div.
Ora stiamo per aggiungere un evento a questo pulsante in modo che possiamo eseguire del codice quando un utente fa clic sul link. Usiamo addEvent () per fare questo.
$ ('button'). addEvent ('click', function (e) ); Stiamo usando la familiare funzione $ () per dire a Mootools che vogliamo parlare al link con un pulsante ID. Successivamente colleghiamo addEvent () e passiamo 2 argomenti. Il primo argomento è l'evento che vogliamo catturare, ovvero quando un utente fa clic sul link. Il secondo argomento è una funzione con una variabile di e. Questa funzione verrà eseguita quando l'utente fa clic sul collegamento e la variabile di e passa l'evento. Capirai perché passiamo una variabile con la funzione nel prossimo passaggio.
... all'interno di addEvent ... e.stop ();
Assegniamo la funzione stop () alla nostra variabile di e per fermare il browser per inviare l'azione di collegamento. Di solito quando fai clic sul link, la pagina si aggiorna e tutte le tue modifiche andranno perse. e.stop () impedisce al browser di aggiornare la pagina in modo da poter eseguire alcune magie Mootools!
Ora abbiamo Mootools per catturare l'evento click, quindi facciamo in modo che Mootools aggiunga la nostra classe di .myclass al nostro "scatola" div quando si fa clic sul collegamento.
... all'interno di addEvent () ... element.set ('class', 'myclass'); Salva questo, aggiorna la pagina e fai clic sul tuo link. Facendo clic sul collegamento, il div dovrebbe ora avere un po 'di stile. Abbiamo fatto tutto ciò senza dover aggiornare la pagina. È qui che Mootools inizia a diventare molto interessante.
Rapido piccolo ripasso prima di continuare. Abbiamo imparato come utilizzare le funzioni getter ($ e $$) per consentire a Mootools di comunicare con elementi sulla nostra pagina. Poi abbiamo imparato che potremmo usare le funzioni setter per manipolare quegli elementi. Gli eventi consentono di catturare l'interazione dell'utente in modo da poter manipolare gli elementi in tempo reale senza dover aggiornare la pagina per riflettere ogni cambiamento.
Mootools ti permetterà anche di creare nuovi elementi al volo in modo che possiamo permettere all'utente di personalizzare la pagina. Per fare questo, utilizzeremo le nuove funzioni Element () e inject ().
Iniziamo con un nuovo file HTML. Elimina tutto da index.html o crea un nuovo file.
Nel nostro file creeremo un div e 2 link. Vai avanti e crea quelli ora!
Utilizzeremo $$ () per aggiungere un evento a entrambi i nostri link nella pagina. Stiamo per acquisire l'evento click e quindi creare un nuovo elemento. Infine inseriremo il nostro nuovo elemento nel nostro "risultato" div.
$$ ('a'). addEvent ('click', function (e) e.stop ();); Usiamo $$ ('a') per prendere tutti i link e quindi aggiungere addEvent () a ciascun link. Lo facciamo perché riduce la codifica, quindi non dobbiamo trovare ogni ID dei collegamenti e creare addEvents per loro. Useremo l'ID di ciascun link per determinare quale stile dobbiamo aggiungere. Prepariamo dei css veloci per le scatole che creeremo.
Ora è il momento di creare i nostri elementi e iniettarli nella pagina.
var class = this.id; var box = new Element ('div', 'class': class); box.inject ($ ( 'risultato')); Per prima cosa stiamo creando una variabile chiamata "classe" tenere premuto l'ID del collegamento su cui è stato fatto clic. La nostra prossima linea si occupa di creare l'elemento. Lo facciamo usando il nuovo Element () e poi passando alcuni argomenti. Il primo argomento è il tipo di elemento che vogliamo creare. Vogliamo creare un div, quindi passiamo un valore di div. Il secondo set sono le nostre opzioni. Vogliamo assegnare una classe diversa a seconda del collegamento su cui è stato fatto clic. Lo facciamo dicendo innanzitutto alla funzione che vogliamo impostare "classe" opzione, quindi passiamo la nostra variabile di classe che restituirà entrambi "Blue_box" o "Grey_box".
L'ultima riga sta prendendo il nostro nuovo elemento, che abbiamo inserito in "scatola" variabile e lo sta iniettando nel nostro "risultato" div. Mootools sa iniettarlo "risultato" perché stiamo passando il "risultato" div usando un metodo getter come opzione principale.
Ora, se aggiorniamo la pagina e facciamo clic sui nostri collegamenti, dovresti vedere che piccole scatole vengono create al volo e vengono aggiunte alla pagina.
A questo punto del tutorial dovresti essere abbastanza a tuo agio nell'usare le funzioni getter e setter per convincere Mootools a parlare con i nostri elementi.
Per l'ultima parte di questo tutorial ho intenzione di toccare alcune delle funzioni di animazione ed effetti che Mootools offre.
Consente di creare un altro nuovo file. Dentro quel file crea un div con del testo all'interno e un link.
Hey ragazzi!
Ho aggiunto degli ID a ciascun elemento in modo che Mootools possa parlare con loro.
Per iniziare, allegare un evento al link. Questo dovrebbe sembrare molto familiare ormai.
$ ('button'). addEvent ('click', function (e) e.stop ();); Ora che abbiamo Mootools che cattura l'evento click, facciamo il nostro "scatola" div dissolvenza in entrata e in uscita ad ogni clic.
. $ ( 'Box') dissolvenza ( 'commutazione');
Ora, quando clicchiamo sul nostro link, il box div dovrebbe svanire. Se facciamo di nuovo clic sul link, riapparirà.
Lo sbiadimento è bello e tutto, ma aggiungiamo un po 'di stile alla scatola e vediamo se riusciamo a farla crescere!
Useremo la funzione tween () per animare alcuni attributi del nostro "scatola" div.
All'interno del nostro evento click, rimuoviamo la funzione fade () e la sostituiamo con tween ().
//$('box').fade('toggle '); $ ('box'). tween ('height', '200'); Ora se clicchiamo sul link, la nostra scatola dovrebbe diventare più alta.
La funzione tween richiede 2 argomenti. Il primo è l'attributo che vogliamo manipolare e il secondo è un valore. Vogliamo cambiare l'altezza della scatola e vogliamo che si animi a 200px.
E se volessimo che la scatola crescesse di 10px ogni volta che facevamo clic sul link. Per prima cosa dovremmo ottenere l'altezza attuale della scatola. Penso che possiamo farlo con la nostra funzione getter $ ().
var box = $ ('box'); var height = box.getHeight (); var new_height = height + 10; box.tween ('height', new_height); Per prima cosa assegniamo il nostro "scatola" div a una variabile di box. Quindi usiamo una funzione incorporata di Mootools chiamata getHeight () per ottenere l'altezza corrente del nostro "scatola" div. Vogliamo che la scatola cresca di 10px ogni volta che si fa clic sul link, quindi creiamo una nuova variabile chiamata new_height e assegna un valore di altezza + 10. Questo sta prendendo l'altezza corrente e aumentandola di 10. Infine colleghiamo l'interpolazione ( ) funzione della nostra variabile box, diciamo che vogliamo animare l'altezza e passarla il valore di new_height.
Se fai clic sul link, la scatola dovrebbe crescere. Se si fa clic di nuovo, continuerà a crescere con ogni clic del mouse.
Mootools ha una vasta sezione di documenti sul loro sito web. http://Mootools.net/docs/core
Se prevedi di utilizzare Mootools, acquisirai molta familiarità con questa sezione del loro sito. È suddiviso nelle diverse classi e funzioni disponibili che Mootools ha da offrire.
La sezione che visiterai di più sarà la sezione Elemento. Questa è la sezione che contiene tutte le informazioni su come Mootools comunica e manipola gli elementi sulla pagina.
Ho dato i tuoi ampi tratti per aiutarti ad abituarti a come funziona Mootools e se vuoi continuare ad imparare ti suggerisco di leggere alcune pagine dei documenti Mootools.
