Share
Noțiuni de bază cu orice tip de cadru poate fi o experiență intimidantă. Pentru a ajuta, în această săptămână avem un tutorial în profunzime și un screencast lung pentru a oferi un curs de accident pentru această bibliotecă populară JavaScript. Cu o concentrare atât de mare asupra jQuery, este ușor de uitat că Mootools este o bibliotecă la fel de puternică, cu un imens.
Acest tutorial include un screencast disponibil pentru membrii Tuts + Premium.
După mutarea inițială la Mootools, am fost frustrat de lipsa sprijinului comunității și am ajuns imediat la Prototype. După ce eram mai confortabil cu lucrul cu cadre, m-am mutat înapoi la Mootools și nu m-am uitat înapoi.
Cu acest tutorial, voi încerca să vă asigurați că aveți un început minunat pentru cadrul Mootools. Am să vă conduc prin a obține totul descărcat și setat, precum și unele dintre elementele de bază ale Mootools. După asta, voi petrece ceva timp umblând prin modul de utilizare a Documentelor Mootools, care este un site pe care îl veți vizita foarte des în timpul utilizării Mootools.
Bine, destul de povești, să ne lăsăm mâinile murdare.
Lucrul frumos de a lucra doar cu javascript este că nu trebuie să rulați fișierele pe un web sau un server local. Tot ce aveți nevoie pentru acest tutorial este:
Pentru acest tutorial voi folosi Firefox și Firebug pentru a vă arăta câteva sfaturi de depanare, așa că vă recomandăm să utilizați Firefox și Firebug. Firebug va face lucrul cu Mootools, sau orice cadru, 100 ori mai ușor.
Puteți descărca firebug aici
Treceți la www.Mootools.net/download
Pentru moment, vom include atât bibliotecile de bază, cât și cele de bază. Aceasta este doar pentru a ne asigura că nu lipsește nimic. Când deveniți mai confortabil cu Mootools, veți realiza că nu toate componentele sunt necesare pentru aplicații specifice, astfel încât puteți crea personalizat bibliotecile Mootools pentru a se potrivi nevoilor dvs. și pentru a păstra dimensiunile fișierelor mici.
Descărcați fișierul comprimat Mootools 1.2.3 și salvați-l pe desktop.
Treceți mai mult la constructor, selectați fiecare opțiune și descărcați fișierul comprimat YUI.
Să creați un nou director numit Moo și în interiorul acelui director să creați un alt director numit inc. Doar pentru a face lucrurile mai ușoare, creați încă un fișier în folderul nostru inc numit js și aruncați ambele fișiere Mootools în interiorul acelui dosar.
În interiorul folderului Moo, creați un fișier nou numit index.html și deschideți-l în sus.
Este deschis? Bine, deschideți-l și în Firefox. Ar trebui să vedeți o pagină goală. Reveniți la fișierul index.html din editorul dvs..
Pentru a include Mootools în scriptul nostru, trebuie să adăugăm 2 linii de cod în fișierul HTML. Dacă ați inclus vreodată un fișier javascript într-un script înainte ca acest lucru să vă fie foarte familiar.
Suntem acum pregătiți să mergem!
Pentru a obține Mootools să vorbească cu elemente de pe pagina noastră, folosim funcția $ () pentru a obține un element prin ID-ul său.
Să creăm un nou div, să-i dăm un ID și un text și apoi să-i vorbim pe Mootools.
După asta, lăsați niște etichete de javascript, astfel încât să putem începe să scriem unele Mootools.Bună băieți!
Am creat div și i-am dat o identitate "cutie". Am inserat un text în interiorul acestuia și am creat câteva etichete de script pentru a putea începe să intrăm în bunătatea lui Mootools.
Dacă folosim funcția $ și transmitem id-ul casetei noastre, vedem că Mootools nu obține toate atributele noastre "cutie" div. Elementul nostru variabil deține acum toate aceste date.
Accentsconagua
var element = $ ('caseta'); Dacă actualizăm pagina, nu putem vedea în mod vizibil că se întâmplă ceva, dar știm că lucrurile se întâmplă în fundal. Aici console.log () și Firebug intră în joc.
Dacă deschideți Firebug, ar trebui să vedeți o consolă necompletată. Folosind console.log () putem transmite informații către Firebug pentru a fi afișate pentru noi. Acest lucru este extrem de util atunci când depanați un script pentru că îl puteți utiliza pentru a afișa informații în diverse etape ale scriptului dvs. pentru a vedea unde lucrurile nu reușesc.
console.log ("Oh, Bună tuturor!"); 
De asemenea, îl putem folosi pentru a afișa informații care altfel nu ar fi afișate în browserul nostru.
Permite utilizarea console.log () pentru a afișa câteva informații despre noi "cutie" div.
console.log (elementul);
Așadar, am aflat că putem folosi $ () pentru a obține un element, dar ce se întâmplă dacă vrem să obținem informațiile din mai multe elemente. Nu vrem să folosim 100 de instanțe de $ () care vor fi dezordonate. Acesta este locul unde $$ () intră în joc!
Cine are nevoie pentru a obține unul, permite să obțineți multe!
Permite adăugarea a 5 linkuri către pagina noastră.
Sunt primul link
Sunt al doilea link
Sunt al treilea link
Sunt al patrulea link
Sunt al cincilea link
... tag-urile javascript ... var links = $$ ('a'); console.log (link-uri);
Legătura noastră variază acum cu o serie de link-uri.
În regulă, așa că am creat elementele noastre și acum avem Mootools vorbind cu ei, dar asta nu este deloc distractiv. Utilizatorul din față nu văd nicio modificare, deci vă permite să vă îndepărtați de aceste lucruri plictisitoare și să vă deplasați pe ceva mai distractiv!
Tocmai am acoperit obtinerea elementelor folosind functiile getter. Putem obține un singur element folosind $ () și ID-ul elementelor. De asemenea, am acoperit obtinerea mai multor elemente folosind $$ () si tipul elementului.
Când folosim $$ () putem trece fie numele etichetei HTML, fie folosim selectorii de clasă CSS pentru a apuca un grup de elemente. Un exemplu rapid de apucare a numelor claselor ar arăta astfel.
var elemente = $$ ('. myclass'); Aceasta va returna o serie de elemente pe pagina cu clasa CSS de "clasa mea".
Teoria este uscată ca un os și pentru asta sunt documentele, dar tu ai venit să-ți dai mâinile murdare, așa că lasă-te murdară.
Acum, când primim elementele noastre, permiteți utilizarea funcțiilor setter pentru a manipula elementele de pe ecran.
Al nostru "cutie" div este în căutarea destul de simplu, astfel încât vă permite să adăugați o anumită culoare la ea. Am stabilit deja elementul nostru în variabila elementului nostru.
element.set ("stiluri", 'culoare': 'roșu'); Utilizăm variabila elementului nostru și atașăm funcția set () folosind elementul element.set ().
Există multe argumente pe care le putem folosi pentru a schimba elementul nostru, dar deocamdată vom folosi stiluri. Apoi vom trece câteva opțiuni în argumentul stilurilor noastre. Transmitem opțiunea de culoare și setăm textul în roșu. Stilurile pot folosi toate opțiunile css disponibile. Să schimbăm culoarea de fundal în timp ce suntem aici. Simțiți-vă liber să jucați cu stilurile și să vedeți cât de colorat puteți face elementul nostru cutie.
element.set ("stiluri", 'culoare': 'roșu', 'fundal': 'galben'); Al nostru "cutie" Elementul nu este puțin mai simplu. Dacă vrem să aplicăm mai multe stiluri elementului nostru de box, ar putea deveni o mulțime de cod inutil. Din fericire, putem folosi stilurile CSS și un alt argument pentru a elimina codul. Mergeți mai departe și ștergeți elementul element.set (). Vom adăuga câteva stiluri CSS utilizând css inline.
Notă: Pentru a face lucrurile mai ușoare, vom scrie CSS-ul nostru în interiorul fișierului, însă atunci când creați un site web real, este bine să aveți toate CSS și Javascript în fișiere separate.
Deasupra ta "cutie" div permite adăugarea unor etichete de stil și crearea unei clase de .myclass.
Acum putem folosi setul ("stil") pentru a adăuga noul stil elementului nostru.
element.set ( 'clasă', 'myclass');
Un alt argument pe care îl putem folosi cu setul sunt HTML și text. Unele exemple de bază sunt:
element.set ( 'html',“Hei băieți, acum sunt îndrăzneț
„); element.set ('text', 'Hey guys, no html here');
Ce argument folositi va depinde de ce trebuie sa folositi. Dacă nu trebuie să treci valori HTML, ai folosi textul și versiunea inversă dacă trebuia să treci valorile HTML.
Am folosit set () pentru a adăuga câteva stiluri la noi "cutie" div, dar am fi putut adăuga clasa la div folosind HTML. Nu avem nevoie să folosim Mootools pentru a adăuga stilul dacă îl schimbăm doar înainte ca utilizatorul să vadă schimbarea. Acesta este locul unde evenimentele vin la îndemână.
Să mergem mai departe și să ștergem toate acele linkuri pe care le-am creat și să ștergem etichetele noastre de javascript.
Fișierul dvs. index.html ar trebui să includă acum numai acest cod:
Bună băieți!
Creați un link nou și dați-i un ID de buton chiar sub "cutie" div.
Acum vom adăuga un eveniment la acest buton pentru a putea executa un anumit cod atunci când un utilizator face clic pe link. Utilizăm addEvent () pentru a face acest lucru.
$ ('butonul') addEvent ('click', funcția (e) ); Folosim funcția familiar $ () pentru a le spune Mootools că dorim să vorbim cu link-ul cu un ID de buton. Apoi atașăm argumentele addEvent () și pass 2. Primul argument este evenimentul pe care dorim să-l capturăm atunci când un utilizator face clic pe link. Al doilea argument este o funcție cu o variabilă de e. Această funcție se va executa atunci când utilizatorul dă clic pe link și variabila e trece evenimentul. Veți înțelege de ce trecem o variabilă cu funcția în acest pas următor.
... în interiorul addEvent ... e.stop ();
Atribuiți funcția stop () la variabila noastră de e pentru a opri browserul pentru a trimite acțiunea link-ului. De obicei, când faceți clic pe link, pagina se va actualiza, iar toate modificările vor fi pierdute. e.stop () oprește browserul de la reîmprospătarea paginii astfel încât să putem face unele magie Mootools!
Acum, avem Mootools captura evenimentul de clic astfel incat permite Mootools adauga clasa noastra de .myclass pentru a noastra "cutie" div când se face clic pe link.
... în interiorul addEvent () ... element.set ('class', 'myclass'); Salvați aceasta, actualizați pagina și faceți clic pe linkul dvs. Când faceți clic pe link-ul, div trebuie să aibă un anumit stil. Am făcut toate acestea fără a fi nevoie să reîmprospătați pagina. Aici Mootools începe să devină foarte interesant.
Reîmprospătați puțin înainte să continuăm. Am învățat cum să folosim funcțiile getter ($ și $$) pentru a permite Mootools să vorbească cu elemente de pe pagina noastră. Apoi am aflat că putem folosi funcțiile setter pentru a manipula aceste elemente. Evenimentele permit utilizarea pentru a capta interacțiunea cu utilizatorul, astfel încât să putem manipula elementele în timp real fără a fi nevoie să reîmprospătăm pagina pentru a reflecta fiecare schimbare.
Mootools vă va permite, de asemenea, să creați elemente noi în zbor, pentru a permite utilizatorului să personalizeze pagina. Pentru a face acest lucru, vom folosi noile funcții Element () și inject ().
Să începem cu un fișier HTML proaspăt. Fie ștergeți totul din index.html, fie creați un fișier nou.
În fișierul nostru vom crea o div și două link-uri. Continuați și creați-i acum!
Vom folosi $$ () pentru a adăuga un eveniment la ambele linkuri de pe pagină. Vom capta evenimentul clic și apoi vom crea un element nou. În cele din urmă vom injecta noul nostru element în nostru "rezultat" div.
$$ ('a') addEvent ('click', functie (e) e.stop ();); Utilizăm $$ ('a') pentru a apuca toate link-urile și apoi atașați addEvent () la fiecare link. Facem acest lucru pentru că reduce codarea, astfel încât nu trebuie să găsim fiecare identificator al legăturilor și să creăm addEvents pentru ele. Vom folosi ID-ul fiecărui link pentru a determina stilul pe care trebuie să-l adăugăm. Permiteți biciuiți câteva css-uri rapide pentru cutiile pe care le vom crea.
Acum este momentul să creați elementele noastre și să le injectați în pagină.
var class = acest.id; caseta var = element nou ('div', 'class': class); box.inject ($ ( 'rezultat')); Mai întâi creăm o variabilă numită "clasă" țineți ID-ul linkului la care a fost făcut clic. Următoarea noastră linie are grijă de crearea elementului. Facem acest lucru prin utilizarea noului element () și apoi trecând câteva argumente. Primul argument este tipul de element pe care dorim să-l creăm. Vrem să creăm o div, deci vom trece o valoare de div. Al doilea set este opțiunile noastre. Vrem să atribuim o clasă diferită în funcție de care link a fost făcut clic. Facem acest lucru spunând mai întâi funcția pe care dorim să o setăm "clasă" opțiune, atunci vom trece variabila noastră de clasă care se va întoarce fie "Blue_box" sau "Grey_box".
Ultima linie ia noul nostru element, pe care l-am plasat într-un "cutie" variabilă și o injectează în noi "rezultat" div. Mootools știe să o injecteze "rezultat" pentru că noi trecem "rezultat" div folosind o metodă getter ca opțiune principală.
Acum, dacă actualizăm pagina și începem să dăm clic pe link-urile noastre, ar trebui să vedem că cutiile mici sunt create în zbor și sunt adăugate la pagină.
În acest moment în tutorial ar trebui să fii destul de confortabil cu utilizarea funcțiilor getter și setter pentru a obține Mootools să vorbească cu elementele noastre.
În ultima parte a acestui tutorial mă voi referi la unele dintre funcțiile de animație și efecte pe care le oferă Mootools.
Permite crearea unui alt fișier nou. În interiorul acelui fișier creați un div cu un text în interiorul acestuia și un link.
Bună băieți!
Am adăugat codul de identificare pentru fiecare element, pentru a putea să-i vorbim pe Mootools.
Pentru a începe, permiteți atașarea unui eveniment la link. Acest lucru ar trebui să pară foarte familiar până acum.
$ ('buton') addEvent ('click', functie (e) e.stop ();); Acum, că avem Mootools capturarea evenimentului clic, permiteți-ne să facem "cutie" div fade in si out la fiecare click.
. $ ( 'Cutie') se estompeze ( 'comutare');
Acum, când facem clic pe linkul nostru, caseta div ar trebui să dispară. Dacă faceți din nou clic pe link, va reapărea.
Fading este misto și totul, dar vă permite să adăugați un anumit stil la cutie și a vedea dacă putem face să crească!
Vom folosi funcția tween () pentru a anima unele atribute ale noastre "cutie" div.
În interiorul evenimentului nostru de clic permiteți eliminarea funcției fade () și înlocuirea acesteia cu tween ().
//$('box').fade('toggle '); $ ('cutie'). tween ('înălțime', '200'); Acum, dacă faceți clic pe link, caseta noastră ar trebui să crească.
Funcția tween ia 2 argumente. Primul este atributul pe care dorim să îl manipulăm, iar al doilea este o valoare. Vrem să schimbăm înălțimea casetei și dorim să animăm la 200 de pixeli.
Dacă am vrea ca caseta să crească cu 10 pixeli de fiecare dată când am făcut clic pe link. Mai întâi ar trebui să obținem înălțimea actuală a cutiei. Cred că putem face asta cu funcția noastră get ().
caseta var = $ ('caseta'); var înălțime = box.getHeight (); var new_height = înălțimea + 10; box.tween ("înălțime", new_height); Mai întâi ne alocăm "cutie" div la o variabilă a casetei. Apoi vom folosi o funcție construită în funcție de Mootools numită getHeight () pentru a obține înălțimea curentă a noastră "cutie" div. Vrem caseta să crească cu 10 pixeli de fiecare dată când se face clic pe link-ul astfel încât să creați o nouă variabilă numită new_height și să o atribuiți unei valori de înălțime + 10. Aceasta ia înălțimea curentă și o crește cu 10. În final, atașăm tween ) funcția variabilei casetei noastre, spune-i că vrem să animăm înălțimea și să o transmitem valorii new_height.
Dacă faceți clic pe link, caseta ar trebui să crească. Dacă faceți clic pe el din nou, va continua să crească cu fiecare click de mouse.
Mootools are o secțiune vastă de documente pe site-ul lor. http://Mootools.net/docs/core
Dacă intenționați să utilizați Mootools, veți deveni foarte familiarizat cu această secțiune a site-ului lor. Acesta este împărțit în diferite clase disponibile și funcții pe care le oferă Mootools.
Secțiunea pe care o veți vizita cel mai mult va fi secțiunea Element. Aceasta este secțiunea care conține toate informațiile despre modul în care Mootools comunică și manipulează elementele de pe pagină.
Mi-am dat loviturile largi pentru a vă ajuta să vă obișnuiți cu modul în care funcționează Mootools și dacă doriți să continuați învățarea vă sugerez să citiți câteva pagini din documentele Mootools.
