Skip to content

Instantly share code, notes, and snippets.

@steelx steelx/README.md forked from m4dz/README.md
Created Jul 29, 2013

Embed
What would you like to do?

This files contains my boilerplates for jQuery plugins.

(function($, undefined) {
$.fn.pluginName = function(options) {
// Default options
options = $.extend({
property: "value",
onEvent: function() {}
}, options);
// Iterate over jQuery elements
return this.each(function() {
// YOUR PLUGIN LOGICS HERE
});
});
})(jQuery);
# Wrap all plugin in a function module wrapper, passing `jQuery` as `$`.
do ($ = jQuery) ->
# Set the plugin namespace
namespace = 'pluginName'
# Set default options (values and callback functions)
defaults =
propertyName: "value"
onEventCallback: ->
# Plugin Wrapper
# --------------
#
# The complete plugin class, used to build custom plugin
class Plugin
# Constructor (and init task):
# -----------
#
# - @element : the current element that take focus inside the plugin
# - @options = the extended defaults options with args passed options
# - @_defaults = the defaults options
# - @_name = the plugin name
constructor: (@element, a, options) ->
@options = $.extend {}, defaults, options
@_defaults = defaults
@_name = namespace
@init();
# Init task
# ---------
init: ->
# your initilization logic goes here
anotherMethod: (el, options) ->
# put internal logic here
# like trigger option callback for example, passing element as `this`
@options.onEvent.call @element
# Plugin wrapper around the constructor, preventing against multiple
# instantiations
$.fn[namespace] = (a, options) ->
[_, args...] = arguments
@each ->
plugin = $.data @, "plugin_#{namespace}"
# Init the plugin once and only if the `args` is `null` or an object
unless plugin
$.data @, "plugin_#{namespace}", new Plugin(@, a, options)
# If `args` is the name of a plugin method, then call it
else if plugin[_]? and $.type(plugin[_]) == 'function'
plugin[_].apply plugin, args
(function($, undefined) {
var Plugin, defaults, namespace;
// Default options and settings
namespace ='pluginName';
defaults = {
propertyName: 1000,
onEvent: function() {}
};
// PLUGIN --------------------------------------------------------------------
//
// Declare the plugin fuction, isolated in a sub-module pattern to prevent
// leaks and preserve vars scope.
//
Plugin = (function() {
// The Plugin object
function Plugin(element, options) {
// Store elements to access it later easily
this.element = element;
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = namespace;
// Fire the init method
this.init();
}
// The initalization
Plugin.prototype.init = function() {
// YOUR INIT LOGIC HERE
};
// a custom method launchable externaly
Plugin.prototype.open = function() {
// YOUR METHOD LOGIC HERE
// Firing the callback example
this.options.onOpen.call(this.element);
};
// Expose the Plugin externaly
return Plugin;
})();
// JQUERY --------------------------------------------------------------------
//
// Expose the plugin in the jQury prototype
//
$.fn[namespace] = function(options) {
// Explode arguments tio use it when callbacking
var args, _;
_ = arguments[0];
args = [].slice.call(arguments, 1);
// Iterate over jQuery elements
return this.each(function() {
var plugin;
// Get the plugin attached to the element
plugin = $.data(this, "plugin_" + namespace);
if(!plugin) {
// Instanciate a new plugin and store it in the jQuery object
$.data(this, "plugin_" + namespace, new Plugin(this, options));
} else if(plugin[_] != null && $.type(plugin[_]) == 'function') {
// If the plugin contains the called method, apply it
return plugin[_].apply(plugin, args);
}
});
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.