Created
May 20, 2010 01:34
-
-
Save elidupuis/407085 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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 | |
}; | |
$this.data('thePlugin.api', api); | |
}; | |
return this.each(function() { | |
// start the action here | |
thePlugin.init(); | |
}); | |
}; | |
// plugin defaults | |
$.fn.thePlugin.defaults = { | |
optionA: 'testing', | |
api: true | |
}; | |
// public function/method | |
$.fn.thePlugin.ver = function() { return "jquery.thePlugin version " + ver; }; | |
})(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" | |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
<title>jQuery plugin pattern</title> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 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"> | |
$(document).ready(function(){ | |
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)); | |
} | |
api.doAwesome(); | |
}); | |
</script> | |
</head> | |
<body> | |
<h1>jquery plugin pattern with API</h1> | |
<div id="slideshow"> | |
<p>the test element to be selected</p> | |
</div> | |
<div id="elm2"> | |
<p>another test element...</p> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment