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.

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.

• Explicarea scriptarii cross-site
• VII. Protejarea unei pagini cu o parola
• Crearea unui menu glisant in Javascript
• Comunicarea dintre Ajax si PHP
• I. Introducere in Javascript