Skip to content

Instantly share code, notes, and snippets.

@miguelramos
Created October 2, 2014 13:53
Show Gist options
  • Save miguelramos/f6c7d3bb10a21ffa9f06 to your computer and use it in GitHub Desktop.
Save miguelramos/f6c7d3bb10a21ffa9f06 to your computer and use it in GitHub Desktop.
jQuery module pattern skeleton
;(function($, undefined) {
// Save plugin name internally.
var pluginName = 'collapsible';
var Collapsible = function($el, options) {
var self = this;
/**
* Default options
*/
var defaults = {
/**
* Time the animation should last
*/
"delay": 1000,
/**
* Loop the animation
*/
"loop": false
};
self.options = $.extend({}, defaults, options);
var something = "These vars are all private by the way."
init();
/**
* Initializes the plugin, creates HTML, etc.
*/
function init() {
console.log($el);
}
function open() {
//...
}
function close() {
//...
}
/**
* These methods and vars are public
*/
return {
"open": function() {
open();
// By returning $el chaining is possible again.
return $el;
},
"close": function() {
close();
return $el;
}
}
};
/**
* The first time this function is called it attaches the plugin to
* the element.
*
* Chaining continues from the public methods.
*
* @returns the plugin
*/
$.fn.collapsible = function(options) {
return this.each(function() {
var $this = $(this);
// Attach Anim object first time through.
if ($this.data(pluginName) == undefined) {
$this.data(pluginName, new Collapsible($this, options));
}
// Return module.
});
};
})(jQuery);
$(document).ready(function(){
$('.ui.menu.side').collapsible();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment