How to create a jQuery plugin, extending jQuery the easy way. Monday, December 15, 2008 One of the reasons jQuery is so popular is the number and quality of its' plugins. They allow quickly achieve user goals and get on with their lifes. A lot of tasks can be done by jQuery plugins without ever have to write any custom jQuery code. However, when you write some awesome code and think the community will benefit from it - release it as jQuery plugin.
In this post, you will learn how to extend jQuery with your custom plugins. Extending jQuery is quite easy. All you have to do is to use the following template: (function($){ $.fn.extend({ your_plugin_name: function() { // Your plugin code }, another_method: function()}{ // Another method code } });})(jQuery); Your custom plugins will then be available like so: $('.selector').your_plugin_name();$('.another-selector').another_method(); Functions will be called once for each element selected by the selector. this would refer to the current element. Let's say we want a plugin that binds a click event. jQuery: $.extend() and $.fn.extend() confusion « Coding with a p. There is a significant difference between using .extend() with one argument and doing it with two or more: When .extend() receives a single object, it adds the methods defined in it to either the jQuery or the jQuery.fn (also called jQuery.prototype and $.fn) objects.
As a general rule, you should extend the jQuery object for functions and the jQuery.fn object for methods. A function, as opposed to a method, is not accessed directly from the DOM. Notice the different way of calling a method when extending the jQuery.fn or jQuery objects. When .extend() receives two or more objects, it takes the first object and adds to it the methods and variables defined in the other objects. If the first object is empty, it will add the methods and variables in a new object. Like this: Like Loading... Comment ajouter vos propres fonctions personnalisées à jQuery.
Monday, December 22, 2008 In this post you will learn how to add your own custom functions to jQuery. In essence, this is the same as creating jQuery plugin. Recently I wrote a template on how to extend jQuery and how to create your own functions. Since then I came across even smaller code snippet on how to add your own custom functions, in other words how to create plugins for jQuery. So without further ado: $.fn.myFunction = function() { return $(this).addClass('changed');} // Now, you can use it like this$('.changePlease').myFunction(); Even though, it is a shorter version, you are better off using the correct way.
Defining custom jQuery functions (function($){ })(jQuery); // OR equivalent $.fn.myFunction = function() { return $(this).addClass('changed'); } By using the above recommended methods of creating custom jQuery functions, we are making sure that: We do not assume that jQuery is not in jQuery.noConflict() mode. The two methods are technically the same. Console.log( $().my_data ); Tutoriels jQuery - Babylon-Design - Tutoriaux WebDesign : Adobe. Namespace your JavaScript function and variable with jQuery. We all know that global variable are evil. Namespacing your variables and methods is now considered a good practice and shows your awareness about the trends. Anyway, I thought how can I namespace my variables and methods in jQuery. Well, first off, I can easily extend jQuery with custom written plugins. Now my functions are namespaced and would not conflict with any other already declared functions with the same name. This is great, but to access my functions or variables I have to call jQuery().
The code still looks like chaining not namespacing. To declare your variables or functions in jQuery namespace you can extend the core jQuery object itself using jQuery.extend() rather than jQuery.fn.extend(). As you can see, now I can call my functions and properties without parenthesis after jQuery object. TIP: Use $.extend({}) to namespace your fields and methods.