Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Quickly create new jQuery plugins and chain together jQuery plugin requires.
JavaScript
branch: master
Failed to load latest commit information.
dist As it turns out, it was absolute paths which was breaking my phantom …
libs Strangely enough, requirejs works in browser but not in phantom
src Working my way through test skeleton
stage Working my way through test skeleton
test As it turns out, it was absolute paths which was breaking my phantom …
.gitignore 10 steps away from developing own templater
.npmignore Initial commit
LICENSE-MIT Initial commit
README.md Added component.json and updated README
bower.json
component.json Bumped version
grunt.js As it turns out, it was absolute paths which was breaking my phantom …
package.json Bumped version

README.md

jqueryp

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

Getting Started

In the browser

Download the production version (vanilla or requirejs) or the development version (vanilla or requirejs) or install via:

# Install via bower
bower install jqueryp

# Install via component
component install Ensighten/jqueryp

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

In your web page:

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

Documentation

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]
 */

require.js extras

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
});

Examples

Setting up a new jQuery plugin

// 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 () {
    that.toggle();
  });
}
Toggle.prototype = {
  'toggle': function () {
    var $item = this.$item;

    // Toggle the class
    $item.toggleClass('is-selected');

    // Fire an event
    $item.trigger('toggle.toggle');
  }
};

// Export the Toggle class to $.fn
$.exportModule('toggle', Toggle);

Play around with click binding by constructor

// Enable toggling of table rows
var $rows = $('tr');
$rows.toggle();

// Click the first row
var $firstRow = $rows.first();
$firstRow.click();

// Assert the first row has the class 'is-selected'
$firstRow.hasClass('is-selected'); // true
$rows.last().hasClass('is-selected'); // false

Manually call prototyped methods

// Calling 'toggle' method of Toggle class
var $pseudoCheckboxes = $('.pseudo-checkbox');
$pseudoCheckboxes.toggle('toggle');

// The checkboxes are now checked
$pseudoCheckboxes.hasClass('is-selected'); // true

// Clicking them will uncheck them (as set up by constructor)
$pseudoCheckboxes.click();
$pseudoCheckboxes.hasClass('is-selected'); // false

require.js flavor allows for slick chaining of plugin dependencies

require(['jqueryp!autocomplete!expand!ui'], function ($) {
  $('input[type="text"]').autocomplete();
  $('.container-tall').expand();
  $('.modal').modal();
});

Contributing

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!

PhantomJS

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.

License

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

Something went wrong with that request. Please try again.