Crea facilmente Checkboxes al estilo iPhone OS con jQuery

Los Checkboxes también conocidos como (Tickbox o casilla de verificación) son elementos de la interfaz gráfica de usuario que permiten 2 estados distintos, uno marcado y otro desmarcado, pero normalmente el diseño de un Checkbox es poco atractivo ya que se trata de una caja cuadrada de color blanco donde al dar click sobre ella aparece una palomita.

Pero gracias a el trabajo de Thomas Reynolds podemos difrutar de un diseño diferente para las Checkboxes de nuestra página web, y este diseño es nada más y nada menos que el mismo que tienen los Checkboxes del iPhone, y es que sin lugar a dudas el iPhone introdujo muchísimas mejoras en la estandarización de elementos de la interfaz gráfica de las aplicaciones móviles haciéndolo más fácil de usar (usable) y atractivo visualmente.

Aquí tienes unos ejemplos de cómo lucirían los Checkboxes al estilo iPhone OS.

Casillas de verificación estilo iPhone

Para implementar estos Checkboxes en tu sitio web debes de descargar el Script hecho por Thomas Reynolds desde aquí, descomprimirlo y ponerlo donde quieras, después debes de llamar al Script e inicializarlo con el siguiente código que va entre <head> y </head>.

<head>
  <script src="jquery-1.3.2.js" type="text/javascript"></script>
  <script src="jquery/iphone-style-checkboxes.js" type="text/javascript"></script>
  <link rel="stylesheet" href="path_to/style.css" type="text/css" media="screen" />
  <script type="text/javascript">
    $(document).ready(function() {
      $(\':checkbox\').iphoneStyle();
    });
  </script>
</head>

No está demás decir que las rutas de los los scritps deben ser las correctas, y listo ya con esto vas a tener tus Checkboxes al estilo iPhone OS.

Escríbe un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *