<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>=IFrame= Test IE only</title>
<script type="text/javascript">
var IFrameControl = {
_registerInstance:function(frame){this.frameInstance=frame},
_funMouseDragEnd:function(){var _iframe = IFrameControl.getInstance();if(_iframe.Data.isDrag) IFrameControl.applyDrag(); IFrameControl.setDragStop();},
_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;}}},
IsIE:(document.all!=undefined && document.all!=null),
frameInstance:null,
getInstance:function(argumentlist){return (argumentlist==null||argumentlist.length==0) ? this.frameInstance : argumentlist[0];},
CreateInstance:function(sidebar, splitbar){var _frame=new IFrame(sidebar, splitbar);IFrameControl._registerInstance(_frame);return _frame;},
RegisterDragEvent:function(startDragHandler, endDragHandler){if(window.attachEvent) {document.attachEvent("onmousemove", startDragHandler);document.attachEvent("onmouseup", endDragHandler);} else if (window.addEventListener) {window.addEventListener('mousemove', startDragHandler, false);window.addEventListener('mouseup', endDragHandler, false);}},
UnRegisterDragEvent:function(startDragHandler, endDragHandler){if (window.detachEvent) {document.detachEvent("onmousemove", startDragHandler);document.detachEvent("onmouseup", endDragHandler);} else if (window.removeEventListener) {window.removeEventListener('mousemove', startDragHandler, false);window.removeEventListener('mouseup', endDragHandler, false);}},
reSize:function() {var frame = IFrameControl.getInstance(); frame.sideElement.style.height = frame.rootElement.clientHeight - 5 + "px";},
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);} IFrameControl.UnRegisterDragEvent(IFrameControl._funMouseDragStart, IFrameControl._funMouseDragEnd);},
setDragStop:function(){var frame = IFrameControl.getInstance(); frame.Data.isDrag = false; if(IFrameControl.IsIE){frame.documentBody.createControlRange().select()}else{var ev = document.createEvent("Events");ev.initEvent("click", true, false);frame.spliterBar.dispatchEvent(ev);/*frame.spliterBar.fireEvent("onclick");frame.spliterBar.setSelectionRange(0,0);*/}},
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 = Math.max(frame.spliterWidth, 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);
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.position = "absolute";
maskDiv.style.background = "#ffffff";
if (IFrameControl.IsIE)
maskDiv.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
else
maskDiv.style.opacity = 0.3;
frame.documentBody.appendChild(maskDiv);
frame.Data.isDrag = true;
frame.Data.xBegin = window.event ? event.x : arguments[0].pageX;
IFrameControl.RegisterDragEvent(IFrameControl._funMouseDragStart, IFrameControl._funMouseDragEnd);
}
};
function IFrame(sidebar, splitbar)
{
this.Data = {isDrag:false,xBegin:0,alphaSplit:sidebar+"alphaDiv",maskFrame:"shield"};
this.spliterWidth = 5;
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 = this.spliterWidth + "px";
this.spliterBar.style.zIndex = 100;
this.spliterBar.style.background = "#666666";
this.documentBody.style.margin = 0 + "px";
this.documentBody.style.padding = 0 + "px";
this.rootElement.style.overflow = "hidden";
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='default'}); 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='default'}, 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>
<pre>FireFox下有Bug. 拖動後部分UI被選擇,第二次拖動時鼠標變形</pre>
<table id="table1" border="1"></table>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
IFrameControl.CreateInstance("leftsidearea", "spliter");
</script>
<script type="text/javascript" language="javascript">
var DOM={Element:{},Input:{},Search:{}};
DOM.IsIE = (navigator.appName=="Microsoft Internet Explorer");
DOM.GetEvent = DOM.IsIE? function(base){return window.event;}:function(base){return (base.length>0&&base[0].constructor==Event)?base[0]:null;};
DOM.GetEventElement = function(base){var ev=DOM.GetEvent(base);if(ev==null)return null; return DOM.IsIE?ev.srcElement:ev.target;};
DOM.RegisterObjectEvent = function(obj,param){if(DOM.IsIE){obj.attachEvent("on"+param[0],param[1]);}else{obj.addEventListener(param[0], param[1], false);}};
DOM.Input.TextBox = {
NewTextBox:function(nameObj,hashAttr,value){var o=document.createElement("input");return o;},
Validate2DateTime:function(){var element=DOM.GetEventElement(arguments);if(element==null)return;alert(element.value);},
Validate2Number:function(fractionDigits){alert('Validate2Number');}
};
DOM.Search.MatchFirstWith = function(parent,matchHandler,param){var l=parent.childNodes.length;if(l>100)return null;for(var i=0;i<l;i++){if(matchHandler(param)){return parent.childNodes[i];}}}
DOM.Search.FindNodeByTagName = function(el, tag) {var l=el.childNodes.length; if(l>100){return null;}for(var i=0;i<l;i++){if(el.childNodes[i].tagName!=undefined && el.childNodes[i].tagName!=null && el.childNodes[i].tagName.toLowerCase()==tag.toLowerCase()){return el.childNodes[i];}}};
DOM.Search.FindNodeById = function(el, id) {var l=el.childNodes.length; if(l>100){return null;}for(var i=0;i<l;i++){var txtId=el.childNodes[i].getAttribute("id");if(txtId!=null&&el.childNodes[i].getAttribute("id").toLowerCase()==id.toLowerCase()){return el.childNodes[i];}}};
function TableBuilder(tableid)
{
this._DataArray = null;
this._VirtualRoot = null;
this.IsIE = (navigator.appName=="Microsoft Internet Explorer");
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(index){var tr=document.createElement("tr");if(index==undefined||index==null){this.appendChild(tr);}else{this.insertBefore(tr,this.childNodes[index]);}return tr;}}
this.RegisterTemplateCells = function(argumentsList) {this._DataArray=arguments;}
this.ModifierTemplateCell = function(index, handler, param) {if(this._DataArray==null||this._DataArray.length<=index)return;handler(this._DataArray[index],param);}
this.AppendTemplateCell = function(obj) {if(this._DataArray==null){this._DataArray=new Array();}this._DataArray[this._DataArray.length++]=obj;}
this.Locate = function(i,j) {if(arguments.length>=2){return this._VirtualRoot.childNodes[i].childNodes[j];}else if(arguments.length>=1){return this._VirtualRoot.childNodes[i]}else{this._VirtualRoot}}
this.CreateRow = function(index) {if(this._DataArray==null){throw "template undefined!";}var tr=(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;}}return tr;}
this.RemoveRow = function(index) {if(this.Table.rows.length<=index)return false;if(this.IsIE){this._VirtualRoot.deleteRow(index)}else{this._VirtualRoot.removeChild(this._VirtualRoot.childNodes[index])}}
}
var tbuilder = new TableBuilder("table1");
tbuilder.RegisterTemplateCells("asdfsd", DOM.Input.TextBox.NewTextBox(), "ddddd", document.createElement("select"));
tbuilder.ModifierTemplateCell(1, DOM.RegisterObjectEvent, new Array("blur",DOM.Input.TextBox.Validate2DateTime));
tbuilder.CreateRow().cells[0].innerHTML="123";
tbuilder.CreateRow().cells[0].innerHTML="456";
tbuilder.CreateRow().cells[0].innerHTML="789";
tbuilder.CreateRow(1).cells[0].innerHTML="erwqqrwwer";
tbuilder.CreateRow(1);
tbuilder.CreateRow(1);
tbuilder.RemoveRow(1);
tbuilder.Locate(1).cells[1].innerHTML="<input type="button" οnclick="alert('hehe');" />";
tbuilder.Locate(1,2).innerHTML="ba ga 2.";
tbuilder.Locate(2,1).setAttribute("id", "input1");
DOM.Search.FindNodeByTagName(tbuilder.Locate(2,1), "input").style.display="none";
DOM.Search.FindNodeById(tbuilder.Locate(2,1), "input1");
//if (DOM.IsIE)
//{
// document.getElementById("ssddff").attachEvent("onblur", DOM.Input.TextBox.Validate2DateTime);
//}
//else
//{
// document.getElementById("ssddff").addEventListener("blur", DOM.Input.TextBox.Validate2DateTime, false);
//}
</script>
</html>