|
//显示标题
var spanElem=document.createElement("span");
//spanElem.style.fontSize="14px";
/*
* 为了支持IE和firefox，这里只能使用innerHTML
* 其实innerText和innerHTML都不是W3C标准
* 其实在firefox下textContent和IE的innerText等效
*/
//spanElem.innerText=this.caption;
spanElem.innerHTML=this.caption;
divElem.appendChild(spanElem);
return(divElem);
}
这里定义了一个Band，其中定义了一个ToolItems数组，因为一个Band中包含多个ToolItem
function ToolItem(name,caption,....)
{
this.name = name;
this.caption = caption;
//下面定义其他属性
....
}
/*
* 此函数返回每个ToolItem所对应的Dom元素，由几个部分组成：
* 1、图片部分；
* 2、标题部分；
* 样式如：
* *********
* * 图片 *
* *********
* **************
* *= 标题 =*
* **************
*通过下面的Table来实现精确控制
* <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方法：
比如：
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数
共4页: 上一页 [1] 2 [3] [4] 下一页
| 
