Skip to content
Framework for creating specialized jQuery plugins
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



jQuery.Pluginizer is a kind of "meta-plugin" for jQuery: a plugin that simplifies creation of other plugins. It works especially well in complex web applications, where it allows to easily modularize pieces of JavaScript which are used to render interactive elements on page.


Let's say we have some sort of dynamically loaded list of items - for example, a stream of events from social network such as Twitter:

<ul class="stream">
    <li>Creating a polaroid photo viewer with #CSS3 and #jQuery</li>
    <li>50 Useful New jQuery Techniques and Tutorials - Smashing Magazine #jquery</li>
    <li>Simplest SOAP example using Javascript - Stack Overflow #jQuery #javascript</li>
    <li class="loader"><a href="#">Load more</a></li>

Besides some HTML markup, the stream also needs some JavaScript to handle user interaction and make AJAX requests. We can use jQuery.Pluginizer to easily turn this logic into dedicated jQuery plugin which we'll then apply to the DOM above:

$.pluginize('stream', function(data) {
    var $stream = this;
    var $loader = $stream.find('.loader');

    var loaderLink_click = function(event) {
        var ajaxArgs = data.time ? { time: data.time } : {};
        $.getJSON('/api/stream/load', ajaxArgs).done(function(items) {
            $.each(items, function() {
                var $li = $('<li/>').html(this.text);
            if (items.length > 0)
                data.time = items[items.length - 1].time;

    return {
        init: function() {
            data.time = null;
            $loader.find('a').on('click', loaderLink_click);

$(document).ready(function() {

Thanks to this encapsulation, we can now effortlessly use our stream on multiple pages - or possibly even more than once on single page.

Pluginizing your code

$.pluginize is the sole function exposed by jQuery.Pluginizer:

$.pluginize = function(name, methods, initialData)
  • name - Plugin name, and also a name for function that will be attached to $() objects. Should be unique. Using valid JavaScript identifiers is recommended.
  • methods - Methods exposed by the plugin.
  • initialData - Plugin's initial data.

The methods parameter can be either a JavaScript object or a function returning such object.

If it's a function, it can accept a single argument: an object that can be populated with plugin-specific data. It will be stored as properly namespaced $.data within DOM element. This data object is initialized using initialData argument, if present.

The DOM element itself ($-wrapped) will be accessible through this inside the methods function.

Using the plugin

$.pluginize adds a function of with given name to jQuery $() objects. Calling it can either initialize the plugin functionality for given DOM object (using the init method), or one of the other methods:

$.pluginize('foo', ...);

$('.items').foo();              // initializes the plugin 'foo' for every element with class 'items'
// $('.items').foo('init');         // equivalent to the call above
$('.items').foo('load');            // invoke 'load' method of 'foo' plugin
$('.items:last').foo('addItems', items);    // call 'addItems' method with parameter


jQuery.Pluginizer uses the MIT license.

Something went wrong with that request. Please try again.