Checkboxes como los del iPhone solo con CSS y jQuery

Los que somos usuarios tanto del iPhone como del iPod Touch conocemos lo cómodo que resultan las checkboxes en ambos dispositivos, con su forma tan simple y con su pequeñito efecto de desplazamiento muestran muy fácilmente el estado en que se encuentran sin necesidad de leer ni entender absolutamente nada, es por esa simple razón que llevar esta posibilidad a nuestros sitios web se vuelve una opción interesante.

checkbox iphone

La instalación de esta javascript es muy simple basta con descargar el archivo comprimido, tanto con los js como con las imágenes, y proceder a enlazarlos desde nuestro el head de nuestro sitio web.

PLAIN TEXT
JAVASCRIPT:
  1. <head>
  2.   <script src="path_to/jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script>
  3.   <script src="path_to/iphone-style-checkboxes.js" type="text/javascript" charset="utf-8"></script>
  4.   <link rel="stylesheet" href="path_to/style.css" type="text/css" media="screen" charset="utf-8" />
  5.   <script type="text/javascript" charset="utf-8">
  6.     $(document).ready(function() {
  7.       $(':checkbox').iphoneStyle();
  8.     });
  9.   </script>
  10. </head>

Y por ultimo tenemos la opción de personalizar el texto que aparece, para hacerlo basta con utilizar el siguiente código:

PLAIN TEXT
JAVASCRIPT:
  1. $(':checkbox').iphoneStyle({
  2.   checkedLabel: 'YES',
  3.   uncheckedLabel: 'NO'
  4. });

Pueden leer mas y descargar los códigos en Award winning fjords

Tags: , , ,

Escrito por Pablo

Programador con más de 10 años de experiencia, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.

El Miércoles, Junio 17th, 2009 a las 13:16 y fue guardada bajo Programación.

Compartir esta entrada

Entradas relacionadas

3 Comentarios en “Checkboxes como los del iPhone solo con CSS y jQuery”

  1. Nahuel Sanchez Dice:
    Junio 17th, 2009 a las 13:58

    Me enamoré, no se me ocurre en donde mandarlos…

  2. Pablo Dice:
    Junio 17th, 2009 a las 14:06

    @Nahuel: Sabia que te iban a gustar, podes usarlo en …. o en …. . Seguro que quedan de 10 estos checkboxes ahi no? :D

  3. Checkboxes como los del iphone - URIELMANIA Dice:
    Junio 19th, 2009 a las 22:49

    [...] leer mas en kabytes y descargar los códigos en Award winning fjords Tags: checkbox, css, diseñar, diseño, [...]

Deja tu comentario

Seguir comentarios por RSS