50 votes

Extrêmement simple Tutoriel du plugin jQuery?

Ok, j'essaie de créer mon tout premier plugin jQuery. J'ai effectué plusieurs recherches sur Google et trouvé de nombreux didacticiels et exemples de modèles de plug-ins.

Cependant, je suis en train de m'endormir ou rien de tout cela n'a de sens pour moi. Ils sont tous différents et rien ne semble aussi facile que «options ici», «fonctions ici»

Quelqu'un peut-il m'indiquer un guide absolu pour débutants?

60voto

Joy Points 9421

Le premier tutoriel, vous devriez lire est http://docs.jquery.com/Plugins/Authoring

Si vous aimez voir des tutoriels vidéo alors c'est un super tutoriel vidéo de Jeffrey Façon

http://tutsplus.com/lesson/head-first-into-plugin-development/

Vous pouvez également jeter un oeil à ces tutoriels génial

http://stefangabos.ro/jquery/jquery-plugin-boilerplate-oop/

http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/

Vous pouvez utiliser cet outil pour faire une base standard pour votre besoin spécifique

http://starter.pixelgraphics.us/

Une autre chose que vous devriez regarder pour en apprendre sur les Avancées de Javascript est-ce

http://ejohn.org/apps/learn/

C'est à partir de John Resig(jQuery du Créateur Lui-même.

51voto

Wouter J Points 16327

Un plugin jQuery n'est rien de plus qu'un ajout d'une fonction dans la fonction jQuery objet (jQuery.fn).

Lorsque nous tenons à transformer cette fonction dans un plugin jQuery:

var sayHello = function(elem, name) {
    elem.innerHTML = 'Hello ' + name;
}

il va devenir quelque chose comme ceci:

jQuery.fn.sayHello = function(elem, name) {
    elem.html('Hello ' + name);
}

Et vous pouvez l'utiliser comme ceci:

$.sayHello($('#helloBox'), 'World');

Mais ce n'est pas très joli, vous voulez quelque chose comme ceci:

$('#helloBox').sayHello('World');

Qui peut être fait en enlevant l' elem argument de notre plugin et utiliser $(this) à l'intérieur du plugin pour obtenir les éléments que nous avons sélectionné:

jQuery.fn.sayHello = function(name) {
    $(this).html('Hello ' + name);
}

Maintenant, nous pouvons l'utiliser comme ceci:

$('#helloBox').sayHello('World');

Exemple vivant de notre premier plugin: http://jsfiddle.net/Lg9nk/

22voto

kalisjoshua Points 632

Voici un squelette de départ simple:

 (function ($) {
    // local globals go here - referenced via closure

    $.fn.myPlugin = function (options) {
        options = $.extend({}, $.fn.myPlugin.config, options);

        return this.each(function () {
            // initialize the elements in the collection
        });
    };

    $.fn.myPlugin.config = {
        // set values and custom functions
    };

}(jQuery));
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X