https://github.com/desandro/jquery-bridget

:bridge_at_night: bridget makes jQuery plugins
https://github.com/desandro/jquery-bridget

Last synced: 3 days ago
JSON representation

:bridge_at_night: bridget makes jQuery plugins

• Host: GitHub
• URL: https://github.com/desandro/jquery-bridget
• Owner: desandro
• Created: 2012-12-28T04:37:00.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2023-07-19T00:51:53.000Z (over 1 year ago)
• Last Synced: 2024-10-27T23:21:47.945Z (15 days ago)
• Language: JavaScript
• Homepage:
• Size: 189 KB
• Stars: 108
• Watchers: 4
• Forks: 24
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Bridget makes jQuery plugins

Bridget makes a jQuery plugin out of a constructor :factory:

It's based off of the [jQuery UI widget factory](https://jqueryui.com/widget/). Used for [Masonry](https://masonry.desandro.com), [Isotope](https://isotope.metafizzy.co), [Packery](https://packery.metafizzy.co), [Flickity](https://flickity.metafizzy.co), [Infinite Scroll](https://infinite-scroll.com), and [Draggabilly](https://draggabilly.desandro.com).

## Plugin constructor

A plugin constructor uses Prototypal pattern. It needs to have a `._init()` method used for its main logic.

``` js

// 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()`.

``` js

// 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](https://desandro.mit-license.org).