Simplify jQuery plugin authoring

View project onGitHub

What is easyPlug?

EasyPlug simplify jQuery plugin authoring.

Plugin creation only requires a definition object described below. All jQuery related stuff is done for you.

While it's quicker to edit it pushes conventions over all easyPlugged plugins.

How it works?

To create your plugin, all you have to do is passing to easyPlug a definition object like this one:

// Return your plugin class
Plugin = $.easyPlug({
  name:      'example',
  construct: function () {}

Definition object

Definition object does not require any member.

construct (function)

A function called each time the plugin is instanciate for an element.

events (array)

A list of custom events. Each event name will be prefixed and added to the events member of the Plugin:

  name:   'example'
  events: ['foo']

// 'easyPlug__example-foo'

init (function)

A function called when instanciating the Plugin for the first time.

invoke (function)

A function called when invoking inaccessible methods:

  invoke: function (name, args) {}

name (string)

The name of your plugin.

$.easyPlug({name: 'example'});

// Plugin class

// Plugin instance

presets (object)

Properties used by the plugin. Each plugin instance get an object combining presets and options passed by the user on instanciation:

// $.extend({}, presets, options)

prototype (object)

The prototype of your Plugin. Each method of the prototype could be called like thid:

$('.some-elements').example('methodName', arg1, arg2);

Plugin methods

EasyPlug defines "static" methods to each Plugin it generates.


Add a prefix uniq to the Plugin to any word in the string. It's this function which prefixes custom events.

// 'easyPlug__example-foo easyPlug__example-bar'
$.example.addPrefix('foo bar');

addNamespace(stringToNamespace[, local])

Add a namespace uniq to the Plugin to any word in the string. Use this when binding, setting/getting data,… in your plugin.

// 'foo.easyPlug__example bar.easyPlug__example'
$.example.addNamespace('foo bar');

// 'foo.easyPlug__example.myNS bar.easyPlug__example.myNS'
$.inlineput.addNamespace('foo bar', 'myNS');


Return the name of the plugin.

// 'example'

easyPlug methods

isPluggedTo(element, plugin)

Tell if the element was plugged by a particular plugin:

// false
$.easyPlug.isPluggedTo($('#single-element'), 'example');

// Here, element could be in a larger collection

// true
$.easyPlug.isPluggedTo($('#single-element'), 'example');

getInstance(element, plugin)

Return the plugin instance of an element if exists:

// undefined
$.easyPlug.getInstance($('#single-element'), 'example');

// Here, element could be in a larger collection

// Return the plugin instance
$.easyPlug.getInstance($('#single-element'), 'example');