Creating a jQuery Plugin and Public Access Methods

Question

I created a plugin to convert an HTML selection window into a custom snapshot using a DIV.

Everything works well, but I would like to make it a little better. see my jsFiddle

At the end of the plugin, I have 2 methods, slideDownOptions and slideUpOptions, I would like to make them available outside the plugin so that other events can trigger an action.

Im a little confused how to do this, or rather, how to call methods both inside the plugin and outside the plugin.

Any help is always appreciated.

Answer 1

Think about refactoring your plugin using object oriented code. With this, you can make APIs for your plugins, such as jQuery interface APIs. This way you can access the plugin methods, for example:

$('select').customSelect(); // apply plugin to elements $('select').customSelect('resetOpacity'); // call method resetOpacity(); $('select').customSelect('setOpacity', 0.5); // call method with arguments 

The basic template for creating such plugins will look like this:

 // plugin example (function($){ // custom select class function CustomSelect(item, options) { this.options = $.extend({ foo: 'bar' }, options); this.item = $(item); this.init(); } CustomSelect.prototype = { init: function() { this.item.css({opacity:0.5}); }, resetOpacity: function() { this.setOpacity(''); }, setOpacity: function(opacity) { this.item.css({opacity:opacity}); } } // jQuery plugin interface $.fn.customSelect = function(opt) { // slice arguments to leave only arguments after function name var args = Array.prototype.slice.call(arguments, 1); return this.each(function() { var item = $(this), instance = item.data('CustomSelect'); if(!instance) { // create plugin instance and save it in data item.data('CustomSelect', new CustomSelect(this, opt)); } else { // if instance already created call method if(typeof opt === 'string') { instance[opt].apply(instance, args); } } }); } }(jQuery)); // plugin testing $('select').customSelect(); 

The working JS script is here: http://jsfiddle.net/XsZ3Z/

Answer 2

You will need to reorganize the code for it to work. Consider using the jQuery Boilerplate :

 ;(function ( $, window, undefined ) { var pluginName = 'convertSelect', document = window.document, defaults = { propertyName: "value" }; function Plugin( element, options ) { this.element = element; this.options = $.extend( {}, defaults, options) ; this._defaults = defaults; this._name = pluginName; this.init(); } Plugin.prototype = { // Private methods start with underscore _generateMarkup: function() { // you can access 'this' which refers to the constructor // so you have access the all the properties an methods // of the prototype, for example: var o = this.options }, // Public methods slideDownOptions: function() { ... } } $.fn[ pluginName ] = function ( options ) { return this.each(function () { if (!$.data( this, 'plugin_' + pluginName ) ) { $.data( this, 'plugin_' + pluginName, new Plugin( this, options ) ); } }); }; }(jQuery, window)); 

You can then call the public methods as follows:

 var $select = $('select').convertSelect().data('plugin_convertSelect'); $select.slideDownOptions(); 

I had a similar problem with my project, I recently had to reorganize all this because I polluted the jQuery namespace with too many methods. The jQuery Boilerplate works very well, based on the official jQuery guide, but with some twists. If you want to see this plugin template in action, see https://github.com/elclanrs/jq-idealforms/tree/master/js/src .