Las interfaces de aplicaciones móviles han estado utilizando interruptores deslizantes de encendido / apagado durante un tiempo. Estos se encuentran más comúnmente en la página de configuración donde los usuarios pueden actualizar las preferencias de su cuenta. Pero los diseñadores web se han dado cuenta y han construido muchas plataformas abiertas para generar sus propios controles deslizantes de encendido / apagado.
En este tutorial, quiero ver específicamente el complemento jQuery Toggles desarrollado por Simon Tabor. Viene con 5 temas de UI prediseñados que puede actualizar fácilmente. Además, tiene la opción de activar eventos de clic o diapositiva, que también pueden vincularse a una casilla de verificación de formulario en la página. Cualquiera que ejecute un navegador moderno habilitado para JavaScript debe poder experimentar el efecto completo. Eche un vistazo a mi demostración en vivo para echar un vistazo a lo que estamos construyendo.
Demo en vivo - Descargar código fuente
Empezando
El primer paso es descargar una copia del complemento jQuery Toggles. Puedes obtener esto del repositorio de Github, que también contiene un pequeño ejemplo en vivo. Ya he descargado una copia local de jQuery en una carpeta relativa / js. Mueve el archivo toggles.min.js en esta carpeta también.
Ahora para el CSS tendrás que copiar toggles.css junto con todos los temas / directorio. Esto incluirá las principales hojas de estilo que vienen incluidas junto con el complemento. Tenga en cuenta que su archivo toggles.css debe estar ubicado en el mismo directorio que la carpeta de temas / para que todo funcione correctamente.
También note que estoy haciendo referencia a otro archivo de tema por el nombre toggles-soft.css. Esto me permite aplicar una clase de CSS suave en un contenedor que luego afectará a todos mis elementos de conmutación internos (como lo señalara jQuery más adelante). Otras opciones de temas incluyen light, dark, iPhone o modern, y puedes ver cómo se ven en la página de inicio del plugin.
Ahora el formulario en sí no tiene mucho fuera de lo común, excepto por un control deslizante de cambio. Cuando presionamos enviar, el formulario activará una función jQuery que detiene la actualización típica de la página. En su lugar, generamos valores directos de los campos debajo del formulario para verificar cómo puede manejar las respuestas en su propia aplicación web.
Creando el formulario
Dentro del contenido de mi cuerpo he creado un elemento de formulario con el ID #forma básica. Esto puede dirigirse utilizando jQuery para manejar mejor la funcionalidad de envío. También he añadido la clase. .toggle-soft que es mi elección predeterminada de temas al diseñar este diseño.
Si saltamos hacia la parte inferior del formulario, notará un div con la ID. #actualizaciones de correo. El control deslizante de encendido / apagado en mi ejemplo determinará si se debe agregar un nuevo usuario a la lista de suscriptores del boletín. La clase adicional .palanca Es como nos dirigimos a todos los elementos a través de jQuery. .flotar derecho son solo reglas de posicionamiento adicionales para que el interruptor se ajuste bien en el formulario.
Observe también el elemento de la casilla de verificación debajo de la ID #emailupdatescheck. He desactivado este uso y está oculto en la página usando display: none; Para que los usuarios no se confundan. Afortunadamente todavía podemos actualizar la casilla de verificación dinámicamente en jQuery configurándola como un parámetro de opción.
Generando el interruptor
Tenga en cuenta que hay una gran cantidad de parámetros adicionales que puede configurar en esta función para personalizar la pantalla. Verifique los códigos de ejemplo en Github para una lista completa. En mi ejemplo, podemos actualizar una buena parte de las opciones útiles que pueden afectar la experiencia del usuario.
Encontrará este código JS en la parte inferior de la página justo antes del cierre etiqueta. La clase selectora .palanca funciona para cualquier otro elemento de palanca agregado en esta página. Le permite generar interruptores de encendido / apagado prácticamente infinitos con menos complicaciones, aunque también tendrá que crear una nueva casilla de verificación para cada control deslizante. La función toggles () se llama con parámetros internos contenidos dentro de llaves.
arrastrar y hacer clic son dos opciones que le permiten especificar qué tipo de interacción cambiará el valor del control deslizante. Mi ejemplo establece arrastrar a falso, lo que significa que solo debe hacer clic en el control deslizante para cambiar los valores. El texto debe explicarse por sí mismo sobre cómo actualizar el contenido de la pantalla interna. Recuerde encapsular estos valores dentro de otro conjunto de llaves, de lo contrario no funcionará.
El parámetro de la casilla de verificación es muy útil para que podamos pasar un elemento de forma real para adjuntarlo a este control deslizante. Tomará cualquier selector de objetos jQuery y, en este caso, apuntaré a nuestra casilla de verificación oculta. Ambos valores se cargan inicialmente en la posición OFF y podemos ver cómo se actualiza este valor mostrando algún texto de salida.
Valores de salida de formulario
Una vez que presiona el botón Enviar, puede notar que aparece un nuevo bloque de código debajo. Esto mostrará el valor de texto actual de los campos de nombre de usuario y contraseña, junto con un valor para la casilla de control deslizante. Echemos un vistazo al bloque final del código jQuery:
Cuando un usuario envía el formulario, ejecutamos e.preventDefault () para detener el envío.Luego determinamos si la casilla de verificación oculta está marcada actualmente o no. Si es así, entonces el valor del control deslizante se establece en? On? (De lo contrario, se establece en? off?). Teóricamente, podrías hacer estos valores como quieras, siempre y cuando tenga sentido. También hay otras dos variables que contienen el nombre de usuario y los valores de entrada de correo electrónico.
Finalmente, he reunido un conjunto concatenado de variables de cadena que conforman mi HTML de muestra. Esto se añade a la página en un div con el ID #codeoutput. No se mostrará nada al principio, pero una vez que hay algún HTML interno aparece como un código monoespaciado. Este es simplemente un método para determinar el valor de un control deslizante, pero funciona muy bien e incluso le permite pasarlo a un script de back-end utilizando Ajax.
Demo en vivo - Descargar código fuente
Pensamientos finales
No todas las formas requerirán una casilla de verificación o elemento de cambio. Las páginas de configuración de perfil de usuario son un lugar común para usar estos controles deslizantes. Otros lugares pueden incluir foros en línea o redes sociales donde los usuarios pueden cambiar entre las opciones de compartir y mostrar.
En última instancia, este complemento es una opción fantástica para implementar controles deslizantes de entrada de IU rápidos y simples. Siéntase libre de descargar una copia de mi código fuente e intente crear su propio diseño de formulario similar.