jQuery Boiler is a lightweight jQuery plugin to help you quickly build your own custom plugins. It uses best practices to ensure that you're using the best development pattern without all the hassle.
bower install jquery-boiler
Make sure jQuery Boiler is loaded before your plugin. Whether it be loaded as an AMD module, or a script tag in your header.
Create a new plugin by passing
$.boiler your plugins name and the plugin object.
$.boiler has been run, you can call it like you would any other plugin.
And yes, this is chainable :).
The Plugin Object
The plugin object you pass contains your settings and variables, as well as your private and public methods. The plugin object is the heart of your plugin since you'll have access to this object via the
this keyword in all of your private and public methods.
Technically you can run this object however you want, but there are certain key items that the plugin object is expecting.
Setting Up The Object
defaults are the default settings for your plugin. When a user uses your plugin, they'll have the opportunity to pass their own settings to overwrite these values.
defaults are set, they can be overwritten by the user when the plugin is initiated.
events are bound to the element that the plugin is bound to. The associated values are the names of the methods that will be run when the event is triggered.
Note: You can delegate these events by passing a selector after the event name:
'click .child': 'onClick'.
data is a list of
data-attributes that the plugin will look for to overwrite the settings.
Now you can set
tip using the dom elements
Note: This data value will overwrite both the default and user set values.
init is a function that will automatically be run when the plugin is initiated. This is a good place to cache elements or do any heavy lifting to prepare the plugin for action.
Public methods are methods that can easily be run by the user.
The user can run this function by calling the plugin after it's been initiated.
// Initiate;// Call public method;
Note: The user can pass variables to the function in the same way.
Private methods are methods that can be run from within the plugin, but they can't be accessed by the user. These methods can be recognized by having a prefixed underscore.
Using The Object
var plugin = this;
You can reference the plugin object from within a method by calling
this. It's good practice to store this value into a plugin variable.
You have access to the dom element that the plugin has been bound to through
plugin.$el (jQuery object), and
plugin.el (dom element).
plugin.settings are the settings for the plugin based on
settings take priority based on
$;;// Logs 'This is the user option tip.'
Note: The plugin object also gives you access to
At any time you can access the full plugin object using the cached
;console // 'My last tip.';