Convertir casilla de verificación HTML en iOS 7 Cambiar con Switchery.js

Checkbox es muy útil para proporcionar la entrada de los usuarios. Cuando los usuarios ingresan el valor verdadero, muestra una marca dentro del cuadro cuadrado pequeño. Personalizar el aspecto de la casilla de verificación se puede hacer fácilmente a través de CSS. Aun así, la personalización afecta solo el estilo de cuadros y cuadros . Para personalizar la casilla de verificación con un diseño realmente diferente, requiere bastante codificación.

Sin embargo, con la ayuda de Switchery, la personalización de casillas de verificación es pan comido. Puede convertir automáticamente su elemento de casilla de verificación en un hermoso botón de cambio similar al iOS7. Los interruptores también se pueden personalizar para que coincida perfectamente con su diseño. Vamos a ver.

Primeros pasos con Switchery

Switchery es una biblioteca javascript independiente y gratuita. Para instalarlo, solo necesita incluir el javascript Switchery y el archivo de estilo en su web. Puede obtener ambos archivos de GitHub.

Para convertir su casilla pasada de moda, simplemente incluya su elemento de casilla de verificación con una clase que se remitirá a Conmutación.

Dar el estado inicial de la casilla también es muy fácil. Puede hacerlo incluyendo el atributo checked dentro de HTML para el estado comprobado cuando se carga por primera vez. Por ejemplo, agregaremos una clase de demo en una casilla de verificación con el estado marcado así:

Por ahora, la casilla de verificación no cambia aún. Todavía tenemos que agregar el siguiente código de JavaScript en el HTML. Aquí es donde ponemos la clase de casilla de verificación definida, y le damos algunas opciones (si es necesario).

¡Eso es!

Personaliza el interruptor

Para dar alguna opción, se puede hacer dentro de la javascript. Esta opción puede cambiar la apariencia del interruptor predeterminado. Las siguientes son todas las opciones disponibles:

• color : para cambiar el color del elemento del interruptor, trabaje con el valor HEX o RGB
• secondaryColor : para cambiar el color de estado "off" del switch shadow y border
• className : personaliza el nombre de la clase de elemento de conmutador diseñado en switchery.css
• disabled : para habilitar o deshabilitar los eventos de clic de encendido, rellenado con booleano (verdadero o falso)
• disabledOpacity : para cambiar la opacidad del interruptor cuando está disabled es verdadero, que va de 0 a 1
• speed : cambie la duración del tiempo de transición, por ejemplo, '0.1s', '0.5s', '2.2s'

Por ejemplo, con nuestro cambio anterior, cambiemos su primer color y el secundario. En la variable init, después del atributo elem, simplemente coloque la opción dentro del par de curl de par, así:

Y aqui esta el resultado:

En lugar de personalizar el diseño de estado solamente, todavía hay muchas opciones disponibles, como mostrar múltiples conmutadores o vincular el conmutador con otros elementos y obtener su estado actual. Como siempre, la página de documentación es un lugar útil para visitar.

Conclusión

Con una herramienta como Switchery, la adaptación de cualquier tipo de diseño desde cualquier dispositivo es cada vez más fácil. Aún más, ha sido probado y es compatible con muchos navegadores modernos como Chrome, Firefox, Opera, Safari e IE8 +. Si desea adaptar otro diseño de widgets de interfaz de usuario de estilo iOS 7, es posible que desee comprobar Powerange para controlar el control deslizante de rango.

Por qué ser positivo no siempre es la mejor ruta para tomar

Hay toneladas de literatura que defienden el "pensamiento positivo" como la clave de la felicidad. Si bien numerosos hallazgos de investigación han sacado a la luz los muchos beneficios de mantener una perspectiva optimista en la vida, algunos de nosotros preferimos mantener una perspectiva más realista y rechazar adoptar una visión del mundo de Pollyanna.Di

(Consejos de tecnología y diseño)

20 ideas de regalos para amantes de los libros

Si bien muchas personas en estos días prefieren los libros digitales o libros electrónicos, todavía hay muchos amantes de los libros entre nosotros. Solo porque leemos en el Kindle o en la tableta, no significa que no perdamos el contacto y el olor del papel o el sonido de las páginas.Al reflexionar sobre esto, decidí cambiar mi perspectiva por un momento rápido y pensar en lo que un amante de libros moderno puede necesitar . En e

(Consejos de tecnología y diseño)