dwImageProtector Plugin pro jQuery

Vždy jsem byl zvědavý na JavaScriptovou knihovnu jQuery. jQuery si získal srdce webových designérů a vývojářů po celém světě a vždy mě zajímalo proč. Bylo mi řečeno, že je to snadné, což je pravděpodobně důvod, proč to designéři tak rychle přijali, NE že designéři nejsou inteligentní, ale designéři mají obvykle dost věcí na design, o které se mohou starat, a pokud by chtěli být programátory, stali by se programátoři. To, že je jQuery snadné, mě nepřesvědčilo, abych zkusil jQuery, protože Moo mi přišlo docela snadné.

Minulý víkend jsem se rozhodl, že musím vyzkoušet jQuery. Udělalo by to ze mě všestrannějšího vývojáře a mohlo by to vyhovovat konkrétním projektům lépe než Moo. A není nic špatného na tom znát oba, že? Rozhodl jsem se, že prvním krokem bude přenesení existující třídy MooTools, kterou jsem napsal. Co by bylo lepší než moje tolik nepochopená třída ochrany obrazu? Tady je, nyní ve formátu pluginu jQuery.

Zobrazit demo ke stažení

JavaScript pluginu jQuery

jQuery.fn.protectImage = function(settings) {
	settings = jQuery.extend({
		image: 'blank.gif',
		zIndex: 10
	}, settings);
	return this.each(function() {
		var position = $(this).position();
		var height = $(this).height();
		var width = $(this).width();
		$('<img />').attr({
			width: width,
			height: height,
			src: settings.image
		}).css({
			border: '1px solid #f00',
			top: position.top,
			left: position.left,
			position: 'absolute',
			zIndex: settings.zIndex
		}).appendTo('body')
	});
};

Plugin přijímá dva parametry:zIndex a obrázek, který chcete použít jako ochranu.

Použití jQuery

$(window).bind('load', function() {
	$('img.protect').protectImage();
});

Je důležité spustit plugin během události „load“ stránky, aby byly rozměry správné.

Tento plugin vyžaduje plugin jQuery Dimensions. Klikněte sem a stáhněte si překryvný soubor blank.gif.

Zobrazit demo ke stažení

Neobtěžujte se komentováním toho, jak znáte 20 způsobů, jak to obejít. Mnoho netechnických osob bude oklamáno.

Těším se, až si zítra přečtu mé dojmy z mého prvního projektu jQuery!