jQuery简单插件开发
2017-07-05 17:47
459 查看
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");
运行结果
以上代码中通过$.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>< a71a /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);
(完)。
相关文章推荐
- jQuery插件开发基础简单介绍
- jquery插件开发(checkbox全选的简单实例)
- 4、jQuery面向对象之简单的插件开发
- jQuery插件开发基础简单介绍
- 4、jQuery面向对象之简单的插件开发
- 【jquery】如何自己开发一个简单的jquery 插件
- 关注电子商务网站开发-《简单易用的JQUERY插件--图片延时加载插件(lazyload)》
- JQuery插件开发简单实例
- 一个简单的jQuery插件开发实例
- 简单jQuery插件开发
- 使用 ADD-ON SDK 开发 基于 Html JQuery 和 CSS 的 firefox 插件入门教程1: 创建一个简单的 Add-on
- 一个简单的jQuery插件开发实例
- jquery 插件开发------简单选择插件模版
- jQuery插件开发3之简单实例
- 最简单的jquery插件开发示例
- 简单的jQuery插件开发
- 前端开发:一个开源、简单易用的jQuery表格插件(DataTables)
- jQuery 简单插件开发代码
- 关注电子商务网站开发-《简单易用的JQUERY插件--图片延时加载插件(lazyload)》
- 教你开发一款极为简单实用的jQuery图表插件