应用面向对象的思想在javascript中同样适用，我曾使用vs2005编写了一个vs2003工具箱完全类似的导航工具条，我比较喜欢在winform中通过这种方式向用户提供应用程序功能的导航。所以我也想在web中也使用这种方式。网络上这样的例子很多，但是看过以后都感觉编码比较复杂，不容易扩展。所以我决定应用vs2005中开发的经验，用javascript来自己写一个。很多常用的东西自己花费点时间写是我比较喜欢的方法，我不大喜欢使用别人写的，有时候花费在研究别人东西上的时间基本都可以自己写出来了。并且自己写的修改容易，应用容易。。。估计这是一个不怎么好的思想。不过我比较喜欢接受别人的思路，而不喜欢一行行去阅读别人的代码。我研究别人的东西喜欢先看demo。

下面介绍下使用javascript写这么个工具条的思路：

1、工具条组成：分类（我命名为ToolBand） -- 用div标签实现，其中Caption以及Image用span以及img标签实现。工具按钮（我命名为ToolItem） -- 用div标签实现，其中Caption以及Image用span以及img标签实现。工具按钮的容器（我命名为ToolItemContainer） -- 用div标签实现。工具条（我命名为ToolBar） -- 用div实现。注：为什么上面的这些都使用div标签呢？各位做web的同志都明白，div+css的确在页面布局方面可以让代码更简洁。 2、在javascript中定义对象的方法，写发完全就是写函数，这对于某些刚开始接触的同志估计不是很适应。

view plaincopy to clipboardprint?
比如：     
 
var ToolBar=function(Width,Height,....)    
{    
    this.Bands = new Array();             //ToolBar中所有的Band  
 
    //其他属性    
    .....    
    .....     
}     
 
//ToolBar的AddBand方法，其实也就是把一个band增加到ToolBar的Bands数组中  
 
ToolBar.prototype.AddBand = function(band)

{    
    ....    
}    
 
/* 
 
 * 初始化完成所有的Band以及ToolItem以后，必须调用此函数来显示OutLookBar  
 * 参数：  
 * parentElem：表示显示OutLookBar的容器  
 */   
ToolBar.prototype.Show = function(parentElem)    
{    
    /* 
 
     * 根据this.Bands可以遍历所有的Band  
     * 然后根据this.Bands[i].ToolItems可以遍历Bands[i]下的所有ToolItem  
     * 根据所遍历到的Band以及ToolItem中保存的属性，比如Caption,Width,Height等等，  
     * 动态创建（比如document.createElement("div")）出实际显示的div，span等等元素，并显示。   
     */ 
    var toolbar = document.createElement("div");    
    toolbar.style.height = "100%";    
    toolbar.style.width = "100%";    
    toolbar.style.position="relative";  //只有使用relative以后，所有的band才可以正确排列    
    //Band数    
    this.ParentElement=parentElem;    
    this.ParentElement.appendChild(toolbar); 
 
    for(var i=0; i<this.Bands.length;i++)    
    {    
        var bandElem=this.Bands[i].BandElement();    
        .....    
        bandElem.onclick=_OutLookBarSwithBars;    
        toolbar.appendChild(bandElem);    
          
 
        //创建一个新的div来包含this.Bands[i]中的ToolItems元素
        var ToolItemContainer = document.createElement("div");   
        //设置ToolItemContainer 属性  
 
        for(var j=0; i<this.Bands[i].ToolItems.length;j++)    
        {  
 
            //将this.Bands[i].ToolItems.ToolItemElement添加到ToolItemContainer上  
 
            //如：ToolItemContainer.appendChild(this.Bands[i].ToolItems.ToolItemElement);  
 
            //....  
 
        }    
    } 
}  
 
这样就定义了一个ToolBar对象，其中包含了一个Bands数组，因为一个ToolBar中有多个Band  
 
 
function Band(name,caption,....)    
{        
    //Band中所有的ToolItem。        
    this.ToolItems = new Array();    
    this.name = name;        
    this.caption = " " + caption;        
    //其他属性，你自己根据需要来定义，比如Band上的背景图片，背景颜色等。     
    ....    
}    
   
//Band的方法，增加ToolItem，其实就是把item增加到this.ToolItems数组中    
Band.prototype.AddItem = function(item)    
{   
    .....    
}   
 
/* 
 
 * 返回当前Band  
 * 格式：  
 * ----------------------------   
 * | Image | caption          |  
 * ----------------------------  
 */ 
 
Band.prototype.BandElement=function()    
{  
 
    var divElem = document.createElement("div");    
    divElem.id="ToolBar_Band" + this.name;    
    divElem.name=this.name;  
 
    ....  
 
    divElem.style.color=this.color;  
 
    ....  
 
    divElem.style.position="absolute";  
 
    divElem.style.width="100%";  
 
    divElem.style.left=0;  
 
      
 
    //显示图片：如果没有提供图片路径，那么不显示图片  
 
    if(this.imageURL!=null && this.imageURL.length>0)  
 
    {  
 
        var imgElem=document.createElement("img");  
 
        imgElem.src = this.imageURL;    
        divElem.appendChild(imgElem);  
 
    }