Cum sa faci elemente selectabile in AJAX pentru HTML5 si CSS3 Programare - dummies

Este posibil să aveți o situație în care doriți ca utilizatorul să aleagă dintr-o listă de elemente. AJAX permite programatorilor HTML5 și CSS3 această opțiune. Widgetul selectabil este o modalitate foarte bună de a crea această funcție dintr-o listă obișnuită. Utilizatorul poate glisa sau Ctrl + clic pe elemente pentru a le selecta. Clasele speciale CSS sunt aplicate automat pentru a indica faptul că elementul este luat în considerare pentru selectarea sau selectarea.

Urmați acești pași pentru a face un element selectabil:

1. Începeți cu o listă neordonată.

   Creați o listă standard neordonată în HTML. Dați ul un ID astfel încât să poată fi identificat ca un nod jQuery:

   
   selectabil
   
   alfa
   beta
   gamma
   delta
   
   
   
   
   
   
   
   
   

2. Adăugați clase CSS pentru selectarea și selectarea stărilor.

   Dacă doriți ca elementele selectabile să schimbe aspectul atunci când elementele sunt selectate sau au fost selectate, adăugați clase CSS după cum se arată. Unele clase speciale (ui-selecting și ui-select) sunt predefinite și vor fi adăugate elementelor la momentele potrivite:

   h1 {text-align: center;} #selectable. ui-selectarea {background-color: gri;} # selectabil. ui-selectat {culoare-fundal: negru; culoare: alb;}
   

3. În funcția init () , specificați lista ca nod selectabil.

   Utilizați sintaxa standard jQuery: selectable ().

   $ ("# selectabil"). selectabil ();
   

Clasa este atașată tuturor elementelor atunci când au fost selectate. Asigurați-vă că adăugați un anumit tip de CSS în această clasă sau nu veți putea spune că elementele au fost selectate.

Dacă doriți să faceți ceva cu toate elementele selectate, trebuie doar să creați un grup de elemente jQuery cu clasa ui selectată:

var selectedItems = $ (". Ui-selected");