Video: Video Tutor: XD Configurar páginas e botões 2024
Todos los widgets de jQuery UI se prestan a la personalización de CSS3. La mayoría de los cambios que hace se relacionan con el uso de funciones integradas correctamente. También puede trabajar con el CSS que jQuery UI emplea para formatear los widgets para producir efectos especiales.
Por supuesto, si nada más, siempre puedes usar JavaScript para modificar el comportamiento real del widget según sea necesario. El punto es que puede cambiar los widgets (como Spinner) para satisfacer necesidades específicas sin tener que reinventar la rueda. Las modificaciones suelen ser cortas y fáciles de hacer, lo que significa que no tiene que empezar de cero con una idea que debe codificar a mano.
Los rotadores son populares porque puedes usarlos para controlar la entrada del usuario de varias maneras. La idea es proporcionar control para los datos que normalmente son variables, por lo que no puede usar algo como un cuadro de lista desplegable. Uno de los usos más interesantes de los hilanderos se muestra en el sitio Ben Knows Code.
En este caso, el autor muestra cómo realizar tareas tales como mover la ubicación de las flechas y crear una ruleta alfabética. El ejemplo utilizado aquí reproduce el ejemplo en este sitio, pero es un poco más sencillo y más fácil de entender. Una vez que comprenda este ejemplo, puede ir al sitio de Ben Knows Code y comprender ese ejemplo de inmediato.
Los rotadores normalmente se ocupan de la entrada numérica. Sin embargo, es posible que tenga una necesidad de entrada alfabética. Para crear una entrada alfabética, debe dar la apariencia de letras sin usar letras, porque el widget Spinner solo funciona con números. El siguiente ejemplo toma un widget jQuery UI Spinner estándar y lo transforma para usar letras en lugar de números.
$ (function () {var CurrentValue = 65; var ThisSpinner = $ ("# Spinner"). Spinner ({// Establece el mínimo para el código para A // y el máximo para el código para Z. min: 65, max: 90, // Cuando el usuario comienza a girar la rueda giratoria, // convierte el valor a un número y oculta el // texto de la vista. Start: function (ui, event) {ThisSpinner. Spinner ("value ", CurrentValue); $ (" # Spinner "). Css (" color "," transparent ");}, // Cuando el usuario deja de girar el spinner, // guarda el valor numérico, conviértalo en una // letra y mostrar el texto en pantalla. stop: function (ui, event) {CurrentValue = ThisSpinner. spinner ("value"); ThisSpinner. spinner ("value", String. fromCharCode (CurrentValue)); $ ("# Spinner"). css ("color", "verde");}});});
El código comienza creando una variable, CurrentValue, que rastrea el valor numérico de la ruleta.El valor, 65, es el equivalente numérico de la letra A. Entonces, el spinner comienza con un valor de A, pero almacena este valor como el número 65.
El spinner siguiente, ThisSpinner, viene después. Debe establecer valores mínimos y máximos que reflejen los valores numéricos de A y Z. Esta misma técnica puede funcionar para cualquier serie de letras. Podrías usar letras minúsculas con la misma facilidad, si así lo deseas. Para el caso, cualquier serie funcionará, incluidos los caracteres especiales. Incluso es posible usar este enfoque para los valores enumerados.
El enfoque más simple proporciona controladores para los eventos de inicio y detención. Cuando el usuario hace clic en una de las dos flechas, comienza un evento de giro. El cambio ocurre, y luego el giro se detiene. Para que la ruleta funcione correctamente, el atributo de valor debe contener un valor numérico.
El código establece el valor en CurrentValue, que es el código que equivale a la letra seleccionada actualmente. Sin embargo, en este punto, puede ver el valor numérico como texto en la ruleta, lo cual es una distracción. Para evitar que esto suceda, el controlador de eventos también establece el color del texto en transparente, por lo que el usuario no puede ver el texto en pantalla.
Asegúrese de pensar en cómo establece los colores para los elementos ocultos. Hay una tendencia entre los desarrolladores de establecer el color del elemento oculto en el color de fondo, pero el color de fondo puede cambiar. Aunque muchas referencias no lo mencionan, uno de los colores reconocidos es transparente, lo que significa que no tiene ningún color. Siempre use objetos transparentes cuando quiera esconder algo.
El controlador de eventos de detención almacena el nuevo valor de referencia en CurrentValue. Luego convierte el valor numérico de un número, como 65, en una letra, como A. El código 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 de jQuery UI. En este caso, no desea que el usuario pueda escribir más de un carácter, por lo que el ancho del widget se cambia para aceptar solo una letra. Además, el color del texto cambia a verde, como se muestra aquí:
. ui-spinner {ancho: 45px;}. ui-spinner-input {color: green;}
El uso de 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 resultados realmente interesantes.
