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

creating loadingindicator jquery ui plugin

In this post i will show you how easily  you can create your own plugin (or widget) with little help of jquery ui utils.

Because i'm a great jquery-ui fan - i will try to do things  (as much as i can) in a jquery-ui style.
You can download the whole  jqueryui project from the github (click on ZIP button) and play with it.

After extracting all the files you can see demos directory -where you can find demos of all existing widgets.
All the widgets code can be found inside  UI directory.
Lets create our own widget- jquery.ui.loadingindicator.js. This widget will make some animation indicating that some  process (like ajax request) being started:

(function($) {
     $.widget("ui.loadingindicator", {
  
    _create: function() {
           var el = this.element,
           loadingDiv = $('<div />',{class:"loading"}).text('loading...');
           

           el.append(loadingDiv);
           
         //locate in the center of parent
           var left = el.width() / 2 - loadingDiv.width() / 2;
           var top = el.height() / 2 - loadingDiv.height() / 2; 
           loadingDiv.css({ left: left + 'px', top: top + 'px' });     
   }
 })
})(jQuery);

Explanation:
I'm using here the jquery ui $.widget factory - method that give me the ability to create a widget from the template - the widget already have base methods like _create or _init, all i need is to override them and put in some logic.
All the widget makes is to create a simple div with caption "loading" and locate it in the center of parent element (the element that widget is applied on) .

We will create the special css for our widget:
ltes create   jquery.ui.loadingindicator.css
inside themes/base directory
Important!
for the future use you must add following code

 @import url("jquery.ui.loadingindicator.css");

at the and of jquery.ui.base.css
It will help you to create the demo

jquery.ui.loadingindicator.css :

.loading{
  background:#030303;
  width:100px;
  text-align:center;
  height:30px;
  position:absolute;
  border-radius: 4px;
        -webkit-border-radius: 4px ;
        -moz-border-radius: 4px ;
         padding-top:12px;
         color:#fff;
   
 /*for continous glowing animation*/
        -webkit-animation-name:             glow; 
        -webkit-animation-duration:         3s; 
        -webkit-animation-iteration-count:  infinite;
        -webkit-transition-timing-function: linear;
        -webkit-animation-timing: cubic-bezier(0.1, 0.2, 0.8, 0.9);
}
 
@-webkit-keyframes glow {
  0%{     -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 190, .75);   }
  50% {     -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0, 190, .75);   }   
  100% {     -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0, 190, .75);   }
}

This css styles the 'loading' message and adds the css3 glow animation to it.
 To see how the newly maiden things working we will create our demo inside demos directory
Lets create default.html
and put it inside demos/loadingindicator folder

 Now we have a nice "loading" indication message that resides in the middle of parent div.
In the future posts we will extend this base widget functionality
Thank you for reading so far...