*   <table>
 *       <tr>
 *           <td>
 *               //这里放置图片Div
 *           </td>
 *       </tr>
 *       <tr>
 *           <td>
 *               //这里放置标题Div
 *           </td>
 *       </tr>
 *   </table>
 */

ToolItem.prototype.ToolItemElement=function()
{
    var divElem=document.createElement("div");
    divElem.style.width="100%";
    divElem.style.background="white";
    divElem.style.color="black";
    divElem.style.align="center";

    //显示图片：并且设置相关控制属性

    var imgElem=document.createElement("img");
    imgElem.name=this.name;
    imgElem.caption=this.caption;
    imgElem.src = this.imageURL;
    ....

    imgElem.onclick=this.ToolItemClick;  //设置事件
   

    //显示标题：
    var spanCaption=document.createElement("span");

    /*
     * 为了支持IE和firefox，这里只能使用innerHTML
     * 其实innerText和innerHTML都不是W3C标准
     * 其实在firefox下textContent和IE的innerText等效
     */

    //spanCaption.innerText=this.caption;

    spanCaption.innerHTML=this.caption;
    var table=document.createElement("table");
    table.style.width="100%";
    table.insertRow(-1);  //这里必须带参数-1，否则在firefox中不能正常显示
    table.insertRow(-1);
    var CellImag=table.rows[0].insertCell(-1);
    CellImag.appendChild(imgElem);     //图片部分
    //注意，这样写是不能工作的：CellImag.style.align="center";
    CellImag.align="center";
    var CellCaption=table.rows[1].insertCell(-1);
    CellCaption.appendChild(spanCaption);  //标题部分
    CellCaption.align="center";
    divElem.appendChild(table);  //标题部分
    return divElem;

}

//其他不如响应事件：imgElem.onclick=this.ToolItemClick;  //设置事件等等，自己可以根据实际情况来写就可以了

这样就定义了一个ToolItem对象，总是要包含属性和方法的，上面讲了属性，下面来介绍方法的定义。比如Band的AddItem方法：

通过这样的思想，不但代码结构非常清晰，并且修改，扩展变的非常容易。好了，我给出的是思路，具体实现各位做吧。

实现这么个东西，从构思到编码我用了一天半，所以思想上是不难的，关键是思路。

下面给各位看看实现的效果图。 以上就是思路，以及效果图。