Effetti maschera con clip e jQuery

ilDavid — Mon, 23 Nov 2009 16:48:05 +0000

Seguendo il post del 9 novembre di WebDesigner wall e dovendo sviluppare una cosa simile per un progetto, mi sono imbattuto in un piccolo problema: jQuery non supporta nativamente le animazioni sulla proprietÃ css clip.
La proprietÃ clip permette di creare una “maschera” che mostra solo una parte di un elemento block.
Per risolvere il problema di jQuery esiste un plugin che utilizzando la stessa sintassi di animate permette l’animazione di questa maschera. L’effetto Ã¨ davvero piacevole. (nella demo ho usato la sintassi deprecata senza virgole della proprietÃ clip, per renderla compatibile anche con IE.)

styleCheckbox: a jQuery plugin

ilDavid — Sun, 18 Jan 2009 19:38:47 +0000

Un piccolo plugin per personalizzare le checkbox dei form.
Sostituisce le checkbox in input type="hidden" e applica le classi checked e unchecked alla label della checkbox.

$.fn.styleCheckbox = function () {
	$(":checkbox").each ( function() {
		var nome=$(this).attr('id');
		var etichetta = $("label[for='"+nome+"']");
		var moo = $('');
		if (this.checked) {
				$(etichetta).addClass("checked");
				moo.attr('value','on');
		} else {
				$(etichetta).addClass("unchecked");
		}
		$(this).before(moo).remove();
		$(etichetta).click( function() {
			if(moo.attr('value') == ''){
				val = 'on';
			} else {
				val = '';
			}
			moo.attr('value',val);
			$(this).toggleClass("checked").toggleClass('unchecked');
		})
	});
}

Si attiva alla caricamento della pagina con

$(document).ready(function(){
    $('#contatti').styleCheckbox();
});

Vanno poi applicati i fogli di stile, ad esempio

#checkbox {
	width:auto;
	cursor:pointer;
}
#checkbox .unchecked {
	background:transparent url(images/check_off.png) no-repeat left bottom;
	padding:0 0 0 18px;
}
#checkbox .checked {
	background:transparent url(images/check_on.png) no-repeat left bottom;
	padding:0 0 0 18px;
}

ilDavid » css

Effetti maschera con clip e jQuery

styleCheckbox: a jQuery plugin