Tutorial MooTools pasul 11 Fx Tween II

 

Astazi vom vorbi in continuare despre tween-uri, mai exact cum putem crea un tween nou, si cum ii putem adauga stiluri si efecte.

Crearea unui tween

Desi exista mai multe functii MooTools ptr acest acest fapt, care scurteaza portiunile de cod folosite, daca doresti sa adaugi mai multa flexibilitate si control site-ului tau, poti crea un nou tween. Se foloseste "new" pentru a crea o noua instanta a Fx.tween:

window.addEvent('domready', function() { //la inceput ii atribuim unei variabile elementul asupra caruia vrem sa aplicam tween var elementT...

Tutorial MooTools pasul 10 Fx Tween I

 

Am revenit cu un nou tutorial despre biblioteca MooTools. Astazi vom discuta despre Fx.tween. La fel ca si celelalte functii MooTools despre care am discutat acestea sunt foarte usor de folosit si ofera multa putere programatorului. Tween are calitatea de a oferi developerului posibilitatea de a crea efecte asemanatoare "Flash" cu ajutorul JavaScript.

In mod normal ar trebui sa incepem cu notiunile de baza, dar MooTools 1.2 ofera comenzi rapide atat de simple si atat de usor de folosit incat vom incepe de aici.Tween-ul este o tranzitie lina intre doua valori de propri...

Tutorial MooTools pasul 9 Filtrarea stringurilor introduse de utilizator

 

Precum am spus intr-un articol anterior, astazi ne vom ocupa de filtrarea stringurilor introduse de la tastatura. Vom aborda partial capacitatile Mootools referitoare la stringuri, nediscutand despre cateva functii esoterice precum toCamelCase() sau orice functionalitati ale stringurilor ce se ocupa cu expresii.

Inainte sa incepem, sa discutam un pic despre modul in care functiile ce se ocupa de stringuri sunt apelate. In exemplele de mai jos, vom apela aceste functii prin variabile cu stringuri in ele, ca in exemplul de mai jos:

var variabila_de_text = "Aici scriem...

Tutorial MooTools pasul 8 Filtrarea numerelor introduse de utilizator

 

In tutorialul de astazi vom afla cat este de usor sa filtram datele introduse de catre utilizator cu ajutorul MooTools. Pentru inceput, ne vom ocupa de numere, urmand sa lasam stringurile pentru un tutorial viitor. Scopul principal al filtrarii datelor introduse de utilizatori, este de a ne asigura ca din perspectiva codului, totul functioneaza cat mai usor.

Vom discuta pentru inceput despre functia rgbToHex();. Aceasta apartine practic colectiei multimilor. Totusi, datorita faptului ca este o functie pentru multimi ce se ocupa cu numere, o vom trata aici. O portiune ...

Tutorial MooTools pasul 7 Manipulare HTML

 

In acest tutorial vom vedea cum pot fi manipulate elementele HTML cu ajutorul MooTools. Astfel, puteti adauga noi elemente in cadrul paginii HTML, sterge elemente sau modifica parametri.

Functia .get(); permite recuperarea proprietatilor elementelor. Acestea sunt diverse componente ce creaza un element html, precum src, value, name, etc. Aceasta functie poate fi folosita astfel:

//aceasta va returna tag-ul html(div, a, span...) al elementului cu id-ul "nume_id" $('nume_id').get('tag'); Element

Se poate folosi .get(); pentru mai mult decat taguri html...

Tutorial MooTools pasul 6 Manipulare CSS

 

In acest tutorial vom invata cum sa manipulam style-uri cu ajutorul MooTools. Daca combinam acest lucru cu toate cunostintele pe care le-am acumulat de-a lungul acestor tutoriale, va putem oferi mult mai mult control asupra interfetei voastre. Lucrul cu style-uri e destul de simplu, dar exista cateva trucuri. De exemplu, vom introduce notiunea de obiect key/value. Vom transmite de asemenea variabile in afara domready, cum am invatat in tutorialul despre functii. De acum incolo, tutorialele vor creste un pic in complexitate, penru a introduce cateva concepte esentiale de progra...

Tutorial MooTools pasul 5 Evenimente

 

La fel ca selectorii,evenimentele reprezinta o parte importanta a crearii unei interfete cu utilizatorii interactiva. Practic, la fiecare element trebuie decis ce actiune cauzeaza ce efect. In continuare vom vorbi despre cateva din cele mai folosite evenimente:

Cel mai comun evenment in dezvoltarea web este click-ul stanga al mouse-ului (single left click). Hyperlink-urile recunosc evenimentul "click" si trec utilizatorul catre un alt URL. MooTools poate recunoaste acest eveniment in cadrul altor elemente ale DOM-ului, oferind astfel multa flexibilitate atat in design ca...

Tutorial MooTools pasul 4 Functii

 

In al patrulea dintre aceste tutoriale, vom lasa la o parte un pic discutia despre MooTools si vom discuta despre functii in JavaScript. Bineinteles insa, programatorii trebuie sa stie unde exact sa plaseze aceste functii la MooTools. In toate exemplele de pana acum, am plasat codul in interiorul functiei domready. Totusi, cand vine vorba de functii, acestea trebuie plasate in afara buclei domready si executate in momentul apelarii acestora din domready.

Cea mai buna idee este sa tineti cat mai mult din codul javascript in afara paginii si sa il apelati cu ajutorul unei...

Tutorial MooTools pasul 3 Multimi

 

Astazi vom discuta un pic despre multimi si cum pot acestea fi folosite in concordanta cu elementele DOM-ului.

Functia .each(); este cea mai buna solutie cand ai de a face cu multimile pentru ca ofera o modalitate simpla de a itera printr-o lista de elemente. Sa folosim un exemplu cu functia alert() pe care am mai folosit-o anterior, si sa emitem o alerta pentru fiecare div din codul html:

$$('div').each(function() { alert('acesta este un div'); });

Codul de mai jos va crea 3 casute de alerta, una pentru fiecare div:

Primul Div Al Doilea Div Al Treilea D...

Tutorial MooTools pasul 2 Selectori

 

In acest tutorial ne vom ocupa de metode de a selecta elemente html, practic baza motivelor pentru care MooTools este atat de folosit. Pana la urma, pentru a putea crea o experienta interactiva cu ajutorul elementelor html, trebuie intai sa reusesti sa le selectezi.

Functia '$' este selectorul de baza in MooTools. Acesta are un scop dual, de a face un element in Internet Explorer sa preia toate metodele sale, dar mai ales cu ajutorul sau poti selecta un element al DOM-ului dupa ID, asa cum puteti vedea in exemplul urmator:

//selecteaza elementul cu id-ul css "el...

Tutorial MooTools pasul 1 Introducere

 

MooTools este o biblioteca javascript folosita pentru development web interactiv cu ajutorul JavaScript. Intr-un fel, multe din functiile MooTools pot fi vazute ca extensii CSS. De exemplu, CSS-ul permite elementul "hover", iar MooTools il extinde catre alte evenimente precum "click" sau "mouseover" si face totul extrem de usor. Mai mult, pe langa aceste ce permit modificarea proprietatilor diferitelor elemente, MooTools permite foarte multe efecte dinamice despre care vom vorbi in articole viitoare, precum si multe alte lucruri.

In esenta, pentru ca aceasta colectie de...