Skip to content

Instantly share code, notes, and snippets.

@facultymatt
Created February 18, 2013 01:24
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save facultymatt/4974576 to your computer and use it in GitHub Desktop.
Save facultymatt/4974576 to your computer and use it in GitHub Desktop.
Faculty plugin template v1
/**
* jQuery Plugin Template
*
* @author Faculty Creative
*
* This plugin will init itself on elements with a class you specify. Data attrs can be used to override
* default options of the plugin.
*
*
* Insipired by Bootstrap and smashing magazine patterns
* @see http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
* @see https://github.com/twitter/bootstrap
*
*
* HOW TO USE:
* - Change instances of EditInPlace and editinplace to YourPluginName and yourpluginname
* - Add defaults functions
* - Plugin auto-inits based on class
*
* HOW TO AUTOINIT your plugin
* - Add classes to elements you want to be pluggable
* - Add data attrs, which will override defaults
*
* HOW TO TRIGGER PLUGIN FUNCTIONS in your code
* $(elem).yourPluginName('functionName', {option: value})
*
*/
;(function ( $, window, document, undefined ) {
/**
* Not much to see here, this calls init when we create a new plugin instance
*/
var EditInPlace = function (element, options) {
// check to make sure the element exists we are calling this on
if(element.length === 0) return false;
this.init('editinplace', element, options)
}
/**
* Main plugin functionality
* - You should not remove 'constructor', just change to YourPluginName (note camelcase)
* - Add default vars and call functions from init as needed, ie: this.enabled = true would be at home in init
* - Keep log for good measures
*
* Beyond this, add whatever functions you need, ie: 'show', 'hide', 'toggle', 'render'
* - Access these functions from each other by calling this.functionName
*
*/
EditInPlace.prototype = {
constructor: EditInPlace,
/**
* Init our plugin
*/
init: function(type, element, options) {
// cache DOM element and jQuery element
this.element = element;
this.$element = $(element);
// type is passed from init, and is what we store data inside
this.type = type
// allows us to set data attrs per element, which extend
this.options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())
// are we ready!??
this.log(this.options.message);
},
/**
* Allows us to easily elinimate all console logs from our plugin by commenting out one line
* send all logs here!
*/
log: function(message) {
console.log(message)
},
/**
* Example function
*/
yourFunction: function() {
// this.$element is the jQuery element
// this.element is the DOM element
// this.options.optionName will return options
}
}
/**
* Simple constructor that will create new instance of plugin or call prototype functions.
* ie: $(elem).yourPluginName() will init an new instance of the plugin
* ie: $(elem).yourPluginName('show', {speed : 400}) will call the show method with options, if it exists
*
*/
$.fn.editinplace = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('editinplace')
, options = typeof option == 'object' && option
if (!data) $this.data('editinplace', (data = new EditInPlace(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.editinplace.Constructor = EditInPlace
/**
* Define defaults
*/
$.fn.editinplace.defaults = {
message : 'Hello! Matt this plugin template is working!'
}
/**
* Autoload out plugin by class. Will inherit data attrs.
*
*/
$(document).ready(function() {
$('.edit-in-place').editinplace();
});
})( jQuery, window, document );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment