jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Débuter > Danse avec jQuery : quatrième et dernier pas

Danse avec jQuery : quatrième et dernier pas

lundi 2 octobre 2006, par toggg

Article original : http://jquery.bassistance.de/jquery...
merci à © 2006, Jörn Zaefferer - mise à jour : 2006-09-12.

La suite de Danse avec jQuery : troisième pas


Pluggez-moi : écrire son propre plugin

Écrire vos propres plugins pour jQuery est vraiment facile. Si vous en restez aux règles suivantes, il sera aussi très simple pour les autres d’intégrer votre plugin.

- 1 Trouver un nom au plugin, dans l’exemple « foobar ».
- 2 Créer un fichier nommé jquery.[yourpluginname].js, ici, jquery.foobar.js
- 3 Créer une ou plusieurs méthodes en étendant l’objet jQuery, ici :

  jQuery.fn.foobar = function() {
        // faire quelque chose
  };

- 4 Optionellement, créer un objet avec des fonctions pour l’aide :

  jQuery.fooBar = {
        height: 5,
        calculateBar = function() { ... },
        checkDependencies = function() { ... }
  };

Vous pourrez alors appeler ces fonctions d’aide depuis votre plugin :

  jQuery.fn.foobar = function() {
        // faire quelque chose
        jQuery.foobar.checkDependencies(value);
        // faire quelque chose d'autre
  };

- 5 Optionellement : créer des réglages par défaut que l’utilisateur peut modifier :

  jQuery.fn.foobar = function(options) {
        var settings = {
                value: 5,
                name: "pete",
                bar: 655
        };
        if(options) {
                jQuery.extend(settings, options);
        }
  };

Vous pouvez alors appeler le plugin sans options, en utilisant les valeurs par défaut :

  $("...").foobar();

... ou avec des options :

  $("...").foobar({
        value: 123,
        bar: 9
  });

Si vous publiez votre plugin, il vous faudra de plus des exemples et de la documentation.
De nombreux plugins, et d’excellentes références, existent.

Vous savez maintenant ce qu’il faut pour écrire un plugin. Usons de cette connaissance pour écrire notre propre plugin.

Une chose que plein de gens demandent, en essayant de manipuler des formulaires avec jQuery, est de cocher ou décocher des boutons radio ou des cases à cocher. Ils finissent avec du code du genre :

$("input[@type='checkbox']").each(function() {
        this.checked = true;
        // ou, pour décocher
        this.checked = false;
        // ou, pour inverser
        this.checked = !this.checked;
});

Vous pourriez réécrire n’importe quel each() dans votre code par un plugin sans problème :

$.fn.check = function() {
        return this.each(function() {
                this.checked = true;
        });
};

On peut maintenant utiliser ce plugin :

$("input[@type='checkbox']").check();

Vous en savez assez pour écrire des plugins à la fois pour uncheck() et toggleCheck(). Mais étendons plutôt notre plugin pour accepter des options.

$.fn.check = function(mode) {
        var mode = mode || 'on'; // si mode non défini, défaut: 'on'
        return this.each(function() {
                switch(mode) {
                case 'on':
                        this.checked = true;
                        break;
                case 'off':
                        this.checked = false;
                        break;
                case 'toggle':
                        this.checked = !this.checked;
                        break;
                }
        });
};

En fournissant un défaut pour l’option, on laisse l’implémenteur l’ignorer ou passer « on », « off » ou « toggle », exemple :

$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');

S’il y a plus d’un réglage optionnel, cette manière devient compliquée, car l’implémenteur doit passer des valeurs null si le premier paramètre est omis et seul le second utilisé.

L’implémentation de tablesorter au chapitre précédent montre l’utilisation d’un objet littéral pour résoudre ce problème. L’implémenteur peut omettre tous les paramètres ou passer un objet avec des paires propriété/valeur pour chaque réglage à particulariser.

En tant qu’exercice, essayez de réécrire le code du chapitre « Notez-moi » en plugin. L’ossature du plugin ressemble à :

$.fn.rateMe = function(options) {
        var container = this; // au lieu d'utiliser un conteneur statique du type $("#rating"), on utilise désormais le contexte jQuery
       
        var settings = {
                url: "rate.php"
                // ajouter des valeurs par défaut ici
                // penser à mettre une virgule (",") après chaque paire, mais pas à la fin !
        };
       
        if(options) { // vérifier si des options sont présentes avant d'étendre les réglages
                $.extend(settings, options);
        }
       
        // ...
        // suite du code
        // ...
       
        return this; // si possible, retourner "this" pour ne pas briser la chaîne
});

Prochaines étapes

Si vous pensez développer plus de javascript, intéressez-vous à l’extension Firefox appelée FireBug. Elle fournit une console (plus agréable que les alerts), un débugueur et d’autres choses bien utiles pour du développement javascript quotidien.

Si vous avez des problèmes que vous ne pouvez résoudre, des idées que vous voulez partager ou simplement une opinion à émettre sur jQuery, n’hésitez pas à poster sur la liste jQuery

P.-S.

En ce qui concerne ce guide ou sa traduction, postez en commentaires ci-dessous ; selon l’objet, il y sera répondu, ou nous le traduirons et transmettrons à l’auteur.

Sans oublier : Merci beaucoup à John Resig pour cette incroyable bibliothèque !
Merci à la communauté jQuery pour avoir fourni à John assez de café et tout le reste !

Répondre à cet article

4 Messages de forum

  • (logo)

    Danse avec jQuery : quatrième et dernier pas

    23 février 2007 09:53, par rburton

    Bonjour,

    je ne comprends pas le sens de la phrase suivante : _4 Optionellement, créer un objet avec des fonctions pour l’aide _Quelle aide ? _Quelle est la différence entre _jquery.foobar _et _jquery.fn.foobar ?

    Merci. _RB

    Répondre à ce message

  • (logo)

    Danse avec jQuery : quatrième et dernier pas

    19 mars 2007 23:44, par Xavier B

    JQuery c’est pas mal... Après avoir mis la tête dans prototype et sciptaculous. J’en aprécie la simplicité. On ne dira jamais assez la force de cette bibliothèque qui permet de sélectionner un objet dom sans qu’il n’ai pour autant d’Id. Exit donc les codes spécifiques, et bonjour la simplicité et la séparation des langages.
    JQuery n’est pas vieux, mais devrait vite s’imposer. Les Spipeux s’en font une joie, et l’extension interface passe bientôt à la version 2. Ca va faire du bruit !

    Répondre à ce message

  • (logo)

    Danse avec jQuery : quatrième et dernier pas

    23 octobre 2008 11:22, par Clem

    Bonjour, excellent article !

    J’aimerai savoir comment créer une fonction constructor. Existe t’-il une fonction avec un nomination particulière ou doit-on faire une sorte de

    (function($){
            $.fn.monPlugin = function(){       
           
                    //constructor
                    function constructor() {
                            alert('fonction initialisée');               
                    }

                    jQuery.constructor();
            };
    })(jQuery)

    Répondre à ce message


Derniers commentaires