virtual iframe. IE + FireFox

<!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>
<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 = falseif(IFrameControl.IsIE){frame.documentBody.createControlRange().select()}else{var ev = document.createEvent("Events");ev.initEvent("click"truefalse);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 nullreturn 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>
 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章