Checkbox: Botones (switch) estilo iOS 7

Switchery es una pequeña biblioteca para personalizar el componente HTML checkbox modificando sus estilos para lograr unos switch al mejor estilo iOS 7.

Este recurso utiliza CSS en lo que respecta a lo visual y JavaScript para todo lo referido a su funcionamiento. El proyecto no tiene dependencias y funciona perfectamente en los navegadores más modernos: Chrome, Firefox, Opera, Internet Explorer 8+ y Safari.

botones estilo iOS 7

Además su licencia es del tipo MIT, lo que garantiza su libre utilización tanto para proyectos personales como comerciales.

La instalación es muy sencilla.

<link rel="stylesheet" href="standalone/switchery.css" />
<script src="standalone/switchery.js"></script>

Si lo desean también pueden realizar la instalación directamente por medio de Bower o bien como componente.

Luego necesitamos un checkbox común y corriente:

<input type="checkbox" class="js-switch" checked />

Una vez instalado este recurso su inicialización se realiza en muy pocas lineas de código.

var Switchery = require('switchery');
var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);

También pueden personalizar su aspecto utilizando los parámetros definidos en la documentación:

defaults = {
    color    : '#64bd63',
    className: 'switchery',
    disabled : false,
    speed    : '0.1s'
}

Como es una solución del tipo standalone, su uso con multiples dispositivos es un poco más complicada que si utilizásemos jQuery (también se puede), pero nada del otro mundo:

var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
  var switchery = new Switchery(html);
});

Switchery es otro proyecto simple pero que sirve para agregar algunos detalles para mejorar visualmente nuestras aplicaciones.