Hvordan du lager utvalgbare elementer i AJAX for HTML5 og CSS3 programmering - dummies

Du kan ha en situasjon der du vil at brukeren skal velge mellom en liste over elementer. AJAX tillater HTML5 og CSS3 programmerere dette alternativet. Den valgbare widgeten er en fin måte å skape denne funksjonaliteten på fra en vanlig liste. Brukeren kan dra eller Ctrl + klikk på elementer for å velge dem. Spesielle CSS-klasser brukes automatisk for å indikere at elementet blir vurdert for å velge eller velge.

Følg disse trinnene for å lage et valgbart element:

1. Begynn med en uordnet liste.

   Bygg en standard uordnet liste i HTML-en din. Gi ul en ID slik at den kan identifiseres som en jQuery-node:

   
   valgbar
   
   alfa
   beta
   gamma
   delta
   
   
   
   
   
   
   
   
   

2. Legg til CSS-klasser for valg og valgte stater.

   Hvis du vil at de valgbare elementene skal endre utseende når elementene blir valgt eller er valgt, legger du til CSS-klasser som vist. Noen spesielle klasser (ui-valg og ui-valgt) er forhåndsdefinert og vil bli lagt til elementene på de aktuelle tidspunktene:

   h1 {text-align: center;} #selectable. ui-velge {bakgrunnsfarge: grå;} #selekterbar. ui-valgt {bakgrunnsfarge: svart; farge: hvit;}
   

3. I init () -funksjonen, spesifiser listen som en valgbar knutepunkt.

   Bruk standard jQuery-syntaks: valgbar ().

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

Klassen er festet til alle elementene når de er valgt. Pass på å legge til en slags CSS i denne klassen, eller du vil ikke kunne fortelle at elementene er valgt.

Hvis du vil gjøre noe med alle elementene som er valgt, må du bare opprette en jQuery-gruppe av elementer med ui-valgt klasse:

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