[orginal]Toolbar control based on web design

abstract : toolbar is one of the most important controls for design  desktop ,web interface. today we try to explain how to create toolbar  from ABC .

 with nice look body, easy to control and invoking.

physically: the toolbar is container that hold other element such image ,text or even more complex control like list,combox  with in inline display ,

from html point of view we can say  each element of the toolbar is LI ,the toolbar it'self is UL. it is not easy as i said  we will see more below .

logically: we  will see the three logic basic aspects for the toolbar  that is css,js,and html.

css:

 

/*ul*/

.Toolbar

{

    width:600px;

    height:64px;

    position:absolute;

    border:1px #C1C5CD solid;

    list-style:none;

    background-repeat:repeat-x;

    margin:0px;

    padding:0px 0px 0px 0px;

    

}



.ToolbarItem

{

    display:inline;

    margin-left:0px;

    margin-top:0px;

    width:auto;

    height:inherit;

    position:static;

    color:black;

    float:left;

    cursor:default;

    position:absolute;

}





.toolbarItemBurron

{

    position:absolute;

    cursor:default;

    background-repeat:no-repeat;

  

}



/*button caption*/

.toolbarItemBurron .toolbarItemCaption

{

    cursor:default;

    text-align:center;

    margin-left:0px;

    margin-top:0px;

    position:absolute;

    font-family: 宋体;

    font-size: 12px;



}

JS: 

 from js point of view  we consider how to create the toolbar auto-code  that is to mean the user will not asked to create html code , the js here to accomplish all these functions , below we go with more details  starting from the toolbar items .

 Toolbar Item:

1- create the item in js code : 

here enable the function to create js element and tags dynamically  for each element with dynamically naming 

 function ToolbarItemCode(parent)

{

  var div=document.createElement('div'); // the border

      div.id=parent+'tbItem';

      div.className='toolbarItemBurron';

  var pa=document.getElementById(parent);

      pa.appendChild(div); 

 

2- class of the toolbar item :

here we go the toolbar item as object mean  the class of the toolbar item that is to say each element in the toolbar is an entity that is different  from other elements.

here is the class with most important methods and properties as you will see , all these  methods provide practical way to control the items of the tab independently ,also provide dynamic layout for each item.

// the class of the toolbar item

function ToolbarItem(parent,Width,Height)

{

 

 

      ToolbarItemCode(parent);

      var btnId=parent+"tbItem";

            

  var left;

  var top;

  var caption;;

  var background;

  // create html code.

  var ObjectBtn=document.getElementById(btnId);

      ObjectBtn.style.height=Height;

      ObjectBtn.style.width=Width;

      ObjectBtn.innerHTML="<span id="+btnId+"Caption class=toolbarItemCaption><span/>";

      

         // set the caption left and right:

           capObject=document.getElementById(btnId+'Caption');

           

           //

      var sn=0;// state height.

  this.getWidth=function(){return Width;}

  this.getHeight=function(){return Height;}

  this.setMarginTop=function(value)

  {

    ObjectBtn.style.marginTop=value;

   top=value;

  }

  this.getMarginTop=function(){return top};

  

  this.setMarginLeft=function(value)

  {

    ObjectBtn.style.marginLeft=value;

   left=value;

  }

  this.getMarginLeft=function(){return left};

  

  

  

  this.setAdvanceText=function(value,ttop)

  {

    if(value.length<4)

    {

    var Len=value.length*6; // for english=3.

    capObject.innerHTML=value;

    capObject.style.marginTop=ttop;

    capObject.style.marginLeft=(Width/2)-Len;

    }

    else

    {

     capObject.innerHTML=value;

     capObject.style.marginTop=ttop;

     capObject.style.marginLeft=1;

    }



  }

  

  



  

  this.setText=function(value)

  {

    var Len=value.length*4;

    capObject.innerHTML=value;

   capObject.style.marginTop=Height/2;

   capObject.style.marginLeft=(Width/2)-Len;



  }





  this.getText=function(){return capObject.innerHTML;}

  this.setBackground=function(path)

  {

    ObjectBtn.style.backgroundImage="url("+path+")";

  }

   

  

     ObjectBtn.onmousemove=function(){changeState(btnId,Height,1);}

     ObjectBtn.onmouseout=function(){changeState(btnId,Height,0);}

     ObjectBtn.onmousedown=function(){changeState(btnId,Height,2);}

     ObjectBtn.onmouseup=function(){changeState(btnId,Height,1);}

  

}

 toolbar:

after  we write the code for each item of the toolbar , just need to invoke it here , the toolbar is also object that contain methods and properties each one has it's own flavor :

we start  by creating the html code dynamically using js as below :

function CreateToolBarHTMLcODE(pid)

{

    var par=document.getElementById(pid);

    var toolbar=document.createElement('ul');

        toolbar.id=pid+'Toolbar';

        toolbar.className='Toolbar';

        par.appendChild(toolbar);




}

here is class object:

function Toolbar(pid,width,height)

{

     var itemIndex=-1;

     var left,top;

     var itemLeft,itemTop;

     var itemWidth;

     var itemHeight;

     var itemsCaptionLeft;

         CreateToolBarHTMLcODE(pid);

     var parentObject=document.getElementById(pid);

     var barObject=document.getElementById(pid+'Toolbar');

         barObject.style.width=width;

         barObject.style.height=height;

         

         

         //

         

         //layOut---------------------

         this.getWidth=function(){return width;}

         this.getHeight=function(){return height;}

         this.setMarginLeft=function(value){barObject.style.marginLeft=value;left=value;}

         this.getMarginLeft=function(){return left;}

         this.setMarginTop=function(value){barObject.style.marginTop=value;top=value;}

         this.getMarginTop=function(){return top;}

         // back ground,border

         this.setBackground=function(path){barObject.style.backgroundImage="url("+path+")";}

         

         // items:

         this.setItemsMarginTop=function(value)

         {

          itemTop=value;

         }

         this.setItemsMarginLeft=function(value)

         {

          itemLeft=value;

         }

         this.setItemsWidth=function(value)

         {

           itemWidth=value;

         }

         this.setItemsHeight=function(value)

         {

           itemHeight=value;

         }




         this.addNewItem=function(txt,Bg)

         {

           itemIndex++;

           

           var newItem=document.createElement('li');

            newItem.id=pid+'tbIt'+itemIndex;

            newItem.className='ToolbarItem'

            barObject.appendChild(newItem);

            //chnage the style:

            var iOb=document.getElementById(newItem.id);

                iOb.style.marginLeft=itemIndex*itemWidth;

                iOb.style.width=itemWidth;

                iOb.style.height=itemHeight;

            var btn=new ToolbarItem(newItem.id,itemWidth,itemHeight);

                btn.setAdvanceText(txt,itemHeight-15);

                btn.setMarginLeft(0);

                btn.setBackground(Bg);

                btn.setMarginTop(itemTop);

            

         }

}

the last step is how to create toolbar with multiple items , here we go the html code :

1-put the headers in the head part of html: 

<link rel="stylesheet" type="text/css" href="ToolBar.css"/>

<script language="javascript" type="text/javascript" src="ToolBar.js"></script>

2-add only one html line code that is where to put the toolbar

 

 <div id="pid"></div> 

2- call the js object

 as you will we consider two aspects when we invoke the toolbar object , first the toolbar itself second the items.

we create a toolbar in the 'pid' tag , the toolbar has 700 px width   and 64 px height , 6 items are in the toolbar , each has it's won caption  with dynamic name and layout:

var toolbar=new Toolbar('pid',700,64); 

   // create toolbar with name pid with width 700 and height 64

     toolbar.setMarginLeft(44);// set the

     toolbar.setItemsMarginTop(5);

     toolbar.setItemsWidth(54);

     toolbar.setItemsHeight(56);

     toolbar.setBackground('images/ToolbarBg.png');

     toolbar.addNewItem('连接站点','images/BarLinkOn.png');

     toolbar.addNewItem('全屏模式','images/BarFullScreen.png');

     toolbar.addNewItem('管理器','images/BarStartJump.png');

     toolbar.addNewItem('我的','images/BarEmap.png');

     toolbar.addNewItem('我','images/BarStopRecord.png');

     toolbar.addNewItem('我的','images/BarRefresh.png');

  

 

 thanks

Ammar Hawbani