jquery插件的插件验证_jQuery的dwImageProtector插件

ゝ一世哀愁。 2023-02-22 01:25 27阅读 0赞

jquery插件的插件验证

I've always been curious about the jQuery JavaScript library. jQuery has captured the hearts of web designers and developers everywhere and I've always wondered why. I've been told it's easy, which is probably why designers were so quick to adopt it NOT that designers aren't intelligent, but designers usually have enough design stuff to worry about and if they wanted to be programmers, they would've become programmers. jQuery being easy didn't convince me to try jQuery because Moo came pretty easy to me.

我一直对jQuery JavaScript库感到好奇。 jQuery吸引了世界各地的Web设计师和开发人员的心，我一直想知道为什么。 有人告诉我这很容易，这可能就是为什么设计师如此之快就采用它的原因，而不是设计师不是很聪明，但是设计师通常有足够的设计知识要担心，如果他们想成为程序员，他们会成为程序员。 jQuery的简易性并没有说服我尝试jQuery，因为Moo对我来说相当容易。

Last weekend I decided I needed to try jQuery. It would make me a more well-rounded developer and it might suit particular projects better than Moo. And there's nothing wrong with knowing both, right? I decided the first step would be porting over and existing MooTools class I'd written. What would be better than my much-misunderstood [image protector class][]? Here it is, now in jQuery plugin format.

上周末，我决定需要尝试jQuery。 这将使我成为一个更加全面的开发人员，并且可能比Moo更适合某些项目。 两者都知道没有错，对吗？ 我决定第一步将移植到我编写的现有MooTools类上。 有什么比我被误解的[图像保护器类][image protector class]更好的？ 现在是jQuery插件格式。

[View Demo][] [查看演示][View Demo] [Download][] [下载][Download]

## jQuery插件JavaScript **(**The jQuery Plugin JavaScript**)** ##

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')
    	});
    };

The plugin accepts two parameters: the zIndex and the image you'd like to use as the protector.

该插件接受两个参数： zIndex和您要用作保护器的图像 。

## jQuery的用法 **(**The jQuery Usage**)** ##

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

It's important to run the plugin during the page's "load" event so that the dimensions are correct.

在页面的“ load”事件期间运行插件很重要，这样尺寸才正确。

This plugin requires the jQuery Dimensions plugin. [Click here][] to download the blank.gif overlay file.

该插件需要jQuery Dimensions插件。 [单击此处][Click here]下载blank.gif覆盖文件。

[View Demo][] [查看演示][View Demo] [Download][] [下载][Download]

Don't bother commenting about how you know 20 ways to get around this. Many non-technical persons will be fooled.

不要打扰评论您如何知道20种解决方法。 许多非技术人员将被愚弄。

Look forward to reading my impressions of my first jQuery project tomorrow!

期待明天阅读我对第一个jQuery项目的印象！

> 翻译自: [https://davidwalsh.name/image-protector-plugin-for-jquery][https_davidwalsh.name_image-protector-plugin-for-jquery]

jquery插件的插件验证

[image protector class]: https://davidwalsh.name/mootools-12-image-protector-dwprotector
[View Demo]: https://davidwalsh.name/demo/image-protector-jquery.php
[Download]: https://davidwalsh.name/demo/jquery.dwImageProtector.js
[Click here]: https://davidwalsh.name/demo/blank.gif
[https_davidwalsh.name_image-protector-plugin-for-jquery]: https://davidwalsh.name/image-protector-plugin-for-jquery