How to create custom JQuery function and how to use it?

Question

I'm searching for information about that - "How to create custom (own) JQuery function and how to use it"

I've searched in Google, but I didn't found information about that.

Can you explain in details, about custom functions?

Answer 1

By "custom function" I am assuming you mean "plugin". If that's the case, there is a good tutorial on the jQuery site. The basic idea is this:

(function($) {
    $.fn.myPlugin = function() {
        return this.each(function() {
            //Do stuff
        });
    };
}(jQuery));

Basically, the code above does a few things. Firstly, it captures the value of jQuery and passes it into an anonymous function where it can then be referred to as $ (this is so that users of your plugin who happen to be using the $ identifier for something else can still use it.)

It then declares a method on $.fn, which is just an alias for $.prototype. Inside that method, this refers to the matched set of elements on which the plugin has been called. Since thats a jQuery object, and may contain multiple elements, you need to iterate over that set (that's why the each is there).

The return statement is used to maintain chainability of the plugin with other jQuery methods. Since each returns an instance of jQuery, the plugin itself returns an instance of jQuery, and other jQuery methods can obviously be called on an instance of jQuery.

Answer 2

As gesutery said, use extend(). You can add your own properties and functions as values:

        $(function(){
            $.extend({
                propAsString: '',
                propAsNumber: 12345,
                propAsObject: {},
                propAsFunction: function() {
                    //your function code
                }
            });

        $.propAsFunction();     //call your function
        });

Answer 3

you can use it like this

  $(document).ready(function() {
        $('#button').click(function(){
            $(this).myFunction();
         });
         $.fn.myFunction = function() { 
            alert('test'); 
         }
    });

Answer 4

(function($){
    $.fn.extend({ 
        //plugin name - animatemenu
        animateMenu: function(options) {

            //Settings list and the default values
            var defaults = {
                animatePadding: 60,
                defaultPadding: 10,
                evenColor: '#ccc',
                oddColor: '#eee'
            };

            var options = $.extend(defaults, options);

            return this.each(function() {
                var o =options;

                //Assign current element to variable, in this case is UL element
                var obj = $(this);              

                //Get all LI in the UL
                var items = $("li", obj);

                //Change the color according to odd and even rows
                $("li:even", obj).css('background-color', o.evenColor);             
                $("li:odd", obj).css('background-color', o.oddColor);                     

                //Attach mouseover and mouseout event to the LI  
                items.mouseover(function() {
                    $(this).animate({paddingLeft: o.animatePadding}, 300);

                }).mouseout(function() {
                    $(this).animate({paddingLeft: o.defaultPadding}, 300);
                });

            });
        }
    });
})(jQuery);

Answer 5

For those who are looking for a "custom function" as per the title, it is as simple as:

if(window.$)
    window.$.customMethod = function() { * your code here * };

This will then work like $.ajax() does

Answer 6

I wanted my custom functions to be invoked like $.myfunction(). I defined those functions in an external js file somewhat like this

$.myfunction = function(){

//Your code here    
};