web-dev-qa-db-fra.com

Comment créer une fonction JQuery personnalisée et comment l'utiliser?

Je cherche des informations à ce sujet - "Comment créer une fonction JQuery personnalisée et comment l'utiliser"

J'ai effectué une recherche dans Google mais je n'ai trouvé aucune information à ce sujet.

Pouvez-vous expliquer en détail, sur les fonctions personnalisées?

jqueryfunction
27
Jordan

Par "fonction personnalisée", je suppose que vous voulez dire "plugin". Si c'est le cas, il existe un bon tutoriel sur le site jQuery . L'idée de base est la suivante:

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

Fondamentalement, le code ci-dessus fait quelques choses. Premièrement, il capture la valeur de jQuery et le transmet à une fonction anonyme où il peut alors être appelé $ (afin que les utilisateurs de votre plug-in utilisant l’identifiant $ pour quelque chose d’autre puissent l’utiliser)

Il déclare ensuite une méthode sur $.fn, qui est simplement un alias pour $.prototype. Dans cette méthode, this fait référence au jeu d'éléments correspondant sur lequel le plugin a été appelé. Puisqu'il s'agit d'un objet jQuery et qu'il peut contenir plusieurs éléments, vous devez effectuer une itération sur cet ensemble (c'est pourquoi la variable each est présente).

L'instruction return permet de maintenir la chaîne du plug-in avec d'autres méthodes jQuery. Puisque each renvoie une instance de jQuery, le plug-in lui-même renvoie une instance de jQuery et les autres méthodes jQuery peuvent évidemment être appelées sur une instance de jQuery.

57
James Allardice

Comme le dit gesutery, utilisez extend() . Vous pouvez ajouter vos propres propriétés et fonctions en tant que valeurs:

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

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

vous pouvez l'utiliser comme ça 

  $(document).ready(function() {
        $('#button').click(function(){
            $(this).myFunction();
         });
         $.fn.myFunction = function() { 
            alert('test'); 
         }
    });
5
Vishal
(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);
4
gesutery

Pour ceux qui recherchent une "fonction personnalisée" selon le titre, il suffit de:

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

Cela fonctionnera alors comme le fait $.ajax()

3
Alex W

Je voulais que mes fonctions personnalisées soient appelées comme $.myfunction(). J'ai défini ces fonctions dans un fichier js externe un peu comme ceci

$.myfunction = function(){

//Your code here    
};
1
qwerty