jquery插件开发

jquery插件开发方式多样化。

个人比较喜欢以下方式：

 

一.jquery扩展

1.javascript结构

(function(jquery){
	
	    //jquery扩展插件
		jquery.fn.showMess = function(){
		
			this.each(function(){
					alert("测试");
				});
			}

	})(jQuery);

 

使用javascript闭包方式。

 (function(){})();

 

2.调用方式就很简单了。

$("span").showMess();

 

二.另外一种就是使用类的静态方法定义；

1.定义结构

	(function(jquery){
		    //定义jquery的静态方法
			jquery.showMess = function(input){
					alert("静态定义测试");
				}
		})(jQuery)

 2.调用方式可以在html标记事件上调用;

<span onclick="$.showMess()">静态定义测试</span>

 

当然调用的时候也可以根据情况，在定义插件的时候定义相关的调用方法就可以了，这两种方式也可以同时使用。

 

 

我自己比较喜欢jquery定义插件的方式是;

1.使用闭包

(function(jquery){})(jQuery)

function的参数使用jquery而不是$，这样不会与别的参数冲突；

2.里面的结构是

   先定义类后使用（扩展插件，定义静态方法）new一个对象出来；这样自己觉得好管理一些，参数当然肯定可以被实际参数覆盖才行(extends)

3.局部变量使用“_变量名”的方式定义；

 一个比较简单的信息提示插件：

/** 
* @fileOverview 简单的信息提示插件 
* @author <a href="gleams.iteye.com">星月</a> 
* @version 0.1 
*/ 

(function(jquery){
	var showMess = function(elem){
			var _elem = this.elem = $(elem);
			var prompt = _elem.attr("prompt");
				
			if(prompt!=undefined && prompt!=null){
					this.showDiv();
				}
		}
	
	showMess.prototype.showDiv = function(){
			var span="<span id=\"showDiv\"></span>";		
			var _prompt = this.elem.attr("prompt");
			var _elem = this.elem;
			var div="<div class=\"showMess\">"+_prompt+"</div>";
		
			$(_elem).hover(function(){
				if($("#showDiv").size()<1) {
						$("body").append(span);
					}
				$("#showDiv").append(div);
				},function(){
						$(".showMess").remove();
				});
			
			$(_elem).mousemove(function(ev){
					var ev = ev || window.event; 
					var tagName = $(_elem).attr("tagName");
					
					var x = tagName=="A" ? mouseCoords(ev).x+10+"px" : mouseCoords(ev).x+"px";//如果是a 标记x位置增加10像素
					var y = tagName=="A" ? mouseCoords(ev).y+20+"px" : mouseCoords(ev).y+10+"px";//如果是a 标记y位置增加20像素
					
					var txtLength = _prompt.length;
					var lengthNum = txtLength/20;
					if(lengthNum>1){
						$(".showMess").width(lengthNum*80);
					}else{
						$(".showMess").width(80);
						}
					$(".showMess").fadeIn("show");
					$("#showDiv").css({
						"display":"block",
						"left":x,
						"top":y
						});	
				});
		}//showDiv_end
		
		function mouseCoords(ev){
				if(ev.pageX || ev.pageY){ 
				return {x:ev.pageX, y:ev.pageY}; 
				} 				
				return{ 
				x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
				y:ev.clientY + document.body.scrollTop - document.body.clientTop 
				}; 
			} //mouseCoords_end	
	
	    //jquery扩展插件
		jquery.fn.showMess = function(){		
			this.each(function(){
					new showMess(this);
				});
			}
		//jquery运行
		$(function(){
			$("span,div,input,a,img,td").showMess();
		});
})(jQuery);