常用功能-tip相关知识总结

lgx2351

浏览: 175922 次
性别:
来自: 福州

最近访客更多访客>>

心杀心

woodding2008

jiben0421

liangfuguo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript&ajax&dhtml

DHMTL prototype CSS 浏览器工作

在应用开中很常用的功能是tip，比如鼠标放在某个需要说明的元素时，tip出元素的一些属性，或者是在一个主表的grid里当鼠标移到某一行，tip出这一行的所关联的子表的grid，使得用户一目了然。tip的功能这么常用，我们可以用一些已有的js库来实现，比如 wz_tooltip.js，它可以实现较为强大的tip功能。关于wz_tooltip.js的知识就不说了，参考它的官方网站所有的api都说得很详细了。
当然，如果我想自己写一个较为简单的tip也是可以的。自己实现的话，对于css的知识，鼠标事件等知识会理解得更加深刻，比如对鼠标事件的定位等。下面，我们来说说怎么实现自己下定义的tip。

function Tooltip() {  
    this.tooltip = document.createElement("div");
    this.tooltip.style.position = "absolute";     
    this.tooltip.style.visibility = "hidden";    
    this.tooltip.className = "tooltipShadow";     

    this.content = document.createElement("div");
    this.content.style.position = "relative";     
    this.content.className = "tooltipContent";    

    this.tooltip.appendChild(this.content);       
}

Tooltip.prototype.show = function(text, x, y) {
    this.content.innerHTML = text;             
    this.tooltip.style.left = x + "px";        
    this.tooltip.style.top = y + "px";
    this.tooltip.style.visibility = "visible";

    if (this.tooltip.parentNode != document.body)
        document.body.appendChild(this.tooltip);
};

Tooltip.prototype.hide = function() {
    this.tooltip.style.visibility = "hidden";
};

以上代码分析如下：
1、 Tooltip()构造函数的主要作用是里去create两个div，设置完两个div的className和position后，把第二个存放内容的 div append到第一个阴影div里。注意的是阴影div的定位设置为绝对定位（absolute），而内容div的定位设置为相对定位（relative），内容div是相对于阴影div来定位的，只要设置好了阴影div的位置，则内容div的位置也可以定下来了。关于位置的不同的值的知识见后面的相关知识点。
2、Tooltip()构造函数做了挺多工作，而之前一般我的代码里构造函数一般只进行类实例变量的赋值，很少有做较多的事情。学习这种写法。
3、 show()方法在div已创建的基础上，主要是设置div的位置，内容，并append到document.body上去。注意条件语句：this.tooltip.parentNode != document.body，通过这句话来得到是否把tooltip这个div创建到body上去了，如果没才去append。
4、其中的className的css代码如下：

   .tooltipShadow {
      background: url(shadow.png);  
    }
 
   .tooltipContent {
        left: -4px; top: -4px;       
        background-color: #ff0;       
        border: solid black 1px;     
        padding: 5px;                 
        font: bold 10pt sans-serif;   
   }

上面已经实现了tip的显示与隐藏，接下来把鼠标事件考虑进去：

Tooltip.X_OFFSET = 25;  
Tooltip.Y_OFFSET = 15;  
Tooltip.DELAY = 500;

Tooltip.prototype.schedule = function(target, e) {
    var text = target.getAttribute("tooltip");
    if (!text) return;

    var x = e.clientX + Geometry.getHorizontalScroll( );
    var y = e.clientY + Geometry.getVerticalScroll( );
    x += Tooltip.X_OFFSET;
    y += Tooltip.Y_OFFSET;

    var self = this;
    var timer = window.setTimeout(function( ) { self.show(text, x, y); },Tooltip.DELAY);

    if (target.addEventListener) target.addEventListener("mouseout", mouseout,false);
    else if (target.attachEvent) target.attachEvent("onmouseout", mouseout);
    else target.onmouseout = mouseout;

    function mouseout( ) {
        self.hide( );               
        window.clearTimeout(timer);
        if (target.removeEventListener) target.removeEventListener("mouseout", mouseout, false);
        else if (target.detachEvent) target.detachEvent("onmouseout",mouseout);
        else target.onmouseout = null;
    }
}

以上代码分析：
1、通过getAttribute()方法来得到标签的属性值。
2、当值为空是return，不执行tip事件
3、Geometry.getHorizontalScroll()方法见Geometry类，其它博客有专门的说明。
4、setTimeout()来过段时间执行tip，但当onmouseout时，把这个timout要clear掉。
5、注意代码attachEvent()、detachEvent()的浏览器兼容性的写法。

其它，顺便总结一个定位的几种值的含义：
1、 static：
静态定位。它是默认值 ，根据文档内容的正常流动来定位元素。
使用静态定位的元素不是DHMTL元素 ，不能用top、left等属性，也就是说，如果你要定位一个元素，必须设置为除static外的值，一般我们用absolute来定位，这也是程序中所有涉及到需要位置的元素时都要设置position值的原因。
2、absolute：
绝对定位。设置元素的相对于它的包含元素的位置。
绝对定位的元素独立于其它元素来定位，即绝对定位对于其它元素无关，它也不属于静态定位的元素流。
绝对定位的元素可以相对于文档的<body>标记来定位。
如果它嵌套在另一个绝对定位的元素中（这另一个元素也要绝对定位），则相对于它个元素来定位。
它是DHMTL里最常用 的定位方式。
3、fixed：
4、relative：
当元素的position为relativ时，它首先根据常规文档流来布局元素，然后相对常规流中的位置进行调整。
在常规文档流中分配给它的空间仍然分配给它，它两边的元素也不会向它靠近来填充它的空间，但它们也不会从元素的新位置被挤走。

1
顶

0
踩

分享到：

js常用功能-drag功能总结 | js学习笔记4-事件和事件处理

2009-09-18 08:48
浏览 1279
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论