jQuery简单插件开发
来源:互联网 发布:新开的淘宝店怎么经营 编辑:程序博客网 时间:2024/04/29 19:38
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:""}],//数据请求urlurl :"",//搜索表单form : ""};//使用options扩展defaults,即用options覆盖defaults后返回defaultsvar 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(){debuggervar 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);
(完)。
阅读全文
0 0
- 开发简单jquery插件
- 简单jQuery插件开发
- jQuery简单插件开发
- jQuery 简单插件开发代码
- jquery 插件开发------简单选择插件模版
- jQuery插件开发 - 其实很简单
- jQuery插件开发 - 其实很简单
- jQuery 插件开发 其实很简单
- jQuery插件开发 - 其实很简单
- jQuery插件开发 - 其实很简单
- 一个简单的jQuery插件开发实例
- jQuery插件开发 - 其实很简单
- jQuery插件开发 - 其实很简单
- 最简单的jquery插件开发示例
- jQuery插件开发3之简单实例
- JQuery插件开发 + 插件
- 基于jQuery的简单验证插件(开发点滴)
- 如何自己开发一个简单的jquery 插件
- PHP面试题易错点拾忆(持续更新...)
- android疑难杂症
- IPC机制之AIDL传递Parcelable
- 情感分类语料库
- spring boot+RabbitMQ
- jQuery简单插件开发
- 一键格式化linux服务器上nginx.conf文件
- July.5一个简单的计算器程序
- 压缩图片(三)
- Mac CMake安装和使用
- URL、URN、URI区别
- 【Spring】Spring Cloud的思维导图
- PHP CURL实现GET、POST请求
- Redis的发布订阅