1.Guideline:http://docs.jquery.com/Plugins/Authoring
2.Example:http://www.learningjquery.com/2007/10/a-plugin-development-pattern
3.重點:
a)inside plugin function , "this" is jQuery Object, not DOM element
b)should implement each method.
?? code example:
this.each(function(){
//xxx
this; // "this" is DOM element.
});
c) using alias "$"
code example :
(function($){
//you can use $(selector) at here now
})(jQuery);
see my example for resizeImageByScale:
?1?/**
?2?*?--------------------------------------------------------------------
?3?*?jQuery-Plugin?"resizeImage"
?4?*?Version:?1.0,?20/07/2009
?5?*?by?Daniel?<nevernet@msn.com>
?6?*
?7?*?--------------------------------------------------------------------
?8?*?@example?jQuery("#imagesId").resizeImageByScale({?"maxWidth":?410,?"maxHeight":?248?});
?9?*?@desc?resize?all?images?size
10?*
11?*?--------------------------------------------------------------------
12?*/
13?(function($)?{
14?????$.fn.resizeImageByScale?=?function(options)?{
15?????????var?defaults?=?{?"maxWidth":?100,?"maxHeight":?100?};
16?
17?????????$.extend(defaults,?options);
18?
19?????????return?this.each(function()?{
20?????????????var?obj?=?$(this);
21?????????????var?t?=?new?Image();
22?????????????$(t).load(function()?{
23?????????????????var?t1?=?this;?//DOM?element
24?????????????????var?toheight?=?defaults.maxHeight;
25?????????????????var?towidth?=?defaults.maxWidth;
26?
27?????????????????var?aWidth?=?Math.round((t1.width?/?towidth)?*?10000);
28?????????????????var?aHeight?=?Math.round((t1.height?/?toheight)?*?10000);
29?
30?????????????????if?(aWidth?<?aHeight)?{
31?????????????????????toheight?=?defaults.maxHeight;
32?????????????????????towidth?=?Math.round(t1.width?*?defaults.maxHeight?/?t1.height);
33?????????????????}
34?????????????????else?{
35?????????????????????towidth?=?defaults.maxWidth;
36?????????????????????toheight?=?Math.round(t1.height?*?defaults.maxWidth?/?t1.width);
37?????????????????}
38?
39?????????????????obj.css({?"width":?towidth,?"height":?toheight?});
40?????????????}).attr("src",?obj.attr("src"));
41?????????});
42?????}
43?})(jQuery);
原文地址: http://www.cnblogs.com/nevernet/archive/2009/07/20/1527103.html