我们在做应用开发时很经常地要生成浮动层，里面显示一些我们需要显示的内容。这里写一个生成浮动层的接口。如下：
Js代码
function minimizeExec(floatLyrComm){
var execObjCnt = $(floatLyrComm+"Cnt");
var execObjDiv = $(floatLyrComm);
var eventElement = event.srcElement || event.target;
if(execObjCnt.style.display==''){
execObjCnt.style.display = 'none';
eventElement.innerText = "□";
execObjDiv.style.height = '20px';
}else if(execObjCnt.style.display=='none'){
execObjCnt.style.display = '';
eventElement.innerText = "－";
}
}
/*************************************************************************************/
/*
/* 文档追加类（目前用于生成浮动层）
/*
/*************************************************************************************/
function DocWriteGen(){
}
DocWriteGen.prototype={
/**
* purpose:生成浮动层
* author:liugx
* remark:
*/
genFloatLyr:function(floatLyrId,floatLyrPro){
var floatdiv = document.createElement("div");
floatdiv.id = floatLyrId;
floatdiv.className = "float-lyr";
floatdiv.style.position = "absolute";
//floatdiv.style.left = floatLyrPro.left?floatLyrPro.left:"0px";
floatdiv.style.left = floatLyrPro.left||"0px";
floatdiv.style.top = floatLyrPro.top||"0px";
floatdiv.style.width = floatLyrPro.width||"200px";
floatdiv.style.height = floatLyrPro.height||"100px";
if(floatLyrPro.opacity){
floatdiv.style.opacity = floatLyrPro.opacity;
floatdiv.style.filter = 'alpha(opacity=' + parseInt(parseFloat(floatLyrPro.opacity)*100) + ')';
}
floatdiv.style.borderColor = floatLyrPro.borderColor||"#6495ED";
floatdiv.style.display = 'none';
trColor = floatLyrPro.trColor||"#6495ED";
tdTitle = floatLyrPro.tdTitle||"";
floatdiv.innerHTML = '<table width="100%" height="100%" boder="0" cellspacing="0" cellpadding="0">' +
'<tr style="background-color:' + trColor + '">'+
'<td height="20" width="96%" style="color:#FFFFFF" onmouseover="this.style.cursor=\'hand\';"'+
'onmousedown="Element.move(document.getElementById(\''+floatdiv.id+'\'),event);">'+tdTitle+'</td>' +
'<td width="2%" style="color:#FFFFFF;cursor:hand" onclick="minimizeExec(\''+floatdiv.id+'\')">－</td>' +
'<td width="2%" style="color:#FFFFFF;cursor:hand" onclick="document.getElementById(\''+floatdiv.id+'\').style.display=\'none\'">×</td>' +
'</tr>' +
'<tr>' +
'<td colspan="3" valign="top"><div id="'+floatdiv.id+'Cnt"></div></td>' +
'</tr>' +
'</table>';
return floatdiv;
}
}
var docWriteGen = new DocWriteGen();
以上代码要注意的地方如下：
1. 以上我们先createElement一个DIV元素，然后设置它的一些如id、className、left、top、height、width、opacity、borderColor等属性。再设置它的innerHTML。最后返回这个DIV元素。其实，我们也可以不createElement一个DIV元素再设置它的属性的方法，而是直接用构造html的方法来生成div，一些需要传入的参数只把写在相应的地方用参数来替换就行了。就像设置它的innerHTML时用的方法一样。其实，不管是用createElement一个DIV元素的方法，还是构造HTML的方法，两种方法的实现效果是一样的。当然，如果createElement较好实现并且需要对这个生成的元素进行额外的处理的话，用这种方法比较好，且在它生成元素后，常与appendChild一起使用，把生成的元素加载到另一个元素中，如DIV元素中进行显示的控制。而用构造HTML方法的话，更多的是用于显示，并不需要对生成的元素进行额外的处理。
2. 以上代码中：
//floatdiv.style.left=floatLyrPro.left?floatLyrPro.left:"0px";
floatdiv.style.left = floatLyrPro.left||"0px";
的写法是一样的，我们常用第二种方式的写法，这在当传入的参数为对象时，用于判断对象的属性是否存在的处理很常用。
3. 注意什么时候是传floatdiv，什么时候是传floatdiv.id如：
document.getElementById(\''+floatdiv.id+'\')
这里显然不能传floatdiv，因为floatdiv是一个obj，如果外面再嵌一个document.getElementById就有问题了，这时候应该传的是floatdiv.id，这点容易写错。
4. 对于Element.move()方法，就是拖运DIV，读者可以自行参考这方面的资料，有空再做个整理。
5. 我们可以两种方式来使用接口，一种把生成对象的outerHTML赋值给一个需要替换显示的元素，如下：
Js代码
var floatdiv = documentWriteGen.genFloatLyr('floatLyrId',{left:200,top:200,height:200,width:400,tdTitle:"浮动层标题:"});
floatdiv.style.display = '';
$("formWrapper").innerHTML = floatdiv.outerHTML;
另一种是用在文档的末尾用document.write()，为什么要在文档的末尾用，这里大家要明白document.write()写在任何位置，则从任何位置的文档中开始加载。
6. 在minimizeExec()方法中要注意的如下：
1.在最小化中除了要把内容div设置为不显示外，同时还必须要把整个div的高度设置为只有标题的TR的高度。如果只设置内容div设置为不显示,整个div并不会缩起来，而如果只设置整个div的高度，因为内容div有内容，它并不会根据你设置的高度来显示。
2.我们在点击最小或最大时，这里触发一个事件，利用event.srcElement || event.target得到事件元素，并设置它的innerText为需要显示的图标。这个知识点需要明白。
7. 在做dhmtl里，我们常常需要用到的方法有如下innerHTML、innerText、outerHTML、outerText，写了如下程序加以理解：
Html代码
<html>
<head>
<script type="text/javascript">
function test(){
var eleobj = document.createElement('o');
var textobj = document.createTextNode('eleobjtext')
eleobj.appendChild(textobj);
eleobj.setAttribute('name','eleobjname');
document.getElementById('testdiv').appendChild(eleobj);
}
</script>
</head>
<body>
<div id="testdiv">
<table><tr><td>table content</td></tr></table>
</div>
<input type="button" value="outerHTML" onclick="alert(document.getElementById('testdiv').outerHTML)"/>
<input type="button" value="outerText" onclick="alert(document.getElementById('testdiv').outerText)"/>
<input type="button" value="innerHTML" onclick="alert(document.getElementById('testdiv').innerHTML)"/>
<input type="button" value="innerText" onclick="alert(document.getElementById('testdiv').innerText)"/>
<input type="button" value="test" onclick="test();"/>
</body>
</html>
8.注意这句话：floatdiv.style.position = "absolute";把浮动层的定位设置成absolute，如果没有这句，所有设置的left和top的值都是没有效果的。关于定位的相关知识可参见另一个帖子“关于DHMTL的定位”。