toolbar is one of the most important controls for design desktop ,web interface. today we try to explain how to create toolbar from ABC
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:
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
/*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
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
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
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
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 :
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
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:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
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:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
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');
![](https://images.cnblogs.com/cnblogs_com/ammar/demo.png)
thanks
Ammar Hawbani