Share
Credeți-vă sau nu, există o multitudine de interactivități puternice pe care le puteți aduce pe site-ul dvs. folosind javascript pe lângă meniurile de navigare subțire! Acest tutorial vă va ajuta să vă găsiți vaca dvs. internă, introducându-vă la una dintre cele mai puternice și modulare biblioteci javascript - MooTools! Vom crea un instrument flexibil pentru a evidenția produsele sau serviciile site-urilor dvs. utilizând cadrul javascript al MooTools. De asemenea, aflați câteva dintre motivele pentru care MooTools ar putea fi biblioteca potrivită pentru toate proiectele dvs. viitoare!
Deci, aici este ceea ce construim, este un mecanism inteligent de răsturnare care funcționează foarte bine ca un marcator de produs.
Știu ce te gândești ... Ce ar putea MooTools-ul să le ofere, ceea ce ar putea să-mi provoace întreruperea relației mele de lungă durată cu jQuery-Or Prototype și Scriptaculous!
Una dintre cele mai mari probleme pe care le-am întâlnit cu folosirea jQuery în trecut este faptul că atât de multe dintre pluginurile lor sunt create și dezvoltate independent - ceea ce înseamnă că îți încredințezi un străin pentru a-ți actualiza în mod activ pluginul deoarece biblioteca jQuery continuă să elibereze versiuni mai noi și mai noi. Atunci când acest lucru nu reușește (și de multe ori se întâmplă), veți găsi căutarea unei versiuni corecte a bibliotecii de bază care să permită funcționarea corectă a scriptului!
Poate Prototype și partenerul său bine cunoscut în crimă, Scriptaculous, sunt mai mult stilul tău. În acest caz, veți fi lipsiți de dreptul de modularitate și sunteți obligat să includeți două biblioteci de dimensiuni mari pe toate paginile dvs. sau, în unele cazuri, și un fișier de plugin!
Deci, dacă MooTools este atât de mare atunci ... de ce nu este folosit mai mult? De ce nu există gazilioane de tutoriale și cărți pe fiecare raft de bibliotecă ?! Există o serie de motive:
Cu toate acestea, veți găsi instrumente ample pentru a lucra cu mai multe domenii unice de scripting, precum parsarea fișierelor JSON, modulele cookie și încorporarea flash pentru a numi câteva. De asemenea, o pagină de descărcare convenabilă, care vă permite să alegeți exact ceea ce aveți nevoie pentru proiectul dvs., astfel încât să puteți asigura cea mai mică dimensiune posibilă a fișierului.
Treceți la pagina MooTools Core Builder! Pentru acest proiect special, veți dori să selectați Fx.Morph, Element.Event, DomReady, și selectori și apăsați "Descărcați" utilizând compresorul YUI. Toate dependențele sunt alese automat pentru dvs. Fiți atenți, deoarece anumite browsere vor adăuga o extensie ".txt" într-un fișier javascript pentru protecția dvs. Acest lucru va trebui în mod evident să fie eliminat și nu ezitați să îndepărtați unele dintre caracterele sătul în numele fișierului.
Creați documentul HTML pe care îl veți folosi pentru acest proiect și atașați biblioteca MooTools. Capul paginii mele arată cam așa:
Mootools - Principalele produse! ...
Uitați-vă la următoarele stiluri și cod HTML pentru a vedea cum am prezentat pagina.
Cod CSS:
Cod HTML:
Observați cum am prezentat codul HTML. Nu voi folosi ID-urile pentru a selecta oricare dintre elementele de pagină sau bule, și în loc de a crea arhitecturi ale tuturor elementelor care conțin cele două clase, ceea ce va permite ca acest script să scadă indiferent de câte elemente alegi să le evidențiezi! Toate bulele și paginile sunt conținute într-un ambalaj care este absolut poziționat în cadrul ambalajului site-ului (care conține fundalul nostru în cazul în care toate acestea se află pe partea de sus).
Vom începe prin crearea unei funcții de împachetare a codului nostru javascript care plasează un ascultător al evenimentului pe obiectul ferestrei, aruncând o dată încărcarea și pregătirea DOM. Acest lucru este important deoarece avem nevoie de scriptul nostru pentru a începe imediat modificarea DOM-ului odată disponibilă.
Dacă NU folosim această funcție de împachetare, este foarte probabil să primiți erori susținând că anumite elemente nu există. O altă opțiune ar putea fi plasarea javascript-ului încorporat la sfârșitul corpului documentului. Cu toate acestea, dacă decideți să atașați scriptul extern, veți întâlni din nou această problemă, deci este un obicei bun pentru a intra acum!
O altă opțiune pentru "domready" este utilizarea "încărcării" care se va declanșa odată ce pagina (imaginile incluse) este complet încărcată. Nu vrem acest lucru pentru acest proiect special, deoarece inseamna ca imagini (cum ar fi bulele noastre) ar putea bloca intitulat pe ecran inainte de a fi ascunse de scriptul nostru.
Un alt lucru important de observat - dacă decideți să conectați acest script dintr-un fișier extern ".js", veți dori să vă asigurați că îl conectați după ce ați conectat biblioteca MooTools în capul documentului.
Accentsconagua
window.addEvent ('domready', funcția () ...); Apoi începem să creăm matricele pentru elementele de pagină și bule și să setăm câteva stiluri inițiale în linie.
window.addEvent ('domready', function () // Crearea variabilelor (in acest caz, doua arrays) care reprezinta bulele si paginile noastre var myPages = $$ (' ); // Setați opacitatea bulelor la zero, astfel încât acestea să fie ascunse inițial // și să comutați vizibilitatea pentru containerul lor înapoi pe myBubbles.setStyle ('opacity', 0); $ ('bubbleWrap') setStyle (' "vizibil")); În cele din urmă, vom atașa ascultătorii evenimentului la pictogramele paginii pentru a trage efectele morfului asupra bulelor lor corespunzătoare. Rețineți că ordinea bulelor așa cum este descrisă în codul HTML este aceeași ordine a pictogramelor paginilor. Asta e important!
window.addEvent ('domready', function () // Crearea variabilelor (in acest caz, doua arrays) care reprezinta bulele si paginile noastre var myPages = $$ (' ); // Setați opacitatea bulelor la zero, astfel încât acestea să fie ascunse inițial // și să comutați vizibilitatea pentru containerul lor înapoi pe myBubbles.setStyle ('opacity', 0); $ ('bubbleWrap') setStyle (' 'vizibil') // Adăugați evenimentele noastre la paginile myPages.each (funcția (el, i) / * Aici vom schimba proprietatea implicită "link" pentru a "anula" efectele noastre morph, ceea ce asigură că efectele sunt întrerupte atunci când mouse-ul pleacă și intră pentru a începe imediat efectul morph fiind numit * / el.set ('morph', link: 'cancel'); el.addEvents ('mouseenter': function () myBubbles [i]. morph ('opacitate': 1, 'margin-top': '-15px'); 'mouseleave': function () myBubbles [ '););); Veți observa că atașăm o funcție folosind metoda each () la toate elementele matricei "myPages". Și pentru fiecare funcție trecem în 'el' care reprezintă elementul de pagină și 'i' care este un număr întreg reprezentând plasarea acelui element de pagină în matricea sa. Utilizăm variabila "i" pentru a apela efectul morph asupra elementului bule corespunzător și corespunzător din matricea "myBubbles".
Si asta e! Destul de nedureroasă nu-i așa? Asigurați-vă că vizualizați demo-ul de lucru și marcați, de asemenea, pagina MooTools Docs și pagina MooTools Download pentru referințe viitoare! Sper că acest tutorial a fost de ajutor și aștept cu nerăbdare să punem împreună ceva mai avansat în viitorul apropiat folosind puterea cursurilor MooTools!
