6,871
社区成员
发帖
与我相关
我的任务
分享<table id="table1" border="1"></table>
<script type="text/javascript" language="javascript">
// var table = document.getElementById("table1");
// var tr = document.createElement("tr");
// var td = document.createElement("td");
// table.tBodies.item(0).appendChild(tr);
// tr.appendChild(td);
// td.innerHTML = "sdfds";
// td.appendChild(document.createElement("input"));
// var tr1 = table.insertRow();
// tr1.appendChild(document.createElement("td"));
// tr1.cells[0].innerHTML="dddsss";
var tbuilder = new TableBuilder("table1");
tbuilder.RegisterTemplateCells("asdfsd", document.createElement("input"), "ddddd", document.createElement("select"));
tbuilder.NewRow();
tbuilder.NewRow();
tbuilder.NewRow();
tbuilder.NewRow();
function TableBuilder(tableid)
{
this._DataArray = null;
this._VirtualRoot = null;
this.IsIE = (document.all!=undefined && document.all!=null),
this.Table = document.getElementById(tableid);
if (this.Table == null) {throw tableid+" is not found!";}
if (this.Table.tBodies.length <= 0) {var tbody=document.createElement("tbody");this.Table.appendChild(tbody);this._VirtualRoot=tbody;} else {this._VirtualRoot=this.Table.tBodies.item(0);}
if (!this.IsIE) {this._VirtualRoot.insertRow = function(){var tr=document.createElement("tr");this.appendChild(tr);return tr;}}
this.RegisterTemplateCells = function(argumentsList) {this._DataArray=arguments;}
this.AppendTemplateCell = function(obj) {if(this._DataArray==null){this._DataArray=new Array();}this._DataArray[this._DataArray.length]=obj;}
this.NewRow = function(index) {if(this._DataArray==null){throw "template undefined!";}var tr=(!this.IsIE||index==undefined||index==null)?this._VirtualRoot.insertRow():this._VirtualRoot.insertRow(index);if(tr==null){throw "create row failed!";}var l=this._DataArray.length;for(var i=0;i<l;i++){var td;if(this.IsIE){td=tr.insertCell()}else{td=document.createElement("td");tr.appendChild(td);};switch(typeof(this._DataArray[i])){case"object":td.appendChild(this._DataArray[i].cloneNode(true));break;case"string":td.innerHTML=this._DataArray[i];break;default:break;}} }
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>=IFrame= Test IE only</title>
<style type="text/css">
*{margin:0px;padding:0px;}
</style>
<script type="text/javascript">
var IFrameControl = {
IsIE:(document.all!=undefined && document.all!=null),
frameInstance:null,
CreateInstance:function(sidebar, splitbar){var _frame=new IFrame(sidebar, splitbar);IFrameControl._registerInstance(_frame);return _frame;},
getInstance:function(argumentlist){return (argumentlist==null||argumentlist.length==0) ? this.frameInstance : argumentlist[0];},
_registerInstance:function(frame){this.frameInstance=frame},
RegisterDragEvent:function(startDragEvent, endDragEvent)
{
if(window.attachEvent)
{
document.attachEvent("onmousemove", startDragEvent);
document.attachEvent("onmouseup", endDragEvent);
}
else if (window.addEventListener)
{
window.addEventListener('mousemove', startDragEvent, false);
window.addEventListener('mouseup', endDragEvent, false);
}
},
setDragStart:function()
{
var frame = IFrameControl.getInstance();
var alphaDiv = document.createElement("DIV");
var maskDiv = document.createElement("DIV");
alphaDiv.id = frame.Data.alphaSplit;
alphaDiv.style.top = frame.spliterBar.offsetTop + "px";
alphaDiv.style.left = frame.spliterBar.offsetLeft + "px";
alphaDiv.style.width = frame.spliterBar.clientWidth + "px";
alphaDiv.style.height = frame.spliterBar.clientHeight + "px";
alphaDiv.style.zIndex = frame.spliterBar.style.zIndex + 20;
alphaDiv.style.position = "absolute";
alphaDiv.style.cursor = "e-resize";
alphaDiv.style.background = "#eeeeee";
alphaDiv.style.borderLeft = "1px dashed #000000";
alphaDiv.style.borderRight = "1px dashed #000000";
frame.documentBody.appendChild(alphaDiv);
if (IFrameControl.IsIE)
{
maskDiv.id = frame.Data.maskFrame;
maskDiv.style.top = 0 + "px";
maskDiv.style.left = 0 + "px";
maskDiv.style.width = (frame.rootElement.clientWidth > frame.rootElement.scrollWidth) ? frame.rootElement.clientWidth : frame.rootElement.scrollWidth + "px";
maskDiv.style.height = (frame.rootElement.clientHeight > frame.rootElement.scrollHeight) ? frame.rootElement.clientHeight : frame.rootElement.scrollHeight + "px";
maskDiv.style.zIndex = frame.spliterBar.style.zIndex + 10;
maskDiv.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
maskDiv.style.position = "absolute";
maskDiv.style.background = "#ffffff";
frame.documentBody.appendChild(maskDiv);
}
frame.Data.isDrag = true;
frame.Data.xBegin = window.event ? event.x : arguments[0].pageX;
var _funMouseDragEnd = function(){var _iframe = IFrameControl.getInstance();if(_iframe.Data.isDrag) IFrameControl.applyDrag(); IFrameControl.setDragStop();};
var _funMouseDragStart = function()
{
var _iframe = IFrameControl.getInstance();
if(!_iframe.Data.isDrag) {IFrameControl.applyDrag(); return;}
if ((IFrameControl.IsIE && window.event && window.event.button==1) || (!IFrameControl.IsIE && typeof(arguments[0])=="object" && arguments[0].button>=0))
{
var now_x = window.event ? event.x : arguments[0].pageX; var alpdiv = document.getElementById(_iframe.Data.alphaSplit);
if (alpdiv) {alpdiv.style.left = parseInt(alpdiv.style.left) + now_x - _iframe.Data.xBegin + "px";_iframe.Data.xBegin = now_x;}
}
}
IFrameControl.RegisterDragEvent(_funMouseDragStart, _funMouseDragEnd);
},
setDragStop:function() {var frame = IFrameControl.getInstance(); frame.Data.isDrag = false; document.onmousemove = null; document.onmouseup = null;},
applyDrag:function()
{
var frame = IFrameControl.getInstance();
var mask = document.getElementById(frame.Data.maskFrame);
var alpdiv = document.getElementById(frame.Data.alphaSplit);
if (mask) frame.documentBody.removeChild(mask);
if (alpdiv) {var x_Left = parseInt(alpdiv.style.left) - parseInt(alpdiv.style.width) + 1; frame.sideElement.style.width = (x_Left > 0 ? x_Left : 0) + "px"; frame.documentBody.removeChild(alpdiv);}
var _funNull = IFrameControl.IsIE ? null : function(){};
IFrameControl.RegisterDragEvent(_funNull,_funNull);
},
reSize:function() {var frame = IFrameControl.getInstance(); frame.sideElement.style.height = frame.rootElement.clientHeight - 5 + "px";}
};
function IFrame(sidebar, splitbar)
{
this.Data = {isDrag:false,xBegin:0,alphaSplit:sidebar+"alphaDiv",maskFrame:"shield"};
this.rootElement = document.documentElement||document.body;
this.documentBody = document.body||document.documentElement;
this.sideElement = document.getElementById(sidebar);
this.spliterBar = document.getElementById(splitbar);
this.spliterBar.style.width = 5 + "px";
this.spliterBar.style.zIndex = 100;
this.spliterBar.style.background = "#666666";
if(window.attachEvent)
{
this.spliterBar.attachEvent("onmousemove", function(){IFrameControl.getInstance().spliterBar.style.cursor='e-resize'});
this.spliterBar.attachEvent("onmouseout", function(){IFrameControl.getInstance().spliterBar.style.cursor='normal'});
this.spliterBar.attachEvent("onmousedown", IFrameControl.setDragStart);
window.attachEvent("onload", IFrameControl.reSize);
window.attachEvent("onresize", IFrameControl.reSize);
}
else if(window.addEventListener)
{
this.spliterBar.addEventListener('mousemove', function(){IFrameControl.getInstance().spliterBar.style.cursor='e-resize'}, false);
this.spliterBar.addEventListener('mouseout', function(){IFrameControl.getInstance().spliterBar.style.cursor='normal'}, false);
this.spliterBar.addEventListener('mousedown', IFrameControl.setDragStart, false);
window.addEventListener('load', IFrameControl.reSize, false);
window.addEventListener('resize', IFrameControl.reSize, false);
}
}
</script>
</head>
<body>
<table border="0" style="width:100%;">
<tr>
<td style="width:1px;"><div id="leftsidearea" style="width:200px; overflow:auto;"><div style="height:2000px;">asdf</div></div></td>
<td id="spliter"></td>
<td>FireFox下有Bug. 拖动后部分UI被选择,第二次拖动时鼠标变形</td>
</tr>
</table>
</body>
<script type="text/javascript">
IFrameControl.CreateInstance("leftsidearea", "spliter");
</script>
</html>