Desde tutorialzine nos presentan un nuevo modo de mostrar nuestras checkboxes con un poco de jQuery y algunos truquitos CSS para darles un look mas moderno. Para darle una vuelta de tuerca al formulario en vez de tildar o des tildar casilleros deberemos arrastrar hacia la derecha o hacia la izquierda el botón plateado que contiene cada barra con texto. Ingenioso y llamativo!
El formulario en HTML se escribe en listas desordenadas.
<form method="get" action="./">
<ul>
<li>
<label for="ch_effects">Display effects: </label>
<input type="checkbox" id="ch_effects" name="ch_effects" data-on="Show effects" data-off="Hide effects" />
</li>
<li>
<label for="ch_location">Enable location tracking: </label>
<input type="checkbox" id="ch_location" name="ch_location" checked />
</li>
<li>
<label for="ch_showsearch">Include me in search results: </label>
<input type="checkbox" id="ch_showsearch" name="ch_showsearch" />
</li>
<li>
<label for="ch_emails">Email notifications: </label>
<input type="checkbox" id="ch_emails" name="ch_emails" data-on="ON" data-off="OFF" />
</li>
</ul>
</form>Entre etiquetas <head> incluimos dos plantillas de estilo, una para la página y otra para el formulario exclusivamente.
<link rel="stylesheet" type="text/css" href="css/styles.css" /> <link rel="stylesheet" type="text/css" href="jquery.tzCheckbox/jquery.tzCheckbox.css" />
Antes del cierre de la etiqueta </body> vinculamos el documento con jQuery, con jQuery.tzCheckbox.js y con un archivo script.js que harán funcionar el efecto.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="jquery.tzCheckbox/jquery.tzCheckbox.js"></script> <script src="js/script.js"></script>
Finalmente en el tutorial nos muestran todo el código JavaScript y CSS con las explicaciones del caso para que todo marche como debería.
Emprendedora incansable, fundadora de SummArg y de SiteFun.