Skip to content

desandro/jquery-bridget

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.

Bridget makes jQuery plugins

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.

Plugin constructor

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

Usage

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.

Package managers

Install with npm npm install jquery-bridget

Install with Yarn yarn add jquery-bridget

MIT license

Bridget is released under the MIT license.

About

🌉 bridget makes jQuery plugins

Resources

Stars

Watchers

Forks

Packages

No packages published