creating jquery-ui plugin -part2

In this post we will extend the plugin created in previous post, so it will became more customizable.

Firstly lets speak about options.
Options like parameters which supplied to the plugin when it initiated.
Lets make the user to be able of customizing the text of loading message:

     $.widget( "ui.loadingindicator", {       
        options: {
          caption: "loading..."
        },
     ...

Explanation: Here we specifying the caption parameter (the message text), which value by default is "loading...", but user may change it if plugin initiated following way:

$( "#main" ).loadingindicator({caption:'wait please'});

Another thing we can extend our plugin is to add to it some public methods.
Lets add close method  which will make the 'loading' message disappear after the process finished:

   //public
    close: function(){
          this._destroy();
    },
   //private
   _destroy: function(){
          this.element.find(".loading").remove();
   },

Explanation:
$.widget factory makes methods without '_' prefix to be accessible from within plugin calls. From now you may hide the indicator by writing following code:

$( "#main" ).loadingindicator('close');

One more thing that you can see almost in each jquery-ui plugin is events.
Events are fired by plugin when some actions occurred. The plugin's user can specify callbacks, which will take place in response of the event.
Lets add some event to our plugin:

 //click event and callback
  var that = this;     
  this._on( this.loadingDiv, {
   click: function( event ) {
     that._trigger( "click", event, {caption:that.options.caption});     
   }     
 })

Now, if user want something to happen when loading message being clicked he can subscribe to the event when plugin initiated:

var lodaing=$( "#main" ).loadingindicator({
 caption:'wait please',
 click: function(event ,ui ){
   //will close the message
   lodaing.loadingindicator('close');
 }  
});

demo