Como criar uma interface selecionável em css3

Video: Criando um botão mobile em HTML5, CSS e Jquery

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

marcas, como mostrado aqui. (Você pode encontrar o código completo para este exemplo na pasta Capítulo 06Interactions do código para download como SelectContent.HTML.)

Video: 01 Criando site com NetBeans html e css

Vermelho
Verde
Azul
Roxa

Observe que o

Video: Criando sites responsivos, criando um menu totalmente responsivo utilizando apenas html e css

etiquetas de agir como itens dentro do recipiente. (O exemplo inclui estilos CSS para formatar cada um dos selectores, tais como a utilização 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 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 o arranjo no lugar, você pode criar uma seleção e um mecanismo de rastreamento como o mostrado no seguinte código:

// Cria um array para acompanhar o Seleções selections.var = new Array () -. // Pega os seleciona e unselects $ (function () {$ ("#Selections") .selectable ({selecionado: function (event, ui) {// Verifique se o item não tenha já sido // added.if (Selections.indexOf (ui.selected.id) == - 1) // Adicione o id do item selecionado // à 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) - // Remove que item.Selections.splice (Index, 1) -}}) -}) // Mostra as ShowResults results.function () {alert ("Você selecionou: " Selecções +) -}

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

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 específico, o que significa fornecer valores para as #Selections estilo .ui-selecionados, como mostrado aqui:

#Selections .ui-selecionados {background: black-color: white-}

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.