SummArg | Cursos y recursos para webmasters

07/04/2011

Checkbox mejorados con jQuery y CSS

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!

Descarga | Demo

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.

Dejar un comentario