如何编写 jQuery 插件
4.92/5 (37投票s)
本文提供了创建插件的全面知识。
引言
除了提供一种简单有效的方法来管理元素和各种脚本外，jQuery 还提供了一种向核心模块添加方法和额外功能的机制。通过使用这种机制，我们还可以创建一个新的代码部分，并在不同的页面和项目中重用它。
编写你的第一个jQuery插件
要编写插件，请在jQuery.fn对象中添加一个新属性，该属性的名称将作为你的插件名称。
(function( $ ) {
$.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
})( jQuery );
让我们开始在你的插件中添加功能并在网页中使用它。在第一个示例中，我将简单地淡出元素。
(function ($) {
$.fn.myPlugin = function () {
this.fadeOut('normal');
};
})(jQuery);
现在将文件保存为“jquery-myPlugin.js”，你的插件就可以使用了。在你的页面上创建一个HTML按钮和一个div。单击按钮时，div将淡出。
用于多个元素的插件
你还可以编写对一组元素执行操作的插件。假设我们想要在鼠标悬停时更改元素的背景颜色。只需获取每个元素并为该对象注册悬停事件。让我们开始编写悬停插件的代码。
(function ($) {
$.fn.hoverElement = function () {
this.each(function () {
$(this).hover(
function () {
$(this).addClass('hoverTextSel');
},
function () {
$(this).removeClass('hoverTextSel');
}
); // end of Hover event
}); // end for each
}; // end of functions
})(jQuery);
$(selector).each()方法用于迭代 jQuery 对象、数组或任何集合。此示例为 jQuery 对象的每个元素注册hover事件。
链式调用
jQuery 设计的优点是它保持了链式调用。你可以在一个序列中执行多个操作。因此，为了在插件中保持链式调用，你必须确保你的插件返回“this”关键字。
(function ($) {
$.fn.hoverElement = function () {
return this.each(function () {
$(this).hover(
function () {
$(this).addClass('hoverTextSel');
},
function () {
$(this).removeClass('hoverTextSel');
}
); // end of Hover event
}); // end for each
}; // end of functions
})(jQuery);
现在你可以在一个序列中执行多个操作。
$(".hoverText2").hoverElement().css({'color':'red'});
自定义
如果你想将你的插件商业化，那么它应该是可配置的。例如，我们应该提供更改图像、宽度、高度等的规定，以便用户可以根据需要更改外观和感觉。
为了解释这个概念，此示例将允许用户在悬停时更改文本、前景色和背景。用户可以根据需要自定义设置。现在我们的插件方法将带有一个参数，用户可以在调用方法时传递设置。请参见下面的代码，了解方法现在的样子。
$.fn.YouPlugin = function (options) {...}
我们还需要一个默认设置对象，其中包含默认值。
var defaultVal = {
Text: 'Your mouse is over',
ForeColor: 'red',
BackColor: 'gray'
};
那时，我们有两个不同的对象，一个是用户传递的，第二个具有默认值。我们将使用 jQuery 提供的扩展方法合并这两个对象。
var obj = $.extend(defaultVal, options);
extend()方法将两个或多个对象的内容合并到第一个对象中。合并两个对象后，我们将得到一个最终对象，该对象将用于设置。插件的完整代码如下所示
(function ($) {
$.fn.textHover = function (options) {
var defaultVal = {
Text: 'Your mouse is over',
ForeColor: 'red',
BackColor: 'gray'
};
var obj = $.extend(defaultVal, options);
return this.each(function () {
var selObject = $(this);
var oldText = selObject.text();
var oldBgColor = selObject.css("background-color");
var oldColor = selObject.css("color");
selObject.hover(function () {
selObject.text(obj.Text);
selObject.css("background-color", obj.BackColor);
selObject.css("color", obj.ForeColor);
},
function () {
selObject.text(oldText);
selObject.css("background-color", oldBgColor);
selObject.css("color", oldColor);
}
);
});
}
})(jQuery);
高级图片库
我们将创建一个非常接近 Lightbox 插件的插件。Lightbox 是一款非常著名的图片插件。
基本上，当页面上显示图像时，会为用户提供非常方便的可能性。单击（小）缩略图将导致图像越来越大，直到达到其原始尺寸，并在找到较小图像的同一页面上以全尺寸显示！
<div id="myGallery">
<ul>
<li>
<a href="Images/Nature/apple.jpg" title='The apple is the pomaceous...' />
<img src="Images/Nature/apple_thumb.jpg" />
</a>
</li>
.
.
.
</ul>
</div>
获取所有锚点（<a>）元素并将它们传递给插件。
$(document).ready(function () {
$("#myGallery a").imageGallery2();
});
插件获取集合并注册每个元素的click事件，在click事件上，它在页面中添加一些元素。添加后，它设置图像源、动画并在这些元素上注册事件。
$('Body').append("<div id='imageGallery2-overlay'></div>" +
"<div id='imageGallery2-wrapper'>" +
"<div id='imageGallery2-image-container'>" +
"<div id='imageGallery2-close-bar'>
<div id='imageGallery2-close-button'>
<img src='Images/close-icon.png'/>
</div>
</div>" +
"<div style='clear: left; '>" +
"<div id='imageGallery2-loadingImage'>" +
"<img src='Images/loading.gif'
width='50' height='50'/>" +
"</div>" +
"<img id='imageGallery2-image'/>" +
"</div>" +
"</div>" +
"<div id='imageGallery2-image-text-box'>" +
"<div id='imageGallery2-image-caption'>" +
"</div>" +
"</div>" +
"</div>");
正如你在示例中看到的，我们在显示图像之前预加载完整图像。首先，我们创建一个图像对象并注册图像对象的onload方法。然后我们从被点击的对象获取图像源并将图像源分配给图像对象。
// preload image before displaying
var objImagePreloader = new Image();
var url = objClick.getAttribute('href');
imageCaption = objClick.getAttribute('title');
objImagePreloader.onload = function () {
$('#imageGallery2-image').attr('src', url);
// Performance an effect in the image container resizing it
resizeImageContainer(objImagePreloader.width, objImagePreloader.height);
// clear onLoad, IE behaves erratically with animated gifs otherwise
objImagePreloader.onload = function () { };
};
objImagePreloader.src = url;
加载图像后调用onload方法时，我们设置<img>的源并设置容器的width和height，并通过width和height进行动画处理。用户可以通过单击图像本身或关闭按钮来关闭打开的图像。关闭时，我们首先隐藏图像的标题，然后开始动画到width和height为 0。动画完成后，我们只需从页面中删除该对象，并且在单击下一个图像时，我们只需再次添加它们。
function CloseSelectedImage() {
$("#imageGallery2-image-text-box").hide();
$('#imageGallery2-image-container').animate
({ width: 0, height: 0 }, 300, function () {
$('#imageGallery2-overlay').remove();
$('#imageGallery2-wrapper').remove();
});
}
历史
- 2011年11月28日：初始发布