Como fazer elementos selecionáveis ​​no AJAX para programação HTML5 e CSS3 - manequins

Você pode ter uma situação em que você deseja que o usuário escolha uma lista de elementos. AJAX permite aos programadores HTML5 e CSS3 essa opção. O widget selecionável é uma ótima maneira de criar essa funcionalidade a partir de uma lista comum. O usuário pode arrastar ou Ctrl + clique em itens para selecioná-los. As classes CSS especiais são aplicadas automaticamente para indicar que o item está sendo considerado para seleção ou selecionado.

Siga estas etapas para criar um elemento selecionável:

1. Comece com uma lista não ordenada.

   Crie uma lista padrão não ordenada no seu HTML. Dê o ul um ID para que ele possa ser identificado como um nó jQuery:

   
   selecionável
   
   alpha
   beta
   gamma
   delta
   
   
   
   
   
   
   
   
   

2. Adicionar classes CSS para selecionar e estados selecionados.

   Se desejar que os itens selecionáveis ​​alterem a aparência quando os itens estão sendo selecionados ou foram selecionados, adicione as classes CSS como mostrado. Algumas classes especiais (ui-selection e ui-selected) são predefinidas e serão adicionadas aos elementos nos momentos apropriados:

   h1 {text-align: center;} #selectable. ui-selection {background-color: grey;} #selectable. ui-selected {background-color: black; cor: branco;}
   

3. Na função init () , especifique a lista como um nó selecionável.

   Use a sintaxe jQuery padrão: selecionável ().

   $ ("# selecionável"). selecionável ();
   

A classe está anexada a todos os elementos quando eles foram selecionados. Certifique-se de adicionar algum tipo de CSS a esta classe, ou você não poderá dizer que os itens foram selecionados.

Se você quiser fazer algo com todos os itens que foram selecionados, basta criar um grupo jQuery de elementos com a classe selecionada pelo ui:

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