• Modifier le nom du plugin pluginName par quelque chose de parlant (ex : tabs).
• Modifier la classe HTML des éléments sur lequel il peut s’appliquer .js-plugin-elements (ex : .js-tabs).
• Compléter les paramètres par défaut defaults (ex : indiquer le nom de la classe CSS active).
• Compléter les méthodes privées et publiques, notamment la gestion des événements s’il y en a dans registerEvents.

Le plugin s'auto-exécute avec :

$(document).ready(function() {
  // Lie le plugin aux éléments
  $('.js-plugin-elements').pluginName();
});

Variantes

Invocation avec des options spécifiques (mais il est plus pratique de passer par les attributs data-*).

$('.js-plugin-elements').pluginName({'chou': 'croute'});

Appel de méthode publique depuis un autre plugin/script.

$('.js-plugin-elements').data('pluginName').doSomething();

Récupère la valeur de paramètres internes.

$('.js-plugin-elements').data('pluginName').settings.parameter;

Faire communiquer deux plugins indépendants

• Placer un écouteur d’événement personnalisé dans le premier plugin dans la section registerEvents.
• Le déclencher par le deuxième lorsque c’est nécessaire avec un appel de trigger().

Premier, sur l’élément de classe .first :

var registerEvents = function() {
  // Autres événements
  $element.off('myCustomEvent').on('myCustomEvent', function() {
    // Faire quelque chose lorsqu'appelé depuis l'extérieur...
  });
}

Second sur l’élément .second :

// ...
  $('.first').trigger('myCustomEvent');
  // ...

Plusieurs scripts/plugins jQuery qui suivent ce modèle sont proposés comme base de travail et utilisables sur des projets web concrets :