Conectare

Mi-am uitat parola

Panou De Control
Profilul tau
Informatii
Preferinte
Semnatura
Avatar
Social
Lista de prieteni si lista userilor ignorati
Membrii forumului
Grupuri de utilizatori
Mesaje private
Mesaje primite
Mesaje trimise
Subiecte monitorizate
Subiecte monitorizate
Parteneri
Steel Arena
Sondaj

Cum vi se pare siteul nostru?

81% 81% [ 13 ]
13% 13% [ 2 ]
0% 0% [ 0 ]
0% 0% [ 0 ]
6% 6% [ 1 ]

Total voturi : 16

Cuvinte-cheie


Script.aculo.us si slidere duale

In jos

Script.aculo.us si slidere duale

Mesaj Scris de +gZ.Flyking la data de Mier Iun 10, 2009 12:00 pm

Libraria script.aculo.us este prima colectie de efecte vizuale realizate cu ajutorul Javascript, sau cel putin este prima de care am auzit. Alternativa fiind, jQuery, care functioneaza putin altfel, in sensul ca suporta cascade de instructiuni (object.function.function.etc.), am ramas deocamdata la script.aculo.us, mai ales ca m-am invatat foarte repede cu cele trei functii de baza:
efecte - new Effect.effectName() si controale drag&drop – new Control.controlName()
eventuri – new Event.observe([click,mouseover,mouseon,etc. – atentie, fara on-ul din fata], id-ul elementului, functia de executat)
call-uri ajax – new Ajax.Update()


Printre restul de functii interesante ale script.aculo.us se numara si cateva pentru "edit in place", "drag n drop" si slidere. In acest tutorial ma voi concentra asupra ultimei functii, cea pentru slidere, si voi arata cum poate fi ea augmentata pentru a fi folosita in proiecte reale. Anume, vom incerca sa cream un dual slider pentru selectarea unui interval de valori.

Pentru a realiza ce ne-am propus, vom avea deci nevoie de doua slidere suprapuse. Iata imaginile de care vom avea nevoie. Puteti alege sa le refaceti, utilizand gif-uri sau png-uri transparente, insa aveti grija la faptul ca Internet Explorer, fie el 6 sau 7, nu afiseaza transparenta png-urilor in mod corect.





Prima imagine este intr-adevar foarte ingusta. Ea va fi folosita ca background repetitiv pentru divul in care vor fi sliderele. Celelalte sunt controalele: cel galben pentru valoarea minima, iar cel rosu pentru valoarea maxima. Sa vedem cum ar arata HTMLul pentru dual slidere.


<div id="price_track" class="slider_track">
<img id="price_yellow" class="slider_yellow" src="images/i_slider_yellow.png" />
<img id="price_red" class="slider_red" src="images/i_slider_red.png" />
</div>


Functiile pe care le vom crea vor utiliza anumite denumiri standard, asa ca ar fi bine sa le trecem in revista inca de pe acum. Vom avea nevoie de un handle (id de element) catre divul de fundal, pe care se vor deplasa cele doua slidere, si cate un handle pentru fiecare slider. Le vom numi nume"_track", nume"_yellow" si respectiv nume_"red". Astfel, daca vom avea nevoie de mai multe slidere duale pe pagina, nu va trebui sa modificam decat variabila "nume", datorita acestor conventii de denumire pe care le-am stabilit. Deci idul pentru divul care va contine sliderele va fi marcat cu "_track", sliderul pentru valoarea minima va fi marcat cu "_yellow", iar cel pentru valoarea maxima cu "_red". Ca un exercitiu de intelegere, incercati sa modificati yellow cu min si red cu max. Este o modificare destul de logica.

Sa ne gandim la ce mai avem nevoie. Desigur, sliderele se vor misca, insa ne va trebui o sectiune care sa arate valoarea curenta la care este sliderul, valoare care sa fie modificata live atunci cand sliderul este miscat de utilizator. Eu am folosit un paragraf standard si am colorat cele doua valori corespunzator:


<p>Prices from $<span class="yellow" id="price_yellow_tag">0</span> to $<span class="red" id="price_red_tag">200000</span></p>


Observam ca si aici avem nevoie de doua handle-uri, pe care le-am numit conform patternului nume_yellow_tag si nume_red_tag. Observati ca, in exemplul meu, numele este price. Si aici, yellow si red pot fi inlocuite cu min, respectiv max. Valorile initiale vor fi valoarea minima si valoarea maxima pe care o poate avea sliderul. Mai tarziu, vom muta controlul rosu la extrema dreapta.

Iata si clasele CSS pe care le-am utilizat in exemplu:


.slider_track{
margin:auto;
width:80%;
background:url("images/b_slider.png") repeat-x;
}

.slider_red, .slider_yellow{
cursor:move;
}

span.red{
color:#c6523b;
}

span.yellow{
color:#e48800;
}


Sa trecem la partea cea mai interesanta, si anume codul javascript. Dupa ce avem HTMLul, va trebui sa folosim o functie pentru a transforma cele doua triunghiuri in slidere care sa updateze tag-urile de pret. Folosind doar script.aculo.us, putem chema functia new Control.Slider de doua ori, cate o data pentru fiecare triunghi.

Insa am cautat o solutie si mai simpla, in special pentru faptul ca valorile nu pot fi stabilite foarte exact, sau cel putin eu nu am reusit. Veti observa ca, by default, script.aculo.us alege valori intre 0 si 1. Putem specifica valoarea minima si maxima, insa ne va mai trebui un call de functie pentru a scapa de zecimalele nedorite.

O a doua problema pe care am avut-o a fost legata de steppingul sliderelor. Puteti incerca sa cautati prin documentatia script.aculo.us, sau puteti folosi o functie simpla care sa va creeze singura valorile. Functia va avea ca parametri valoarea minima, valoarea maxima si steppingul, si va returna un array cu toate valorile pe care le va putea lua sliderul.


function buildValues(min,max,step){
var vals=[];
j=0;
for(i=min;i<=max;i+=step) {
vals[j]=i;j++;
}
return vals;
}


Avand aceasta functie ajutatoare, putem trece repede la functia de baza. Iata cum va arata call-ul ei:
dualSlider('price_yellow','price_red','price_track',buildValues(0,200000,1000));


function dualSlider(first_handle,second_handle,track,values){
Parametri:


first_handle: id-ul catre imaginea cu controlul (triunghiul) pentru valoarea minima
second_handle: id-ul catre imaginea cu controlul (triunghiul) pentru valoarea maxima
track: id-ul divului de fundal – trackul pe care se vor deplasa controalele
values: array-ul de valori pe care le poate lua sliderul, generat de functia buildValues


Sa vedem si codul functiei. Ea va trebui sa creeze un slider folosind functia Control.Slider din script.aculo.us si sa seteze doua events-uri pentru a schimba valoarea tagurilor, o data la onSlide si o data la onChange. Aceste doua eventuri sunt callbackuri ale controlului Slider din script.aculo.us si le vom seta prin atribuire, si nu cu ajutorul functiei new Event.observe.

function dualSlider(first_handle,second_handle,track,values){

//intai stabilim valorile minima si maxima din cadrul arrayului de valori
var range_min = values[0];
var range_max = values[values.length-1];

//apoi facem un obiect de tip Control.Slider
s1 = new Control.Slider(first_handle,track,{range:$R(range_min,range_max),maximum:range_max,values:values});

//si apoi stabilim callbackurile
s1.options.onChange = function(value){
value=value.toFixed();
$(first_handle+'_tag').innerHTML = value;
$(first_handle+'_form').value = value;
};

s1.options.onSlide = function(value){
value=value.toFixed();
$(first_handle+'_tag').innerHTML = value;
};

//desigur, totul trebuie facut de doua ori, pentru ca avem doua slidere
s2 = new Control.Slider(second_handle,track,{range:$R(range_min,range_max),maximum:range_max,sliderValue:range_max,values:values});

s2.options.onChange = function(value){
value=value.toFixed();
$(second_handle+'_tag').innerHTML = value;
$(second_handle+'_form').value = value;
};

s2.options.onSlide = function(value){
value=value.toFixed();
$(second_handle+'_tag').innerHTML = value;
};

s2.setValue(range_max);

}


Mai multe detalii pentru obiectul Control.Slider gasiti in documentatia script.aculo.us.

Sunt doua observatii de facut. In primul rand, veti observa ca in cadrul callbackurilor am folosit linia:
value=value.toFixed();

Prin aceasta functie scapam de zecimalele nedorite. In al doilea rand, tot in callbackuri, am modificat valoarea tagurilor cu innerHTML, si valoarea unui camp de formular, numit second_handle."_form", de care am uitat sa mentionez.

Desigur, vom avea nevoie de o medota de a trimite datele sliderelor pentru procesare catre un script server side. Pentru a le integra usor cu un formular, am decis sa creez doua fielduri de tip hidden, pe care sa le updatez la fiecare miscare ale celor doua slideuri. Numele lor vor fi yellow_form, respectiv red_form.

Singura problema care a mai ramas este aceea ca sliderul rosu este putin mai la stanga decat ne-ar placea, fapt datorat primului slider: imaginile sunt plasate inline, asa ca este normal ca al doilea slider sa fie decalat, si el este decalat cu lungimea primei imagini in pixeli. O regula simpla de CSS va rezolva insa si aceasta simpla problema:


.slider_red{
margin-left:-18px;
}


Iata si exemplul pe care probabil ca il asteptati. Puteti gasi acolo toate sursele.

_________________
One shot, one opportunity, one kill.
Let there be banned users!
avatar
+gZ.Flyking
Administrator
Administrator

Numarul mesajelor : 237
Data de inscriere : 05/06/2009
Varsta : 23
Localizare : Galati

Vezi profilul utilizatorului

Sus In jos

Sus

- Subiecte similare

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum