Como definir um controle css3 especializada

Todos os widgets jQuery UI se prestam a personalização CSS3. A maioria das mudanças que você faz negócio com o uso de recursos internos corretamente. Você também pode trabalhar com o CSS que jQuery UI emprega para formatar os widgets para produzir efeitos especiais.

Claro que, se nada mais, você sempre pode usar javascript para modificar o comportamento real widget como necessário. O ponto é que você pode mudar os widgets (como Spinner) para atender necessidades específicas, sem ter que reinventar a roda. As modificações são geralmente curtos e fácil de fazer, o que significa que você não tem que começar do zero com uma idéia que você tem que código manualmente.

Spinners são populares porque você pode usá-los para controlar a entrada do usuário em uma série de maneiras. A idéia é fornecer controle de dados que é normalmente variável, então você não pode usar algo como uma caixa de listagem drop-down. Um dos usos mais interessantes da spinners é mostrado na Ben sabe Código local.

Neste caso, o autor mostra como executar tarefas como mover a localização das setas e criando um girador alfabética. O exemplo usado aqui joga fora o exemplo neste local, mas é um pouco mais simples e mais fácil de entender. Depois de entender este exemplo, você pode ir para o Ben sabe local Código e compreender que o exemplo imediatamente.

Spinners normalmente lidar com entrada numérica. No entanto, você pode ter uma necessidade para a entrada alfabética vez. Para criar uma entrada alfabética, você precisa dar a aparência de letras sem realmente usando letras, porque o widget Spinner funciona apenas com números. O exemplo a seguir leva um widget padrão jQuery UI Spinner e transforma-lo para usar letras em vez de números.

$ (Função () {var CurrentValue = 65-var ThisSpinner = $ ("#Spinner") .spinner ({// Definir o mínimo para o código para A // e o máximo para o código para Z.min: 65, max: 90, // Quando o usuário começa a girar o botão rotativo, // converte o valor para um número e ocultar o texto // da view.start: function (ui, event) {ThisSpinner.spinner ("valor", CurrentValue) - $ ("#Spinner") Css ("cor", "transparente") -}, // Quando o usuário pára de girar o botão rotativo, // salva o valor numérico, convertê-lo em uma carta // e exibir o texto onscreen.stop: function (ui, event) {CurrentValue = ThisSpinner.spinner ("valor") -ThisSpinner.spinner ("valor", String.fromCharCode (CurrentValue)) - $ ("#Spinner") Css ("cor", "verde") -}}) -}) -

O código começa com a criação de uma variável, CurrentValue, que controla o valor numérico do elemento rotativo. O valor, 65, é o equivalente numérico da carta UMA. Então, o spinner começa com um valor de A, mas ele armazena este valor como o número 65.

Criando o girador, ThisSpinner, vem a seguir. Você deve definir valores mínimos e máximos que refletem os valores numéricos de UMA e Z. Essa mesma técnica pode trabalhar para qualquer série de cartas. Você poderia facilmente usar letras minúsculas, se desejado. Para essa matéria, qualquer série vai funcionar, incluindo caracteres especiais. É ainda possível usar essa abordagem para valores enumerados.

A abordagem mais simples fornece manipuladores para o início e parar eventos. Quando o usuário clica em um dos dois setas, ele começa um evento rodada. A mudança ocorre, em seguida, o spin pára. Para o spinner para funcionar corretamente, o atributo de valor deve conter um valor numérico.

O código define o valor para CurrentValue, que é o código que equivale à letra selecionada. No entanto, neste momento, você pode ver o valor numérico como texto no girador, que é perturbador. Para evitar que isso aconteça, o manipulador de eventos também define a cor do texto para transparente, de modo que o usuário não pode realmente ver o texto na tela.

Certifique-se de que você pense sobre como você definir as cores para itens escondidos. Há uma tendência com alguns desenvolvedores para definir a cor do item oculto para a cor de fundo, mas a cor de fundo pode mudar. Mesmo que muitas referências na verdade, não indicá-lo, uma das cores reconhecidas é transparente, o que significa que nenhuma cor em tudo. Sempre use objetos transparentes quando você quer esconder alguma coisa.

Video: HTML5 y CSS3 - 15 - Definir opacidad en css3

O manipulador de eventos parada armazena o novo valor girador em CurrentValue. Em seguida, converte o valor numérico de uma série, tais como 65, de uma letra, tal como UMA. O código, em seguida, muda a cor do texto para verde para que o usuário pode ver a letra na tela.

Video: Curso Twitter Bootstrap: Formulários Parte 1 - Controle de Tamanho #07

Este exemplo também muda alguns dos estilos de widgets. Estes estilos são listados como parte do arquivo UI CSS jQuery. Neste caso, você não quer que o usuário seja capaz de digitar mais de um personagem, então a largura do widget é alterada para aceitar apenas uma letra. Além disso, a cor do texto é alterado para verde, como mostrado aqui:

.ui-giratório {largura: 45 pixels;}. ui-girador de entrada {cor: verde-}

Usando uma combinação de eventos e CSS permite criar todos os tipos de efeitos personalizados com qualquer um dos widgets do jQuery UI. Tudo que você precisa fazer é experimentar um pouco para criar alguma saída realmente interessante.