zoukankan      html  css  js  c++  java
  • easyui的浮动panel不跟随所在页面一起滚动的问题

      项目开发中遇到一个很奇怪的现象就是:随便点开一个下拉控件,包括combo,combobox,databox,combogird等等,都会出现点开的panel面板正常,如果页面有滚动条,一用鼠标滚轮滚动页面,panel的位置就一直固定在原来的位置,不会随着它所属的控件一起移动。由于我们项目是自己修改过easyui的,所以我怀疑的改出来的问题,我就换上原版的easyui就没这个问题了,证明怀疑是对的。

      还发现同样一个页面,有个页面有这样的问题,有个页面没有这样的问题,这两个页面唯一的区别就是有问题的页面用easyui-layout渲染了的。一开始我以为是layout控件修改错了,但经过层层排查后发现问题不出在这里。

      我单独建了个页面把用到的easyui控件js源码一个一个单独加载,不一下子加载全部,这样经过排除法终于确定错误是在jquery.combo.js上的问题了。然后再仔细阅读源码确定问题在showPanel这个方法上。对比改动发现原来是这么回事:

      

    //没有改过的easyui伪代码
    function showPanel(){
        //上面代码省略
        function getLeft(){...}//获得所属控件的left相对位置
        function getTop(){...}//获得所属控件的top相对位置
    
        //亮点来了
        (function(){
            if(panel.is(':visible')){//如果panel在显示
                panel.panel('move',{
                    left:getLeft(),    
                    top:getTop()    
                });//计算所属控件的位置,然后移动到那个位置
                setTimeout(arguments.callee,200);//0.2秒后再执行本方法
            }  
        })();          
    } 

    原来的代码只要panel打开就会不停的计算位置然后移动过去,而我们改动会的代码把这个方法只执行了一遍,没有进行循环。所以造成了这个问题。

    那么为什么又和layout控件扯上关系了呢,经过排查发现,经过layout控件渲染后里面的div的样式属性overflow会变成auto,也就是说里面的div会有滚动条,而不用layout渲染的话滚动条会出现在最父级iframe级别上。而panel的定位位置是根据iframe级的相对位置而定的。所以前一种情况下,滚动是里面的div,而panel定位在全局上位置没变,所以会显现出问题,而后一种情况,滚动的时候,相当于是全局一起滚动,所以就算panel位置不变也没关系,所以没有出现这样的问题。

      我想之前把代码改成不循环计算可能是出于性能考虑,而且也没遇到用layout渲染的情况,就这样改了。但是我认为这个性能花费并不大,因为只是打开的时候才计算,只要鼠标点其他地方panel都不关闭的,我就把代码改成要循环计算的了。解决问题。

  • 相关阅读:
    像素图生成向量图的算法
    黑白图着色(转换成彩色图片)的算法
    JavaScript的DOM编程--12--innerHTML属性
    JavaScript的DOM编程--11--插入节点
    JavaScript的DOM编程--10--删除节点
    JavaScript的DOM编程--09--节点的替换
    js中return、return true、return false的区别
    JavaScript的DOM编程--08--复习
    JavaScript的DOM编程--07--节点的属性
    JavaScript的DOM编程--06--两个实验
  • 原文地址:https://www.cnblogs.com/onlywujun/p/3818096.html
Copyright © 2011-2022 走看看