Checkbox estilo iPhone para tus formularios web

Si estás buscando alguna alternativa para cambiar la visualización de tus formularios web, especialmente para el uso de controles checkbox, este simple pero bonito script te permite crear casillas de verificación como las utilizadas en los iPhone.

El script puede ser muy útil para crear formularios en los que el usuario deba seleccionar entre dos opciones posibles, ideal para cuestionarios por ejemplo.

A continuación puedes ver unas capturas de pantalla de los checkbox. El cambio de las opciones en las cajas de verificación, se puede realizar haciendo clic en el texto o también arrastrando en forma manual el separador o slider.

También puedes verlos en funcionamiento en la página del autor en este enlace.

Ejemplo

En el archivo de descarga hay dos ejemplos o demostraciones de como implementar los checkbox. ( Ficheros jquery-demo.html y prototype-demo.html ). En ambos podrás ver como asignar los distintos tipos de checkbox ( On/OFF, con texto personalizado), como deshabilitar y habilitar los controles, como recuperar el valor actual, es decir poder averiguar si se encuentra o no seleccionado.

Notas: Para cambiar el label o texto de las opciones, así como también algunas otras configuraciones, puedes editar el archivo Javascript iphone-style-checkboxes.js.

Por ejemplo aquí puedes establecer el delay o duración del efecto animado para el deslizamiento, la etiqueta ON/OFF, por otro valor, SI/NO, etc...

Para ello debes ubicar la línea 199 en el código fuente:

$[iphoneStyle].defaults = { duration: 200, // Time spent during slide animation checkedLabel: 'ON', // Text content of "on" state uncheckedLabel: 'OFF', // Text content of "off" state resizeHandle: true, // Automatically resize the handle to cover either label resizeContainer: true, // Automatically resize the widget to contain the labels disabledClass: 'iPhoneCheckDisabled', containerClass: 'iPhoneCheckContainer', labelOnClass: 'iPhoneCheckLabelOn', labelOffClass: 'iPhoneCheckLabelOff', handleClass: 'iPhoneCheckHandle', handleCenterClass: 'iPhoneCheckHandleCenter', handleRightClass: 'iPhoneCheckHandleRight' };

Establecer texto largo y otras configuraciones

Para poder establecer texto largo en el control y modificar otras opciones, mira en la línea 40 del código fuente en el archivo prototype-demo.html.