script.aculo.us
| script.aculo.us software | |
|---|---|
 | |
| Tip | Bibliotecă software (nu este listată ) |
| Dezvoltator | Thomas Fuchs |
| Data primei versiuni | Iunie 2005 |
| Ultima versiune | 1.9.0 (23 decembrie 2010) |
| Sistem de operare | Multiplatform |
| Limba | JavaScript |
| Licență | Licență MIT ( licență gratuită ) |
| Site-ul web | script.aculo.us/ |
script.aculo.us este o bibliotecă JavaScript care vă permite să creați efecte grafice impresionante pe site-uri web utilizând un sistem foarte simplu de funcții. Biblioteca se bazează pe prototip și conține în special efecte grafice, o bibliotecă pentru așa-numitul Drag and drop și multe altele. Practic, datorită câtorva linii de cod este posibil să se dezvolte efecte foarte sugestive, cum ar fi dispariția și apariția obiectelor, glisarea lor sau completarea automată a formularelor (așa cum se întâmplă pe pagina google ).
Includere pe pagină
Script.aculo.us este o bibliotecă care include părți minore care sunt total independente; din acest motiv poate fi util să includeți doar o parte din întregul cadru în pagină, pentru a nu suprasolicita clientul prea mult.
Pentru a profita de întreaga bibliotecă, pur și simplu includeți-o fără specificații:
< script src = "scriptaculous.js" type = "text / javascript" > < / script>
Dacă, pe de altă parte, aveți nevoie doar de o parte a bibliotecii, puteți limita încărcarea doar la componentele de care aveți nevoie (care vor fi plasate în subfolderul „src”):
< script src = "scriptaculous.js? load = effects, slider" type = "text / javascript" > < / script>
În acest caz, numai glisorul și componentele de efecte au fost incluse în pagină.
Efectele
Efectele sunt variate și toate utilizează aceeași educație. Un șir de prototip ar putea fi acesta
Efect . NomeEeffetto ( 'element_id' , { specificații });
Decolorare
După cum sa menționat deja, fiind un supliment la biblioteca de prototipuri, script.aculo.us este compatibil cu funcțiile sale. Voi furniza aici pentru a raporta un exemplu de div pe care doriți să îl dizolvați printr-un efect de estompare. Există două metode, pe care le voi ilustra comentând codul (foarte simplu) din când în când.
Efect . Fade ( „element_id” , { durata : 1.0 });
Practic, aplică un efect de estompare elementului de pagină numit „element_id”. Durata va fi de o secundă, care este valoarea implicită, dacă nu se specifică altfel.
Cu această sintaxă în schimb
$ ( 'id_of_element' ). estompare ({ durata : 1.0 });
poate fi utilizat numai dacă biblioteca Prototype a fost încărcată în pagină. Funcția $ () înlocuiește „document.getElementById ()” obișnuit. Restul afirmației este același cu exemplul de mai sus.
Tragere și plasare
Adică, posibilitatea de a selecta și muta elemente pentru pagină trăgând mouse-ul. Pentru a face acest lucru, trebuie să inițializăm o nouă instanță numită Draggable. Atunci când un obiect glisabil este utilizat împreună cu proprietatea dropable, acesta are ca efect tragerea unui obiect și apoi aruncarea acestuia într-un container. Este un efect foarte frecvent pe site-urile de comerț electronic (unde drag and drop capătă sensul de a umple un coș.
Exemplu:
nou Draggable ( 'id_del_div' );
Acest exemplu oferă divului cu id-ul "id_del_div" capacitatea de a fi folosit ca element al unui drag. Nu este specificat nimic, deci fiecare parametru își va lua valoarea implicită. De exemplu, s-ar putea să doriți ca divul să revină la poziția sa inițială atunci când este mutat. Pentru a face acest lucru, tot ce trebuie să faceți este să setați variabila booleană „revenire” la adevărat.
new Draggable ( 'id_del_div' , { revert : true });
Elemente conexe
- JavaScript
- AJAX - JavaScript și XML asincrone
- Prototype JavaScript Framework - bibliotecă JavaScript
linkuri externe
- Site-ul oficial , la script.aculo.us .
- Depozitul sursă Script.aculo.us , la github.com .
- Documentație oficială cu demonstrații și tutoriale , pe github.com .
