Hvordan man laver valgbare elementer i AJAX til HTML5 og CSS3 programmering - dummies

Du kan have en situation, hvor du vil have brugeren at vælge fra en liste over elementer. AJAX tillader HTML5 og CSS3 programmører denne mulighed. Den valgbare widget er en fantastisk måde at oprette denne funktionalitet på fra en almindelig liste. Brugeren kan trække eller Ctrl + klik på elementer for at vælge dem. Særlige CSS-klasser anvendes automatisk for at angive, at elementet overvejes for at vælge eller vælge.

Følg disse trin for at gøre et valgbart element:

1. Begynd med en uordnet liste.

   Byg en standard uordnet liste i din HTML. Giv ul et ID, så det kan identificeres som en jQuery-node:

   
   valgbar
   
   alfa
   beta
   gamma
   delta
   
   
   
   
   
   
   
   
   

2. Tilføj CSS klasser til valg og valgte tilstande.

   Hvis du vil have de valgte elementer til at ændre udseende, når elementerne vælges eller er blevet valgt, skal du tilføje CSS-klasser som vist. Nogle specielle klasser (ui-selektion og ui-valgt) er foruddefineret og vil blive tilføjet til elementerne på de relevante tidspunkter:

   h1 {text-align: center;} #selectable. ui-valg {background-color: gray;} #selectable. ui-valgt {baggrundsfarve: sort; farve: hvid;}
   

3. I funktionen init () skal du angive listen som en valgbar node.

   Brug standard jQuery-syntaks: valgbar ().

   $ ("# valgbar"). valgbar ();
   

Klassen er knyttet til alle elementer, når de er valgt. Sørg for at tilføje en slags CSS til denne klasse, eller du vil ikke kunne fortælle, at elementer er blevet valgt.

Hvis du vil gøre noget med alle de elementer, der er valgt, skal du bare oprette en jQuery-gruppe af elementer med den ikke-valgte klasse:

var selectedItems = $ ("ui-selected");