Brought to you by Cloud CMS

Instance-aware plugins take things to the next level in terms of usability. jQuery UI does this in all of thier plugins.

For example, jQuery UI can create a dialog, then call it again. That is what "instance-aware" means: <script> jQuery('.mydialog').dialog({ autoOpen : false }); // later in code jQuery('.mydialog').dialog('open'); </script> So here is how to do that and I've tried to keep it as small and simple as possible with comments to help you out <script> $.fn.myPlugin = function() { var $self = $(this), // make reference to itself as a jQuery object args = Array.prototype.slice.apply(arguments), // get argument list passed and make into an array to use later config = { // setup default configuration value someValue : 'default value' }, instanceMethods = { // setup some example instance methods method1 : function() { // this shows an instance method with no arguments alert(config.someValue); }, method2(self, anotherValue) { // this shows an instance method with more than one argument alert(config.someValue + ' ' + anotherValue); } }; if ($self.data('myplugin-defined')) { // the "data" in jQuery is used to keep track of instance state config = $self.data('myplugin-config'); /* If defined already, will come here and get back its configuration object from the first time around. This is important because otherwise, everytime your plugin is called, it just creates a new config object each time so your config changes are never saved. */ if (args.length > 0) { // if the argument passed in is a method call with possible arguments... instanceMethods[args[0]].apply(this,args.slice(1,args.length)); /* So what is happening here is we are taking a call like jQuery('div').myPlugin('method2','testing'); and looking to see if the argument list has at least one item in it or more. The "0" item would be "method2" and any further items would be what is passed in such as "testing" would be argument "1", etc. The is called "currying". */ } return $self; // since we already did our initial plugin code below, we just return here for jQuery chaining behavior } else { $self.data('myplugin-defined', true); if (args.length > 0 && $.isPlainObject(args[0])) { config = $.extend(config, args[0]); } $self.data('myplugin-config',config); /* This is hit the first time you call the instance. It sets the initial configuration and stores it for later use. */ } /* Do your initial plugin code here where the majority of the work takes place on the first visit. Remember to store your data you need on your instance in the "data" object in jQuery to get it back for later. Make sure to namespace it like : $self.data('myPlugin-somedata') as to not step on other's data. Another good tip is to namespace your events so you can bind and unbind them without unbinding other's events. */ return $self; // return for jQuery chaining behavior }; </script>