Como definir um controle especializado CSS3
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 às 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 ideia é 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 de fiação é mostrado em 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 site, mas é um pouco mais simples e mais fácil de entender. Depois de entender este exemplo, você pode ir para o Ben sabe site de Código e compreender que o exemplo imediatamente.
Spinners normalmente lidar com entrada numérica. No entanto, você pode ter uma necessidade de 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 toma um widget padrão jQuery UI Spinner e transforma-lo para usar letras em vez de números.
$ (Function () {var CurrentValue = 65-var ThisSpinner = $ ( "# Spinner") giratório ({// Definir o mínimo para o código para um // e o máximo para o código para Z.min:. 65, máx: 90, // Quando o usuário começa a girar o botão giratório, // converter o valor para um número e ocultar o texto // partir view.start: function (ui, evento) ThisSpinner.spinner ( "valor" {, CurrentValue ) - $ ( "# Spinner") css ( "cor", "transparente") -.}, // Quando o usuário pára de girar o botão giratório, // salva o valor numérico, convertê-lo para um // carta e exibir a onscreen.stop texto: function (ui, event) {CurrentValue =ThisSpinner.spinner("value")-ThisSpinner.spinner("value",String.fromCharCode(CurrentValue))-$("#Spinner").css("color", "verde")-}})-})-O código começa criando uma variável, CurrentValue, que rastreia o valor numérico do controle giratório. O valor, 65, é o equivalente numérico da carta UMA. Então, o botão rotativo é iniciado com um valor de A, mas 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 flechas, ele começa um evento de rotação. A mudança ocorre, em seguida, o spin pára. Para o botão rotativo para funcionar correctamente, 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 momento. No entanto, neste momento, você pode ver o valor numérico como texto no botão rotativo, o 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 os itens ocultos. 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 algo.
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.
Este exemplo também altera alguns dos estilos de widget. 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 elemento é alterada para aceitar apenas uma letra. Além disso, a cor do texto é alterada para verde, como mostrado a seguir:
.ui-girador {width: 45px;}. ui-girador de entrada {color: 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.