Share
Che ci crediate o no, c'è molta interattività potente che puoi portare sul tuo sito usando javascript oltre ai menu di navigazione chiari! Questo tutorial ti aiuterà a trovare la tua mucca interiore introducendoti a una delle librerie javascript più potenti e modulari: MooTools! Creeremo uno strumento flessibile per evidenziare i prodotti o servizi dei tuoi siti utilizzando il framework javascript di MooTools. Inoltre, apprendi alcune delle molte ragioni per cui MooTools potrebbe essere la giusta libreria javascript per tutti i tuoi progetti futuri!
Quindi ecco cosa stiamo costruendo, è un meccanismo di rollover intelligente che funziona davvero bene come evidenziatore di un prodotto.
So cosa stai pensando ... Che cosa potrebbe offrire MooTools che potrebbe farmi interrompere la mia relazione di vecchia data con jQuery-O Prototype e Scriptaculous per quella materia!
Uno dei maggiori problemi che ho incontrato con l'uso di jQuery in passato, è il fatto che molti dei loro plugin sono creati e sviluppati in modo indipendente, quale MEANS, ti stai fidando di un estraneo per aggiornare attivamente il loro plugin poiché la libreria jQuery continua a rilasciare anche versioni nuove e nuove. Quando questo non riesce (e spesso lo fa) ti troverai alla ricerca della versione corretta della libreria principale che consentirà al tuo script di funzionare correttamente!
Forse Prototype e il suo partner ben noto nel crimine, Scriptaculous, sono più il tuo stile. In questo caso specifico verrai privato del tuo diritto di modularità e sarai obbligato a includere due librerie di grandi dimensioni su tutte le tue pagine o, in alcuni casi, anche un file di plugin!
Quindi se MooTools è così grande allora ... perché non viene usato di più? Perché non ci sono migliaia di tutorial e libri su ogni scaffale di una libreria ?! C'è una manciata di ragioni:
Tuttavia, troverete numerosi strumenti per lavorare con aree di scripting più uniche, come l'analisi dei file JSON, i cookie e l'incorporamento dei flash per nominarne alcuni. Inoltre, una comoda pagina di download che ti consente di scegliere esattamente ciò di cui hai bisogno per il tuo progetto in modo da poter garantire la dimensione del file più piccola possibile.
Vai alla pagina di MooTools Core Builder! Per questo particolare progetto, dovrai selezionare Fx.Morph, Element.Event, domready, e I selettori e premi "Download" usando YUI Compressor. Tutte le dipendenze vengono automaticamente selezionate per te. Fai attenzione, poiché alcuni browser aggiungeranno un'estensione ".txt" a un file javascript per la tua protezione. Questo ovviamente dovrà essere rimosso, e sentirsi libero di tagliare alcuni dei personaggi muscolosi nel nome del file.
Crea il documento HTML che utilizzerai per questo progetto e allega la libreria MooTools. La mia testa di pagina assomiglia a qualcosa del genere:
Mootools - Caratteristiche principali del prodotto! ...
Dai uno sguardo ai seguenti stili e HTML per vedere come ho tracciato la pagina.
Codice CSS:
Codice HTML:
Si noti come ho disposto il codice HTML. Non userò gli ID per selezionare la pagina o gli elementi a bolle e, invece, creare array di tutti gli elementi che contengono le due classi, il che consentirà a questo script di adattarsi indipendentemente dal numero di elementi che scegli di evidenziare! Tutte le bolle e le pagine sono contenute in un wrapper che è assolutamente posizionato all'interno del wrapper del sito (che contiene il nostro sfondo in cui tutto questo è seduto sopra).
Inizieremo creando una funzione wrapper per il nostro codice javascript che posiziona un listener di eventi sull'oggetto della finestra, attivando una volta che il DOM è stato caricato e pronto. Questo è importante perché abbiamo bisogno che il nostro script inizi immediatamente a modificare il DOM una volta disponibile.
Se NON usiamo questa funzione wrapper, è probabile che riceverai degli errori che affermano che alcuni elementi non esistono. Un'altra opzione potrebbe essere quella di posizionare il javascript incorporato alla fine del corpo del documento. Tuttavia, se decidi di allegare esternamente lo script, ti imbatterai nuovamente in questo problema, quindi è una buona abitudine entrare ora!
Un'altra opzione per "domready" consiste nell'utilizzare "load" che si attiva quando la pagina (le immagini incluse) sono completamente caricate. Non vogliamo questo per questo particolare progetto perché significa che le immagini (come le nostre bolle) potrebbero inizialmente lampeggiare sullo schermo prima di essere nascoste dal nostro copione.
Un'altra cosa importante da notare: se decidi di collegare questo script da un file '.js' esterno, dovrai assicurarti di collegarlo DOPO aver collegato la libreria MooTools alla testata del documento.
Accentsconagua
window.addEvent ('domready', function () ...); Successivamente iniziamo creando gli array sia per la nostra pagina che per gli elementi a bolle e impostiamo alcuni stili iniziali in linea.
window.addEvent ('domready', function () // Crea variabili (in questo caso due array) che rappresentano le nostre bolle e pagine var myPages = $$ ('. page'); var myBubbles = $$ ('. bubble') // Imposta l'opacità delle bolle a zero in modo che siano inizialmente nascoste // e attiva la visibilità per il loro contenitore su myBubbles.setStyle ('opacity', 0); $ ('bubbleWrap'). SetStyle ('visibilità', 'visibile')); Infine, associamo i listener di eventi alle icone delle pagine per attivare effetti di metamorfosi sulle bolle corrispondenti. Si noti che l'ordine delle bolle come disposto nell'HTML è l'ordine SAME delle icone della pagina. Questo è importante!
window.addEvent ('domready', function () // Crea variabili (in questo caso due array) che rappresentano le nostre bolle e pagine var myPages = $$ ('. page'); var myBubbles = $$ ('. bubble') // Imposta l'opacità delle bolle a zero in modo che siano inizialmente nascoste // e attiva la visibilità per il loro contenitore su myBubbles.setStyle ('opacity', 0); $ ('bubbleWrap'). SetStyle ('visibilità', 'visible') // Aggiungi i nostri eventi alle pagine myPages.each (function (el, i) / * Qui cambiamo la proprietà 'link' di default a 'cancel' per i nostri effetti di morph, che assicura che gli effetti vengano interrotti quando il mouse parte e inizia ad iniziare immediatamente l'effetto di metamorfosi chiamato * / el.set ('morph', link: 'cancel'); el.addEvents ('mouseenter': function () myBubbles [i]. morph ('opacity': 1, 'margin-top': '-15px');, 'mouseleave': function () myBubbles [i] .morph ('opacity': 0, 'margin-top ': 0);););); Noterai che stiamo associando una funzione utilizzando il metodo each () a tutti gli elementi dell'array 'myPages'. E per ogni funzione passiamo in 'el' che rappresenta l'elemento di pagina, e 'i' che è un numero intero che rappresenta il posizionamento di quell'elemento di pagina all'interno del suo array. Usiamo la variabile 'i' per chiamare l'effetto morph sull'elemento di bolla appropriato e corrispondente all'interno dell'array 'myBubbles'.
E questo è tutto! Abbastanza indolore, no? Assicurati di visualizzare la demo funzionante, e aggiungi anche la pagina dei documenti MooTools e la pagina di download di MooTools per riferimenti futuri! Spero che questo tutorial sia stato utile e non vedo l'ora di mettere insieme qualcosa di un po 'più avanzato nel prossimo futuro usando la potenza delle lezioni di MooTools!
