Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kylefox/407197 to your computer and use it in GitHub Desktop.
Save kylefox/407197 to your computer and use it in GitHub Desktop.
(function($) {
$.fn.thePlugin = function(options) {
// build main options before element iteration:
var opts = $.extend({}, $.fn.thePlugin.defaults, options);
var $this = $(this);
var thePlugin = {
index: 0,
otherVar: true,
init: function() {
if(window.console) window.console.log('init() called. this = ', this);
doThat: function(){
var a = thePlugin.otherVar;
if(window.console) window.console.log('doThat() called.');
getIndex: function(){
// the interesting thing here is that from the HTML (public) 'this' will return the api object, not the thePlugin object because that's where it's called from.
if(window.console) window.console.log("internal thePlugin.getIndex() called. this = ", this, "thePlugin = ", thePlugin);
// this works because we're accessing thePlugin object directly:
if(window.console) window.console.log(thePlugin.doThat);
// this works because we're calling the function through the API itself:
if(window.console) window.console.log(this.doAwesome);
// this will not work for an API function (from the outside) because doThat is not returned in the API:
if(window.console) window.console.log(this.doThat);
return thePlugin.index;
if (opts.api) {
var api = {
getIndex: thePlugin.getIndex,
doAwesome: thePlugin.doThat,
opts: opts,
obj: $this
$'thePlugin.api', api);
return this.each(function() {
// start the action here
// plugin defaults
$.fn.thePlugin.defaults = {
optionA: 'testing',
api: true
// public function/method
$.fn.thePlugin.ver = function() { return "jquery.thePlugin version " + ver; };
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery plugin pattern</title>
<script src="" type="text/javascript" charset="utf-8"></script>
<script src="jquery.thePlugin.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var api = $('#slideshow').thePlugin().css('background','red').data('thePlugin.api');
if(window.console) window.console.log('api = ', api, api.opts, api.obj);
// if(window.console) window.console.log( 'api.getIndex() called from HTML: ', api.getIndex() );
// options/settings are maintained through multiple instances on same page:
var elm2 = $('#elm2').thePlugin({
optionA: 'mycustomvalue'
}).css('background', 'blue').data('thePlugin.api');
if(window.console) window.console.log(elm2, elm2.opts, elm2.obj);
// try to overwrite the function. can't get access to internal 'thePlugin'
api.doAwesome = function(){
if(window.console) window.console.log(this, typeof(thePlugin));
<h1>jquery plugin pattern with API</h1>
<div id="slideshow">
<p>the test element to be selected</p>
<div id="elm2">
<p>another test element...</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment