Bridget makes a jQuery plugin out of a constructor 🏭
It's based off of the jQuery UI widget factory. Used for Masonry, Isotope, Packery, Flickity, Infinite Scroll, and Draggabilly.
A plugin constructor uses Prototypal pattern. It needs to have a ._init() method used for its main logic.
// plugin constructor
// accepts two argments, element and options object
function NiceGreeter( element, options ) {
this.element = $( element );
this.options = $.extend( true, {}, this.options, options );
this._init();
}
// defaults for plugin options
NiceGreeter.prototype.options = {
greeting: 'hello',
recipient: 'world'
};
// main plugin logic
NiceGreeter.prototype._init = function() {
var message = this.getMessage();
this.element.text( message );
};
// getter method
NiceGreeter.prototype.getMessage = function() {
return this.options.greeting + ' ' + this.options.recipient;
};Bridget can make this constructor work as a jQuery plugin. The namespace is the plugin method - $elem.namespace().
// convert constructor to jQuery plugin
jQueryBridget( 'niceGreeter', NiceGreeter );
// optional: pass in jQuery variable
jQueryBridget( 'niceGreeter', NiceGreeter, jQuery );
// now the constructor can be used as a jQuery plugin
var $elem = $('#elem');
$elem.niceGreeter();
// >> h1 text will be 'hello world'
// set options
$elem.niceGreeter({
greeting: 'bonjour',
recipient: 'mon ami'
});
// >> text will be 'bonjour mon ami'
// access constructor instance via .data()
var myGreeter = $elem.data('niceGreeter');Getter methods can still be used. For jQuery objects with multiple elements, getter methods will return the value of the first element.
Install with npm npm install jquery-bridget
Install with Yarn yarn add jquery-bridget
Bridget is released under the MIT license.