上一篇里写了定位到目标表头与onmouseover的调用成功, 今天再接着把最后的一步写出来.
这样的例子是见过不少,但自己没有动手写过, 现在回过头看看第三步涉及到"方框的显示与否"和"方框的定位", 方框的显示通过修改那个div里style的display属性就OK了, 于是就有了:
function displayDiv(layerElment,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">
</style>
怎么来传CSS这样的参数呢? 传进来后JavaScript又该用怎么数据结构来封装它们呢? 这个问题先留下, 以后看别人JavaScript框架时多多注意.
<div id="Layer1" />,用户不必在HTML中自己定义出.完全可以参照DWR里方法: 先判断下,如果有就直接用, 没有的话通过document.createElement来创建一个.
有了上面的这些后, 我的"创做"就更像一个框架了.呵呵...
刚才看DWRUnit的源码时,又发现一个JavaScript技巧:
function useLoadingMessage (message) {
又得到一条向成熟框架学习的心得: 多写, 多看人家是怎么实现的. 只有多写才能体会到问题的存在, 若自己体会不到问题,永远都会觉得那些框架也就那样,没什么了不起的;多看人家是怎么实现的,只有这样才能弥补自己的不足,使自己更快地提高.