E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale Javascript

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DEVELOPMENT  /  Javascript  /  Diverse (7)

Selectarea mai multor obiecte cu Javascript

16.02.2009
Selectarea mai multor obiecte cu Javascript

In multe aplicatii web moderne, designerii cauta metode pentru a face interactiunea cu utilizatorii cat mai facila si mai intuitiva. In anumite cazuri, vei avea nevoie de o functie de selectare a mai multor obiecte in acelasi timp.

Total vizualizari: 4487 4487 afisari   |   Comentarii  1   |   Rating   |   (5 voturi)   |   Timp necesar: 20 min 20 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  www.e-learn.ro  
Autor:  www.e-learn.ro
Download
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

In multe aplicatii web moderne, designerii cauta metode pentru a face interactiunea cu utilizatorii cat mai facila si mai intuitiva. In anumite cazuri, vei avea nevoie de o functie de selectare a mai multor obiecte in acelasi timp.

Etapa 1

Primul pas il reprezinta definirea grupului de obiecte care vor fi selectate. Cel mai probabil, majoritatea programatorilor vor utiliza un limbaj de server cum ar fi C# sau PHP pentru a crea aceasta lista de obiecte. Considerand ca obiectivul acestui tutorial nu este generarea dinamica a setului de obiecte, in acest exemplu ele vor fi create manual. Majoritatea tagurilor HTML pot fi utilizate ca obiecte, singura cerinta este sa aiba atasate evenimente de baza ale mouse-ului. Pentru acest tutorial, va fi utilizat un tabel cu doua randuri si cinci coloane, si doua clase CSS pentru a indica stadiul de selectat / neselectat pentru un obiect.

Cea mai importanta parte a crearii obiectelor este ID-ul lor; in plus, toate trebuie sa aiba un nume cu aceeasi valoare. In acest tutorial, identificatorii utilizati sunt formati din cuvantul "d", urmat de un numar unic. Asadar, ID-ul primului nostru element (reprezentat de un tag < td >) va fi 'd1', iar id-ul ultimului element va fi 'd10'. In continuare, vor fi adaugate evenimente pentru mouse. Fiecare < td > va apela functia de javascript la click, transmitand ca parametru chiar obiectul care are atasat evenimentul onmousedown.

<table width="100%" cellpadding="2" cellspacing="2">  
    <tr>  
        <td id="1d" onmousedown="StartDragSelect(this);" width="20%" class="not_selected">1</td>  
        <td id="2d" onmousedown="StartDragSelect(this);" width="20%" class="not_selected">2</td>  
        <td id="3d" onmousedown="StartDragSelect(this);" width="20%" class="not_selected">3</td>  
        <td id="4d" onmousedown="StartDragSelect(this);" width="20%" class="not_selected">4</td>  
        <td id="5d" onmousedown="StartDragSelect(this);" width="20%" class="not_selected">5</td>  
    </tr>  
    <tr>  
        <td id="6d" onmousedown="StartDragSelect(this);" class="not_selected">6</td>  
        <td id="7d" onmousedown="StartDragSelect(this);" class="not_selected">7</td>  
        <td id="8d" onmousedown="StartDragSelect(this);" class="not_selected">8</td>  
        <td id="9d" onmousedown="StartDragSelect(this);" class="not_selected">9</td>  
        <td id="10d" onmousedown="StartDragSelect(this);" class="not_selected">10</td>  
    </tr>  
</table>

Etapa 2

Acum ca ai creat codul HTML, trebuie sa scrii codul javascript, si anume functia care va fi apelata de fiecare data cand selectezi sau deselectezi un obiect. Inainte de orice, vei scrie prototipul functiei, care va avea ca argument o variabila denumita 'obj'; acesta este de fapt obiectul care declanseaza evenimentul la apasarea mouse-ului.

function StartDragSelect(obj)   {    
}

Pentru actiunea care se declanseaza dupa ce un obiect este selectat sau deselectat, mai intai avem nevoie de o modalitate prin care functia sa stie daca un obiect este sau nu selectat. Poti folosi majoritatea atributelor pentru aceasta, dar metoda cea mai simpla este utilizarea unei clase CSS. Nu numai ca o clasa CSS ii spune functiei daca un obiect este selectat sau nu, dar poti adauga si reguli CSS pentru ca utilizatorii sa poata distinge vizual care obiecte sunt selectate. Pentru javascript avem nevoie doar de o instructiune if-else. Pentru aceasta demonstratie, numarul total de obiecte va fi memorat intr-un span, dar poti utiliza si functii ajax sau alte elemente interesante pentru a crea un select mai puternic.

function StartDragSelect(obj)   
{   
    if (obj.className == "selected")   
    {   
        obj.className = "not_selected";   
        selectNum--;   
    }   
    else  
    {   
        obj.className = "selected";   
        selectNum++;   
    }   
    document.getElementById("selectCount").innerHTML = selectNum;        
}

Asta este! In mod evident, acest exemplu este banal si utilizeaza Javascript imbricat (pentru simplificare). Dar sunt sigur ca iti poti imagina posibilitatile!

Pentru a downloada sursa aferenta acestui tutorial, acceseaza linkul de Download.

Pagina:
1
comenteaza printeaza
Alte tutoriale Javascript:
Noteaza acest tutorial
Rating tutorial
 
(5 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (1) spune-ti parerea
dyamond dyamond , Sambata, 26 Septembrie 2009, ora 10:47
#1

Cum pot transmite variabile din Javascript intr-un swf (flash player 10)? Am nevoie ca doua swf-uri sa comunice intre ele? Exista cumva vreo tehnica de comunicare directa? sau trebuie trecut prin javascript?

Raporteaza acest comentariu ca injurios!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4335
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4200
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4185
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4025
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Photoshop Vista Lightroom COREL DRAW Fotografie Flash Gimp PSD HTML Action Script PHP SWF AJAX CSS Javascript JSON Ruby on Rails Verilog Fireworks MySQL Illustrator Dreamweaver Sony Vegas Java StyleSheet Excel Swift 3D SEO Bridge Outlook XML Word Powerpoint RoR XHTML Python
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software