jQuery Plugin 开发
文章来源：365jz.com 点击数：297 更新时间：2009-09-18 10:14 参与评论
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:
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);
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);
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
