JavaScript与displayTag标签的合作 -- 操作表头(续)

     上一篇里写了定位到目标表头与onmouseover的调用成功, 今天再接着把最后的一步写出来.
 
     这样的例子是见过不少,但自己没有动手写过, 现在回过头看看第三步涉及到"方框的显示与否"和"方框的定位", 方框的显示通过修改那个div里style的display属性就OK了,   于是就有了:
            function displayDiv(layerElment,isDisplay){

        //alert(isDisplay);
        layerElment.style.display = isDisplay
    }

      参数的layerElement就是要显示的那个方框, 也就是页面中自己空的div: <div id="Layer1" />,定义CSS时, 这里的采用与ID绑定的方式也就是"#Layer1".
      参数isDisplay用来控制方框的显示与否, 只有"block"和"none"两种.

    方框的定位我费了不少周折, 原因是以前没用过CSS里的position属性, 刚开始时想用"relative",但它又relative谁呢？肯定是鼠标的当前位置了,但怎么让那个方框知道它要向鼠标当前位置看齐呢? ...... 后来干脆用absolute吧, 刚开始没显示时, 方框的位置是窗口的左上角, 这样用了下面的方法:

    function locateDiv(layerElment,x,y){
        layerElment.style.left = x;
        layerElment.style.top = y-100;
    }
  layerElment还是要显示的方框, x和y分别对应屏幕上鼠标的当前位置, 通过style.left和style.top属性就给方框定了位. 


 这样全部功能就写完了. 代码不多, 不过当时写时, 前前后后地试写了不少弯路代码, 当然也不少感悟.

 1, 第一次在HTML中用层的技术.层这个概念在玩flash和photoshop时接触过点, 没有专门学过HTML,当然也没有用过了.现在有了这个层的体验后，一下子明白了那些很酷网站是怎么做出来的了.原来在HTML里用层+ javaScript可以做那么绚丽的图案.
 2, 第一次有点写JavaScript框架的感觉. JavaScript框架用过些,像jQuery,dojo,prototype,ext.用多了,回头想想他们的传参方式,觉得像下面这样的CSS定义是可以作为参数传过来.
        <style type="text/css">

        <!--
        #Layer1 {
       
        position:absolute;
        left:0;
        top:0;
        width:100px;
        height:80px;       
        z-index:1;
        background-color: yellow;   
        display:none   
        }
        -->

        </style>
    怎么来传CSS这样的参数呢? 传进来后JavaScript又该用怎么数据结构来封装它们呢? 这个问题先留下, 以后看别人JavaScript框架时多多注意.
        
    <div id="Layer1" />,用户不必在HTML中自己定义出.完全可以参照DWR里方法: 先判断下,如果有就直接用, 没有的话通过document.createElement来创建一个.

    var disabledZone = dwr.util.byId('disabledZone');
    if (!disabledZone) {
          disabledZone = document.createElement('div');
          disabledZone.setAttribute('id', 'disabledZone');
          ..............
    }

  

    有了上面的这些后, 我的"创做"就更像一个框架了.呵呵...

    刚才看DWRUnit的源码时,又发现一个JavaScript技巧:

        function useLoadingMessage (message) {

  var loadingMessage;
  if (message) loadingMessage = message;  // 可能判断用户在调用useLoadingMessage时是否传参.前两天我是通过 if( message != undifined)来判断的.
  else loadingMessage = "Loading";
.............

}

    又得到一条向成熟框架学习的心得: 多写, 多看人家是怎么实现的. 只有多写才能体会到问题的存在, 若自己体会不到问题,永远都会觉得那些框架也就那样,没什么了不起的;多看人家是怎么实现的,只有这样才能弥补自己的不足,使自己更快地提高.　

评论

2 楼 lifesinger 2008-10-30  

一般不建议直接在js中操作style
最好通过css来控制style
js要控制样式的话，改变class就可以了

这样保证了解耦，灵活性也更高

可以参考下这个ppt: http://lifesinger.org/blog/?p=16

1 楼 rmn190 2008-10-30  

不错,我想起来了, 以前看别人写的JavaScript框架时有这样的写法.当时还挺疑惑的, 现在过渡过来了.