Botones checkbox con estilo iPhone usando jQuery y CSS

Bootstrap toggle buttons es el nombre que eligieron los creadores de este fantástico proyecto que intenta recrear un elemento que hoy por hoy es clásico en las interfaces de los teléfonos móviles, comúnmente llamados botones segmentados, o bien, botones de dos estados.

Para la creación de este bonito elemento solamente se utilizan dos tecnologías, por un lado CSS para lo relacionado al aspecto gráfico, y por otro, jQuery para recrear las acciones y animaciones que utilizan estos bonitos controles.

Las posibilidades de configuración son muchas, podemos utilizar el callback del plugin para realizar determinada acción al cambiar el estado del botón, modificar el aspecto, hasta cambiar mediante parámetros el tamaño y altura de las tipografías utilizadas.

Ejemplo de uso:

La estructura HTML es muy básica:

<div id="normal-toggle-button">
     <input type="checkbox" checked="checked">
</div>

Inicializamos el plugin:

$('#normal-toggle-button').toggleButtons();

Otro aspecto interesante de este plugin jQuery es que cuenta con algunos estilos instalados por defecto, los mismos pueden ser accedidos mediante la selección por parámetro al momento de la inicialización del plugin, a continuación inserto otro ejemplo que muestra como realizar este cambio:

$('#danger-toggle-button').toggleButtons({
    style: {
        // Estilos: ["primary", "danger", "info", "success", "warning"]
        enabled: "danger",
        disabled: "info"
    }
});

El plugin es muy simple pero útil, funciona perfectamente en la mayoría de los navegadores, y como se puede ver su instalación es demasiado sencilla. A tener en cuenta a la hora de desarrollar futuras interfaces para nuestros proyectos.

Web: Bootstrap toggle buttons