¿Cómo definir un control css3 especializada

Todos los widgets de jQuery UI se prestan a la personalización CSS3. La mayor parte de los cambios que hacen mucho con el uso de características integradas correctamente. También puede trabajar con el CSS que jQuery UI emplea para formatear los widgets para producir efectos especiales.

Por supuesto, si no otra cosa, siempre se puede utilizar javascript para modificar el comportamiento real Reproductor según sea necesario. El punto es que usted puede cambiar los widgets (como Spinner) para satisfacer las necesidades específicas sin tener que reinventar la rueda. Las modificaciones son generalmente cortos y fáciles de hacer, lo que significa que usted no tiene que empezar de cero con una idea que tiene que código a mano.

Spinners son populares porque se puede utilizar para controlar la entrada del usuario en un número de maneras. La idea es proporcionar un control de datos que normalmente es variable, de modo que usted no puede utilizar algo así como un cuadro de lista desplegable. Uno de los usos más interesantes de los hilanderos se muestra en Ben Knows Código sitio.

En este caso, el autor muestra cómo realizar tareas como mover la ubicación de las flechas y la creación de un spinner alfabético. El ejemplo utilizado aquí juega con el ejemplo en este sitio, pero es un poco más sencillo y fácil de entender. Una vez que entienda este ejemplo, usted puede ir a la Ben Conoce Código sitio y entender que el ejemplo de inmediato.

Spinners normalmente se ocupan de entrada numérica. Sin embargo, es posible que tenga una necesidad de la introducción alfabética lugar. Para crear una entrada alfabética, es necesario dar la apariencia de las letras sin usar letras, porque el widget Spinner funciona sólo con números. El siguiente ejemplo toma un widget estándar jQuery UI Spinner y la transforma para usar letras en vez de números.

$ (function () {var CurrentValue = 65-var ThisSpinner = $ ("# Spinner") spinner ({// Establecer el mínimo para el código de A // y el máximo al código para Z.min:. 65, max: 90, // Cuando el usuario comienza a girar la ruleta //, convertir el valor de un número y ocultar el texto // desde view.start: function (ui, evento) {ThisSpinner.spinner ("valor", CurrentValue ) - $ ("# Spinner") CSS ("color", "transparente") -.}, // Cuando el usuario deja de girar la ruleta, // guardar el valor numérico, convertirlo en un // carta y mostrar la texto onscreen.stop: function (ui, evento) {CurrentValue =ThisSpinner.spinner("value")-ThisSpinner.spinner("value",String.fromCharCode(CurrentValue))-$("#Spinner").css("color", "verde")-}})-})-

El código comienza mediante la creación de una variable, CurrentValue, que rastrea el valor numérico de la hiladora. El valor, el 65, es el equivalente numérico de la carta A. Así que el spinner se inicia con un valor de A, pero que almacena este valor como el número 65.

Creación de la ruleta, ThisSpinner, que viene a continuación. Debe establecer los valores mínimos y máximos que reflejan los valores numéricos de LA y Z. Esta misma técnica puede funcionar para cualquier serie de letras. Usted sólo puede utilizar la misma facilidad con letras minúsculas, si se desea. Por lo demás, cualquier serie va a funcionar, incluyendo caracteres especiales. Es incluso posible utilizar este enfoque para los valores enumerados.

El enfoque más simple proporciona manejadores para el arranque y parada eventos. Cuando el usuario hace clic en una de las dos flechas, se inicia un evento de giro. El cambio se produce, y luego se detiene el giro. Para el control de giro para que funcione correctamente, el atributo de valor debe contener un valor numérico.

El código establece el valor de CurrentValue, que es el código que equivale a la letra seleccionada. Sin embargo, en este punto, se puede ver el valor numérico como texto en la ruleta, que es una distracción. Para evitar que esto suceda, el controlador de eventos también establece el color del texto a transparente, por lo que el usuario no puede ver realmente el texto en pantalla.

Asegúrese de que usted piensa acerca de cómo configurar los colores para los elementos ocultos. Hay una tendencia con algunos desarrolladores para establecer el color del elemento oculto para el color de fondo, pero el color de fondo se puede cambiar. A pesar de que muchas referencias en realidad no afirman que, uno de los colores reconocidos es transparente, lo que significa que no hay color en absoluto. Utilice siempre los objetos transparentes cuando se quiere ocultar algo.

El controlador de eventos parada almacena el nuevo valor spinner en CurrentValue. A continuación, convierte el valor numérico de un número, como 65, a una carta, como A. El código a continuación, cambia el color del texto a verde para que el usuario pueda ver la letra en pantalla.

Este ejemplo también cambia algunos de los estilos de widgets. Estos estilos se enumeran como parte del archivo CSS jQuery UI. En este caso, usted no desea que el usuario sea capaz de escribir más de un carácter, por lo que el ancho del widget se cambia a aceptar sólo una letra. Además, el color del texto se cambia a verde, como se muestra aquí:

.ui-spinner {width: 45px;}. ui-spinner-input {color: verde-}

Usando una combinación de eventos y CSS le permite crear todo tipo de efectos personalizados con cualquiera de los widgets de jQuery UI. Todo lo que necesitas hacer es experimentar un poco para crear una salida muy interesante.