银床淅沥青梧老,屧粉秋蛩扫。采香行处蹙连钱,拾得翠翘何恨不能言。

回廊一寸相思地,落月成孤倚。背灯和月就花阴,已是十年踪迹十年心。

纳兰性德.虞美人

只是喜欢,上面的这阕词和标题无关。

早上到了公司,看了看JIRA,自个的东西很多没有弄完,继续吧,今天主要改造的是Dock库的FireFox兼容,Dock库提供以下几个功能:

1、创建一个虚拟窗口,窗口可以动态调整大小,操作窗口的时候用户不能操作页面上的其他元素。

2、生成模拟的右键菜单

3、生成模拟的下拉列表(两种样式)

今天主要解决的是虚拟窗口,当前的样式如下(IE最终)

嘿嘿,看样子不错哦,嘿嘿。

解决方案如下:

原始的DIV内容由客户系统提供,Dock不做过多的处理,除了:如果没有背景色则自动设置背景色为白色,设置边框距离为4px,设置Margin和Border为0,保证定位的准确性。

用户触发创建虚拟窗口的请求的时候

  • 创建一个顶层的窗口大小的DIV,作为现在网页上对象的遮挡,
   1: if(null==topCoverWindow) 
   2:  
   3: { 
   4:  
   5:     topCoverWindow=document.buildElement("div",{id:maskwindowid}, 
   6:  
   7:         {width:window.windowWidth(),height:window.windowHeight(),position:window.IE?"absolute":"fixed",backgroundColor:coverBgColor}); 
   8:  
   9:     parent2ContainControls.appendChild(topCoverWindow); 
  10:  
  11:     if(window.IE6) 
  12:  
  13:     { 
  14:  
  15:         /*创建一个IFrame在IE6下使用,其他版本不需要*/ 
  16:  
  17:         topCoverWindow.appendChild(document.createElement("<IFRAME src=\"\""+ 
  18:  
  19:             " style=\"position:absolute;background:red; visibility:inherit;top:0px;left:0px;"+ 
  20:  
  21:             "filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"+ 
  22:  
  23:             "z-index:-1;width:"+window.windowWidth()+";height:"+window.windowHeight()+"px;\""+ 
  24:  
  25:             " frameborder=\"0\">")); 
  26:  
  27:     } 
  28:  
  29:     if(window.IE && window.CoverWindow.window_CoverWindow_create_event==null) 
  30:  
  31:     { 
  32:  
  33:         window.CoverWindow.window_CoverWindow_create_event="so we all"; 
  34:  
  35:         window.attachEvent("onscroll",window.CoverWindow.__innerfunc_ie_scroll); 
  36:  
  37:         window.attachEvent("onresize",window.CoverWindow.__innerfunc_ie_scroll); 
  38:  
  39:     } 
  40:  
  41: } 
  42:  
  43: topCoverWindow.style.display="block"; 
  44:  
  45: topCoverWindow.style.zIndex=zindeidinit; 
  46:  
  47: if(window.IE) 
  48:  
  49: { 
  50:  
  51:     topCoverWindow.style.top=window.scrollTop(); 
  52:  
  53:     topCoverWindow.style.left=window.scrollLeft(); 
  54:  
  55:     topCoverWindow.style.filter="alpha(style=0,opacity="+coverOpacity+")"; 
  56:  
  57: } 
  58:  
  59: else 
  60:  
  61: { 
  62:  
  63:     topCoverWindow.style.top=0; 
  64:  
  65:     topCoverWindow.style.left=0; 
  66:  
  67:     topCoverWindow.style.opacity=parseFloat(coverOpacity)/100; 
  68:  
  69: } 
  70:  

注意

在FF下,设置顶层浮动直接设置position=fixed就可以了,而这个属性在IE下无效

在IE下设置顶层浮动需要侦听窗口的滚动和大小变化的消息。

在IE6下,层不能遮挡下拉列表,所以需要增加一个Iframe来进行遮挡

  • 然后创建一个DIV,用这个DIV装下客户系统提供的内容和窗口标题栏

    这里需要注意的是

    新建的DIV最好和客户系统提供的DIV归属于同一个Form中,否则如果这个客户DIV中存在Input则不能正确提交。

    标题栏的大小和客户DIV的大小必须一致,在FF下没有针对DIV的Onresize事件,所以只能使用Interval实现。

   1: (function() 
   2: { 
   3:     container.onresize=function() 
   4:     { 
   5:         if(container.___mask2resize4windowsie==null) 
   6:         { 
   7:             container.___mask2resize4windowsie=1; 
   8:         } 
   9:         else 
  10:         { 
  11:             titlewindow.style.width=div2dock.offsetWidth; 
  12:         } 
  13:     } 
  14: })(container,titlewindow,div2dock); 

问题出在了增加对象到Container(新创建的DIV)的时候,这里面titlewindow表示标题栏,div2dock是客户DIV

脚本如下

   1: titlewindow=document.buildElement("div",{id:titlewindowid}, 
   2:     {display:"block",fontSize:"12px",fontWeight:"bold",color:"white",backgroundColor:"#036", 
   3:     padding:2,margin:0,border:0}); 
   4: container=document.buildElement("div",{id:containwindowid},{position:"absolute",margin:0,border:0,padding:0}); 
   5: container.style.width=div2dock.offsetWidth; 
   6: container.appendChild(titlewindow); 
   7: container.appendChild(div2dock); 

这段代码在FireFox下面运行非常好,titlewindow使用默认的block方式显示,正确的按照大小进行缩放,问题来了,在IE下面出现了下图的故障

没有看清?我放大一些:

这里总会有两个像素的差异,TM的IE的盒模型,经过了一个下午不断的摸索,总算得到解决了,修正代码如下

   1: container=document.buildElement("div",{id:containwindowid},{position:"absolute",margin:0,border:0,padding:0,display:"none"},div2dock); 
   2:  
   3: parent2ContainControls.appendChild(container);             
   4:  
   5: container.style.display="block"; 
   6:  
   7: titlewindow.style.width=div2dock.offsetWidth; 
   8:  
   9: div2dock.insertAdjacentElement("beforeBegin",titlewindow);     

首先在创建之初,我们将div2Dock加入到了container中,使得container的大小以Div2Dock的为主,然后加入到容器中显示,让伟大的IE自动进行一次大小的调整,这个时候div2dovk的实际宽度就可以得到了,然后设置titlewindow的宽度,一句话,真TM的绕。