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 informatio

Answer 1

you can use it like this

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

Answer 2

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 3

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 4

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    
};

Answer 5

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 6

(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);