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...

Dynamic tabs with knockoutjs - part 3

Gettig all the widgets to work together
Now lets make some slight modifications to tabsViewModel so it will be able to host
the widgets from previous post:

var tabViewModel=function(title, active, model, templateName){ 
  this.title=ko.observable(title);
  this.active=ko.observable(active);
  this.model=ko.observable(model);
  this.templName=templateName;
};
var tabsViewModel=function(){  
  this.tabsArr=ko.observableArray([]); 

 
  this.makeTabActive=function(data){

    
      $.each(this.tabsArr(),function(ind,item){
       item.active('');
   });


   
     data.active('active');
  
  }.bind(this);
  

  this.addTab=function(title, active, model, template){
    var nt=new tabViewModel(title, active, model, template);
 this.tabsArr.push(nt);
    this.makeTabActive(nt);
  }.bind(this);

Only difference is that now there is new parameter inside tab model constructor -the model.
Here we sending the widget that will reside in the tab .

Changing templates
Also templates for tabs must be changed for be able to support model parameter:

Adding functions to each of the widgets:
Each widget must be able now to connect with tabs widget and with other 'brother' widgets inside tabs:

//for add the search tab
homeViewModel.prototype.openSearchTab=function(){
   tabs.tabsArr.push(new tabViewModel('search','' ,new searchViewModel(),'searchTmpl'))
};
//for add the person tab
searchViewModel.prototype.openPersonTab=function(data){

   var f=data.firstname;
   var l=data.lastname;
   var newPerson=new personViewModel(f,l);
   tabs.addTab(f+' '+l,'' ,newPerson,'personTmpl');
};
//for make new friend to appear the home tab
personViewModel.prototype.addFriend=function(){
   var homeVM=tabs.tabsArr()[0].model();
   homeVM.friends.push({name:this.firstname()})
}

Thats it, now our tabbed social network application is ready and functioning.
Hope you enjoy to read this post...
download source
demo