¿Que ha pasado con el diseño?

Hoy el CSS Naked Day, un día (48 horas para abarcar todo el planeta) en el que las páginas web se desnudan para promover el uso de los estándares web. Si quieres saber más sobre el tema visita página del Annual CSS Naked Day.


Contenido

Mejora la estética de tus Checkboxes con jQuery

27 Ago

+ 8

Me encuentro un completo tutorial con el que podremos reemplazar el aspecto de los elementos <input type="checkbox" /> por otro mucho más atractivo.

prettychecks
(Ver Imagen)

Básicamente se trata de un HTML adaptado a la nueva estética, CSS que le dá ese elegante aspecto y unas líneas de jQuery (aunque puede ser cualquier framework, o ninguno de ellos).

HTML

<form>
	<fieldset>
		<label for="choices">
			<ul>
				<li>
					<input name="jqdemo" value="value1" type="checkbox" />
					<p>Here is the first selection</p>
					<a href="#">Select</a>
					<a href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo" value="value2" type="checkbox" />
					<p>Here is the second selection</p>
					<a href="#">Select</a>
					<a href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo" value="value3" type="checkbox" />
					<p>Here is the third selection</p>
					<a href="#">Select</a>
					<a href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo"value="value4" type="checkbox" />
					<p>Here is the fourth selection</p>
					<a href="#">Select</a>
					<a href="#">Cancel</a>
				</li>
			</ul>
		</label>
		<div style="clear: both;"></div>
		<button type="submit" name="submitbutton" title="Submit the form" />Send it!
	</fieldset>
</form>

Javascript

// jQuery
$(document).ready(function() {
 $(".checklist .checkbox-select").click(
  function(event) {
   event.preventDefault();
   $(this).parent().addClass("selected");
   $(this).parent().find(":checkbox").attr("checked","checked");
  }
 );

 $(".checklist .checkbox-deselect").click(
  function(event) {
   event.preventDefault();
   $(this).parent().removeClass("selected");
   $(this).parent().find(":checkbox").removeAttr("checked");
  }
 );
});

// MooTools
// No lo he podido probar
window.addEvent('domready', function() { 

 $$(".checklist .checkbox-select").addEvent('click', function(event){
   event.preventDefault();
   this.getParent().addClass("selected");
   this.getParent().getElements(":checkbox").each(function(el){
    el.attr("checked","checked");
   });
  }
 );

 $$(".checklist .checkbox-deselect").addEvent('click', function(event){
   event.preventDefault();
   this.getParent().removeClass("selected");
   this.getParent().getElements(":checkbox").each(function(el){
    el.removeAttr("checked");
   });
 });
});

El CSS y los Sprites los teneis en esta página. Si quereis verlo funcionando podeis verlo directamente desde aquí.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.