Come creare elementi selezionabili in AJAX per la programmazione in HTML5 e CSS3 - dummies

Potresti avere una situazione in cui desideri che l'utente scelga da un elenco di elementi. AJAX consente ai programmatori HTML5 e CSS3 quell'opzione. Il widget selezionabile è un ottimo modo per creare questa funzionalità da una lista ordinaria. L'utente può trascinare o Ctrl + clic sugli elementi per selezionarli. Le classi speciali CSS vengono automaticamente applicate per indicare che l'elemento viene considerato per la selezione o la selezione.

Segui questi passi per rendere un elemento selezionabile:

1. Inizia con una lista non ordinata.

   Crea un elenco standard non ordinato nel tuo codice HTML. Dare a ul un ID in modo che possa essere identificato come nodo jQuery:

   
   selezionabile
   
   alfa
   beta
   gamma
   delta
   
   
   
   
   
   
   
   
   

2. Aggiungi classi CSS per la selezione e gli stati selezionati.

   Se desideri che gli elementi selezionabili cambino aspetto quando gli elementi vengono selezionati o sono stati selezionati, aggiungi le classi CSS come mostrato. Alcune classi speciali (selezione ui e selezione ui) sono predefinite e verranno aggiunte agli elementi nei momenti appropriati:

   h1 {allineamento del testo: centro;} #selectable. ui-selection {background-color: gray;} #selectable. ui-selected {background-color: black; color: white;}
   

3. Nella funzione init () , specificare l'elenco come nodo selezionabile.

   Usa la sintassi jQuery standard: selezionabile ().

   $ ("# selezionabile"). selezionabile ();
   

La classe è associata a tutti gli elementi quando sono stati selezionati. Assicurati di aggiungere qualche tipo di CSS a questo corso, altrimenti non sarai in grado di dire che gli elementi sono stati selezionati.

Se vuoi fare qualcosa con tutti gli elementi che sono stati selezionati, basta creare un gruppo jQuery di elementi con la classe selezionata da ui:

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