What this article brings to you is what are the methods for creating jquery plug-ins? The method of creating jquery plug-in has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. Extend jQuery through $.extend()
2. Add new ones to jQuery through $.fn Method
3. Use jQuery UI's component factory method to create through $.widget()
Method 1 is too simple. It is called through $.myfunction() after creation and cannot be called on the specified element. .
Method 3 is too complicated compared to method 2.
Method 2 is the commonly used method to create jq plug-ins. Can operate on specified elements. For example $('#title').myfunction();
$.fn.myfunction = function() { //在这里面,this指的是用jQuery选中的元素 //example :$('a'),则this=$('a') this.css('color', 'red'); }
If you want to support chain calls, just return it.
$.fn.myfunction = function() { //在这里面,this指的是用jQuery选中的元素 //example :$('a'),则this=$('a') return this.css('color', 'red'); }
$.fn.myPlugin = function(options) { var defaults = {//设置默认值 'color': 'red', 'fontSize': '12px' }; var settings = $.extend(defaults, options);//这种方法会使第一个参数会被修改,为了保持变量defaults的值不变应该使用以下代码 //var settings = $.extend({},defaults, options);//在extend方法的第一个参数添加一个空对象。 return this.css({ 'color': settings.color, 'fontSize': settings.fontSize }); }
For future code maintenance and readability, we Plug-ins can be developed using an object-oriented approach.
var Beautifier = function(ele, opt) { this.$element = ele, //获取当前选中的jq对象。 this.defaults = { 'color': 'red', 'fontSize': '12px' }, this.options = $.extend({}, this.defaults, opt) } //定义Beautifier的方法 Beautifier.prototype = { beautify: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize }); } } //在插件中使用Beautifier对象 $.fn.myPlugin = function(options) { //创建Beautifier的实体 var beautifier = new Beautifier(this, options); //调用其方法 return beautifier.beautify(); }
Related recommendations:
jQuery simple scrolling plug-in
Code analysis of jQuery creation plug-in_jquery
Detailed explanation of jQuery plug-in development methods
10 suggestions to help you create better jQuery plug-ins_jquery
The above is the detailed content of What are the methods to create jquery plug-in? How to create jquery plug-in. For more information, please follow other related articles on the PHP Chinese website!