jQuery简单插件开发

逃离我推掉我的手 2022-06-13 11:09 390阅读 0赞

# **jQuery简单插件开发** #

jQuery有非常强大的扩展性，开发者可以简单的使用jQuery开发自己的插件运用于应用中。jQuery可以理解为一个强大的JavaScript类，jQuery选择器选择到的对象是这个类的对象，对象拥有jQuery类的静态方法，jQuery类的实例方法，我们可以通过给jQuery这个类添加静态方法或者实例方法的方式开发简单插件。

jQuery插件开发主要有3种：

1. 通过$.extend()来给jQuery添加静态方法

2. 通过$.fn想jQuery添加新的实例方法

3. 通过$.widget()应用jQuery UI的部件工厂方式创建

通常我们使用第二种方法来开发插件，第三种方式用于开发更高级的jQuery部件，这里主要介绍第一种和第二种方式开发插件。

## **“静态方法”的插件** ##

第一种方式$.extend()最简单，只是给jQuery添加一个静态方法，添加方法后可以直接使用“$.方法名”来调用添加的静态方法，不需要选中Dom元素，如：

$.extend({
    	hello : function (name) {
    		console.log("hello," + name + "!")
    	}
    });
    //调用
    $.hello("jQuery");

运行结果

![Image 1][]

以上代码中通过$.extend()向jQuery添加了一个hello函数，然后通过$直接调用。到这里，已经用第一种方式实现了一个简单的插件了。一般使用这种方式来定义一些辅助函数，这种方式无法利用到jQuery强大的选择器，要处理DOM元素，和jQuery强大的选择器结合起来使用，还是需要第二种方式来开发插件，大多数插件也都是用这种方式开发的。

## **“实例方法的插件”** ##

开发的模式是给$.fn添加方法，如：

$.fn.ytGrid = function(options){
    
    }

方法名就是插件名称，插件要实现的功能在方法体重，方法的参数也就是插件的参数，如修改选中元素背景颜色的插件如下，修改的目标颜色作为参数传入。

$.fn.changeColor = function (options) {
    
    	this.css('background-color', options);
    }

其中this 指代调用插件时， jQuery 选中元素，可能是一个元素也可能是一个元素的集合， this 已经是 jQuery 类型的一个对象，可以直接使用 jQuery 方法，不必再用 $ 符号包装了，如果选中的是一个集合的话，集合的每一个对象都会被执行插件内容。通常，为了避免和其他的 js 库冲突，将 jQuery 传递给封闭程序，在程序中用 $ 代替 jQuery ，避免 $ 被复写，将插件写在 (function($)\{\})(jQuery) 中，到此，一个简单的插件也就完成了。

一个以第二种方式开发的简单的插件样例如下

//为了避免和其他的js库冲突，将jQuery传递给封闭程序，在程序中用$代替jQuery，避免$被复写
    (function($){
    	//$.fn是jQuery原型, $.fn=jQuery.prototype, ytGrid是插件名称
    	$.fn.ytGrid = function(options){
    		var defaults = {
    				//是否分页，默认否
    				page:false,
    				// 分页信息，curPage当前页，pageSize每页数量
    				pageInfo:{curPage:1,pageSize:15},
    				// table的class样式
    				tableclass:"",
    				// table的style样式
    				tablestyle:"",
    				//列配置
    				columns : [{
    					//字段
    					field:"id",
    					//类型
    					type:"checkbox",
    					//宽度
    					width:"2%",
    					//对齐方式
    					align:"center",
    					//選擇全部
    					selectall : "true"
    				},{
    					field:"sort",
    					header:"序号",
    					type:"seq",
    					width:"2%",
    					align:"center"
    				},{
    					field:"name",
    					header:"名称",
    					width:"20%",
    					align:"left",
    					css:"",
    					//渲染函数
    					renderer:""
    				}],
    				//数据请求url
    				url :"",
    				//搜索表单
    				form : ""
    		};
    		
    		//使用options扩展defaults，即用options覆盖defaults后返回defaults
    		var setting = $.extend(defaults, options ||{});
    		
    		this.data("options", options);
    		
    		console.log("yt.ui.js加載"+this.attr("id")+"grid... ...");
    		
    		var grid = $(this);
    		
    		var gridid = grid.attr("id");
    		
    		//加载
    		var init = function(){
    			
    			var table = $("<table></table>");
    			
    			grid.append(table);
    			
    			if(setting.tableclass){
    				table.addClass(setting.tableclass);
    			}
    			
    			if(setting.tablestyle){
    				table.css(setting.tablestype);
    			}
    			
    			//加载表头
    			tableheader(table);
    			
    			//加载数据
    			tablebody(table);
    			
    		};
    		
    		var tableheader = function(table){
    			var thead = $("<thead></thead>");
    			table.append(thead);
    			
    			var theadtr = $("<tr></tr>")
    			thead.append(theadtr);
    			
    			$.each(setting.columns, function(i, o){
    				var th = $("<th></th>").text(o.header);
    				
    				if(o.width){
    					th.css("width", o.width);
    				}
    				
    				if(o.align){
    					th.css("text-align", o.align);
    				}
    				
    				if(o.tdclass){
    					th.addClass(o.tdclass);
    				}
    				
    				if(o.type && "hidden" == o.type){
    					if("hidden" == o.type){
    						th.css("display","none");
    					}
    				}
    				
    				if(o.type && o.type == "checkbox" && o.selectall ){
    					var checkbox = $("<input type='checkbox' name='checkAll' value='-1' />");
    					checkbox.click(function(){
    						debugger
    						var cb = $("#"+gridid+" input[name='checkAll']");
    						if(cb.prop('checked')){
    							$("#"+gridid).children("table").find("input[name='checkRow']").each(function(i,cc){
    								$(cc).prop('checked','checked');
    							});
    						}else{
    							$("#"+gridid).children("table").find("input[name='checkRow']").each(function(i,cc){
    								$(cc).removeAttr('checked');
    							});
    						}
    					});
    					th.prepend(checkbox);
    				}
    				
    				theadtr.append(th);
    			});
    			
    		};
    		
    		var tablebody = function(table){
    			if(!setting.url){
    				return;
    			}
    			
    			var url = setting.url;
    			
    			if(setting.form){
    				
    				var form = $(setting.form);
    				var param = form.formQueryData();
    				if(param && "" != param){
    					url = url + "?" +param;
    				}
    			}
    			
    			$.ajax({
    				type:"GET",
    				url:url,
    				success:function(json){
    					var data = JSON.parse(json);
    					
    					if(setting.page){
    						
    					}else{
    						if(null == data || "null" == data || 0 == data.length){
    							var tipdiv = $("<div></div>").css({"text-align":"center","padding":"5px"});
    							var tiptext = $("<h4></h4>").text("暂无数据");
    							tipdiv.append(tiptext);
    							table.parent("div").append(tipdiv);
    						}else{
    							var tbody = $("<tbody></tbody>");
    							
    							$.each(data, function(j, o){
    								var tr = $("<tr></tr>");
    								$.each(setting.columns, function(k, s){
    									var td = $("<td></td>");
    									
    									if(s.align){
    										td.css("text-align", s.align);
    									}
    									
    									if(s.width){
    										td.css("width", s.width);
    									}
    									
    									if(s.type && s.type == "seq"){
    										index = j +1;
    										td.text(index);
    									}else if(s.type && s.type == "checkbox"){
    										var checkbox = $("<input type='checkbox' name='checkRow'>")
    										checkbox.val(o[s.field]);
    										td.append(checkbox);
    									}else{
    										if(s.renderer){
    											td.html(eval(s.renderer + "(o, j)"));
    										}else{
    											td.html(o[s.field]);
    										}
    									}
    									
    									if(s.type && s.type == "hidden"){
    										td.css("display", "none");
    									}
    									
    									tr.append(td);
    								});
    								tbody.append(tr);
    							});
    							
    							table.append(tbody);
    						}
    					}
    				}
    			});
    		}
    		
    		//执行
    		init();
    	};
    	
    	$.fn.ytGridReload = function(){
    		var options = $(this).data("options");
    		$(this).empty();
    		$(this).ytGrid(options);
    	};
    	
    	//获取表单Json数据
    	$.fn.formJsonData = function(){
    		
    		var param = {};
    		var ary = this.serializeArray();
    		$.each(f, function(){
    			param[this.name] = this.value;
    		});
    		return JSON.stringify(param);
    	};
    	
    	//获取表单GET数据
    	$.fn.formQueryData = function(){
    		if(!this){
    			return "";
    		}
    		return this.serialize();
    	};
    	
    	$.fn.ytDroplist = function(options){
    		if(options && options.url){
    			$.ajax({
    				type:"GET",
    				url : options.url,
    				success: function(result){
    					var data = JSON.stringify(result);
    					$.each(data, function(i,o){
    						var option = $("<option></option>")
    						option.val(data[options.key]);
    						option.text(data[options.value]);
    					});
    				}
    			});
    		}
    	};
    	
    })(jQuery);

(完)。

[Image 1]: