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 programare. Daca nu va descurcati prea bine in JavaScript, sau invatati MooTools pentru prima oara, aveti grija sa cititi cu atentie tutorialele anterioare si nu ezitati sa ne puneti intrebari.

Prima functie esentiala este .setStyle(); ce ne ajuta sa cream o proprietate "style" unui element. Am mai folosit aceasta functie in unele din exemplele anterioare. Trebuie sa alaturam .setStyle(); la finalul selectorului si va schimba proprietatea style a acelui element sau a unei multimi.

//defineste selectorul tau
//adauga .setStyle
//defineste proprietatea si valoarea ei
$('elementulMeu').setStyle('background-color', '#fff');
$$('.nume_clasa').setStyle('background-color', '#fff');

Pe de alta parte, avem functia .getStyle(); ce returneaza valoarea proprietatii stilistice a unui element

//la inceput, cream variabila pentru a-i atasa valoarea proprietatii
var valoareStyle = $('elementulMeu').getStyle('background-color');
// acest cod va returna '#fff' variabilei valoareStyle

.setStyles ofera posibilitatea crearii mai multor proprietati stilistice unui singur element sau unei multimi. Pentru acest lucru, sintaxa este un pic diferita:

//incepe prin a crea un selector, apoi adauga .setStyles({
$('elementulMeu').setStyles({
    //se va folosi modelul 'proprietate': 'valoare',
    'width': '1000px',
    'height': '1000px',
    //nu uitati sa nu adaugati o virgula dupa ultima proprietate 
    'background-color': '#fff'
});

Nu aveti nevoie de apostrofuri in jurul selectorului proprietatii, decat daca acesta contine o cratima, precum 'background-color', dar e bine sa le scrieti pentru a evita orice probleme cand unul din astfel de selectoare apar. Pe de alta parte, exista mai multa flexibilitate la valorile proprietatii. Daca in general puteti folosi apostrofurile, care char sunt necesare la valori de genul '100px' sau '#fff', sau stringuri in general,in schimb acestea nu trebuie folosite la numere( acestea vor fi interpretate ca pixeli implicit) sau variabile:

//acest cod atribuie variabilei culoareBackground1 stringul '#fff'
var culoareBackground1 = '#fff';
//poti atribui unei variabile o alta variabila, 
//astfel variabila culoareBackground2 ia valoarea '#fff'
var culoareBackground2 = culoareBackground1;
//atribuie variabilei 'lungimeDiv' numarul 300
var lungimeDiv = 300;
$('elementulMeu').setStyles({
    //in acest caz, variabilele sunt cuvinte, fara apostrofuri
    'width': lungimeDiv,
    //numerele nu sunt insotite de apostrofuri
    'height': 1000,
    //o alta variabila
    'background-color': culoareBackground,
    //stringurile reprezinta o serie de caractere intre apostrofuri
    'color': 'green'
});

Functia .getStyles(); returneaza mai multe proprietati ale stilului dintr-o data. Acest lucru funtioneaza un pic diferit deoarece contine mai multe seturi de date, o cheie (proprietatea) si o valoare (valoarea proprietatii). Acest set de date este numit 'obiect':

//la inceput, definim o variabila pentru obiect
//apoi, cream un selector
//adaugam functia .getStyles acestui selector
//in final, cream o lista a proprietatilor CSS, cu elementele separate prin virgula
//nu uitati ca proprietatile trebuie trecute intre apostrofuri
var stiluriElement = $('elementulMeu').getStyles('width', 'height', 'background-color'); 
//cream o noua variabila pentru valoarea proprietatii
//apoi apelam o anumita proprietate prin cheia sa , care in acest caz este numele proprietatii
//trecem numele propritatii intre paranteze patrate
//iar in jurul cheii, trecem apostrofurile
var stiluriBackground = stiluriElement['background-color'];

Daca avem urmatorul cod CSS:

#elementulMeu {
    width: 300px;
    height: 300px;
    background-color: #fff;
}

variabila 'stiluriBackground' va contine valoarea '#fff'.

Pentru mai multe detalii, cititi tutorialele de pe site-ul MooTools.

Alex B.

1Comentarii la "Tutorial MooTools pasul 6 Manipulare CSS"

  1. online spune:

    Multumesc pentru un blog interesant

Adauga Comentariu

Mesaj

Trimite