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  =   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 >