Hur man gör markerade element i AJAX för HTML5 och CSS3 programmering - dummies

Du kan ha en situation där du vill att användaren ska välja från en lista med element. AJAX tillåter HTML5 och CSS3 programmerare det alternativet. Den valbara widgeten är ett utmärkt sätt att skapa denna funktionalitet från en vanlig lista. Användaren kan dra eller Ctrl + klicka på objekt för att välja dem. Särskilda CSS-klasser tillämpas automatiskt för att ange att objektet övervägas för att välja eller välja.

Följ dessa steg för att göra ett valbart element:

1. Börja med en orörd lista.

   Bygg en obestämd lista i din HTML. Ge ul ett ID så att det kan identifieras som en jQuery-nod:

   
   valbar
   
   alfa
   beta
   gamma
   delta
   
   
   
   
   
   
   
   
   

2. Lägg till CSS-klasser för att välja och valda stater.

   Om du vill att de valbara objekten ska ändra utseende när objekten väljs eller har valts, lägg till CSS-klasser som visas. Vissa specialklasser (ui-select och ui-selected) är fördefinierade och kommer att läggas till elementen vid lämpliga tider:

   h1 {text-align: center;} #selectable. ui-select {background-color: gray;} #selectable. ui-selected {bakgrundsfärg: svart; färg: vit;}
   

3. I funktionen init () , ange listan som en valbar nod.

   Använd standard jQuery-syntax: väljbar ().

   $ ("# valbar"). valbara();
   

Klassen är kopplad till alla element när de har valts. Var noga med att lägga till någon typ av CSS i den här klassen, eller du kommer inte att kunna berätta att objekt har valts.

Om du vill göra något med alla objekt som har valts skapar du bara en jQuery-grupp av element med den ej valda klassen:

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