Quickly create new jQuery plugins and chain together jQuery plugin requires.


Quickly create new jQuery plugins and chain together jQuery plugin requires.

Download the production version (vanilla or requirejs) or the development version (vanilla or requirejs).

Additionally, the chaining mechanism is available sans $.exportModule (production and development).

In your web page:

<script src="dist/jqueryp.min.js"></script>
$.exportModule('cornify', Cornifier);

jqueryp writes itself a method directly on the jQuery object. It can be accessed via $.exportModule or jQuery.exportModule.

 * Function to easily add new jQuery plugins via a constructor function
 * @param {String} moduleName Name of the module
 * @param {Function} module Constructor function to bind under $()[moduleName]

If you are using require.js, you will need to require(['jqueryp!'], function ($) { /* ... */ }); to access $.exportModule. The trailing ! is an artifact of jqueryp being a plugin.

The initial intent of jqueryp was to chain together requires of multiple jQuery plugin and still wind up with jQuery in the end. As a result, you can load in the jQuery plugins autocomplete, expand, modal via

require(['jqueryp!autocomplete!expand!ui'], function ($) {
  // Do stuff with $.fn.autocomplete 
  // Do stuff with $.fn.expand 
  // Do stuff with $.fn.modal 
// Create a Toggle class 
function Toggle(elt) {
  var $elt = $(elt),
      that = this;
  this.$elt = $elt;
  // When the element is clicked, toggle it 
  $elt.on('click', function () {
Toggle.prototype = {
  'toggle'function () {
    var $item = this.$item;
    // Toggle the class 
    // Fire an event 
// Export the Toggle class to $.fn 
$.exportModule('toggle', Toggle);
// Enable toggling of table rows 
var $rows = $('tr');
// Click the first row 
var $firstRow = $rows.first();
// Assert the first row has the class 'is-selected' 
$firstRow.hasClass('is-selected'); // true 
$rows.last().hasClass('is-selected'); // false 
// Calling 'toggle' method of Toggle class 
var $pseudoCheckboxes = $('.pseudo-checkbox');
// The checkboxes are now checked 
$pseudoCheckboxes.hasClass('is-selected'); // true 
// Clicking them will uncheck them (as set up by constructor) 
$pseudoCheckboxes.hasClass('is-selected'); // false 
require(['jqueryp!autocomplete!expand!ui'], function ($) {

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.

Also, please don't edit files in the "dist" or "stage" subdirectories as they are generated via grunt. You'll find source code in the "lib" subdirectory!

While grunt can run the included unit tests via PhantomJS, this shouldn't be considered a substitute for the real thing. Please be sure to test the test/*.html unit test file(s) in actual browsers.

See the Why does grunt complain that PhantomJS isn't installed? guide in the Grunt FAQ for help with installing or troubleshooting PhantomJS.

Copyright (c) 2012 Ensighten Licensed under the MIT license.