Como criar uma interface selecionável em CSS3

Tornando possível selecionar a partir de uma lista de itens em CSS3 reduz a chance de que o usuário irá inserir informações incorretas. Felizmente, HTML5 já vem com uma série de controles de seleção, mas você pode achar que esses controles não chegam a satisfazer as suas necessidades, às vezes.

Neste caso, uma técnica de seleção personalizada implementado com jQuery UI pode responder à necessidade. Uma sequência de selecção pode consistir em um

e uma série de

marcas, como mostrado aqui. (Você pode encontrar o código completo para este exemplo no Chapter pasta 06 interações do código para download como SelectContent.HTML).

Vermelho
Verde
Azul
Roxa

Note-se que o

actua como um recipiente e o

etiquetas de actuar como itens dentro do recipiente. (O exemplo inclui os estilos CSS para formatar cada um dos seletores, como o uso de um fundo vermelho para o elemento vermelho - um estilo #Selections define a largura dos selectores, juntamente com a margem e preenchimento usado para exibi-los.)

Não importa como você implementar a sua lista personalizada (e ele não precisa ser o arranjo mostrado), ele deve ter um arranjo de container / item como a mostrada aqui. Quando você tem a disposição no lugar, você pode criar uma seleção e um mecanismo de rastreamento como o mostrado no código a seguir:

// Criar uma matriz para acompanhar o Seleções selections.var = new Array () - // Pega os seleciona e unselects $ (function () {$ ( "# Seleções") selecionável ({selecionado:.. Função (evento, ui ) {// Verifique o item já não tenha sido // added.if (Selections.indexOf (ui.selected.id) == - 1) // Adicione o ID do item selecionado // aos array.Selections. push (ui.selected.id) -}, não selecionada: function (evento, ui) {// Encontrar a localização do unselected // item na array.var Index = Selections.indexOf (ui.unselected.id) - / / Remover que item.Selections.splice (Index, 1) -}}) -}) // Mostra os ShowResults results.function () {alert ( "Você selecionou:" + Seleções) -}

O Array, Seleções, mantém o controle da lista de seleção atual. Para fazer o

, Seleções, selecionáveis, você usa o método de selecção (). Este exemplo usa dois eventos, selecionados e não selecionados, para acompanhar as seleções atuais. Quando o usuário seleciona um novo item, o manipulador de eventos selecionados verifica se o item já não aparecem em Seleções, em seguida, ele empurra o novo item para Seleções.

O manipulador de eventos não selecionado deve executar duas tarefas. Primeiro, ele deve localizar o item não selecionado usando o método indexOf (). Em segundo lugar, ele deve usar tala () para remover esse item do Selections.

Este exemplo não fornece qualquer saída de fantasia, mas você pode ver por si mesmo o quão bem a metodologia de seleção funciona. Clique em Mostrar Seleções para exibir a lista de itens selecionados. O manipulador de eventos ShowResults () exibe uma lista das seleções para você. Em um aplicativo de produção, você poderia facilmente processar cada um dos itens selecionados.

A peça final para esta aplicação particular é a necessidade de definir um estilo especial. Você deve fornecer um meio para a tela para registrar o estado selecionado de um item em particular, o que significa fornecer valores para as #Selections estilo .ui-selecionados, como mostrado aqui:

#Selections .ui-Selecionados {background: black-color: branco-}

Quando um usuário seleciona um item, o fundo fica preto com texto branco que o usuário possa ver uma mudança visual. Você também pode modificar o texto como um segundo meio de ajudar o usuário a ver a seleção.

Semelhante

menu