在jQuery中,如何编写插件

分享于 

9分钟阅读

Web开发

  繁體

介绍

jQuery提供一种简单。有效的管理元素和各种脚本的方法,jQuery还提供了一种机制,用于向核心服务器添加方法和额外的。 在使用这种机制时,我们还可以创建代码的新部分,并在不同的页面和项目中添加重用。

编写你的第一个jQuery插件

要编写插件,在 jQuery.fn 对象中添加一个新属性,该属性的NAME 将是插件的NAME。

(function( $ ) {
 $.fn.myPlugin = function() {
 // Do your awesome plugin stuff here };
})( jQuery ); 

让我们开始在插件中添加功能并在网页中使用它。 在我们的第一个例子中,我将简单淡出元素。

(function ($) {
 $.fn.myPlugin = function () { 
 this.fadeOut('normal');
 };
})(jQuery);

现在用 NAME" jquery-myPlugin.js"保存文件,你的插件就可以使用了。 在页面上创建HTML按钮和 divdiv 将在单击按钮时淡出。

多个元素的插件

你还可以编写对元素组执行操作的插件。 假设我们想改变鼠标上的元素的background 颜色。 只需获取每个元素和 register 对象的悬停事件。 让我们开始编写悬停插件代码。

(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对象。array 或者任何集合进行迭代。 本示例为jQuery对象的each 元素注册 hover 事件。

Chainability

jquery设计的美妙之处在于它维护了 chainability。 可以在一个系列中执行多个操作。 因此要在插件中维护 chainability,你必须确保你的插件返回'this'关键字。

(function ($) {
 $.fn.hoverElement = function () {
 returnthis.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'});

自定义

如果你想使插件商业化,那么它应该是可以配置的。 例如,我们应该提供更改图像。宽度。高度。等等 以便用户可以根据需要改变外观。

为了解释这个概念,这个例子允许用户在悬停时改变文本。前景颜色和 background。 用户可以根据需要自定义设置。 现在我们的插件方法将有一个参数,用户可以在调用方法时传递设置。 有关方法的外观,请参见代码 below。

$.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);
 returnthis.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是一个非常有名的图像插件。

基本上,当图像显示在页面上时,给用户提供一个非常方便的可能性。 单击( 小) 缩略图会导致图像变得更大,直到达到原始尺寸,在同一页面上可以见。

<divid="myGallery"><ul><li><ahref="Images/Nature/apple.jpg"title='The apple is the pomaceous...'/><imgsrc="Images/Nature/apple_thumb.jpg"/></a></li>.
.
.
 </ul></div>

获取所有锚点( <a> ) 元素并将它们传递给插件。

$(document).ready(function () {
 $("#myGallery a").imageGallery2();
 });

插件获取集合并注册每个元素和 click 事件的click 事件,它在页面中添加一些元素。 添加后,在这些元素上设置图像源。动画和 register 事件。

$('Body').append("<divid='imageGallery2-overlay'></div>" +
"<divid='imageGallery2-wrapper'>" +
"<divid='imageGallery2-image-container'>" +
"<divid='imageGallery2-close-bar'><divid='imageGallery2-close-button'><imgsrc='Images/close-icon.png'/></div></div>" +
"<divstyle='clear: left; '>" +
"<divid='imageGallery2-loadingImage'>" +
"<imgsrc='Images/loading.gif'width='50'height='50'/>" +
"</div>" +
"<imgid='imageGallery2-image'/>" +
"</div>" +
"</div>" +
"<divid='imageGallery2-image-text-box'>" +
"<divid='imageGallery2-image-caption'>" +
"</div>" +
"</div>" +
"</div>");

就像你在示例中所看到的,在显示之前我们预先加载了完整图像。 首先,我们创建一个图像对象,并 register 方法对象的onload 方法。 然后从被点击对象获取图像源,并将图像源分配给图像对象。

// preload image before displayingvar 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> 源并设置 widthheight,并通过 widthheight 设置。 用户可以通过单击图像本身或者关闭按钮来关闭打开的图像。 关闭时,我们先隐藏图像标题,然后将动画启动到 0 widthheight。 在动画完成时,我们只是从页面中删除对象,然后点击下一个图像,我们只是再次添加它们。

function CloseSelectedImage() {
 $("#imageGallery2-image-text-box").hide();
 $('#imageGallery2-image-container').animate
 ({ width: 0, height: 0 }, 300, function () { 
 $('#imageGallery2-overlay').remove();
 $('#imageGallery2-wrapper').remove(); 
 });
}

历史记录

  • 28th 2011年11月: 初始帖子

plugin  
相关文章