在应用开中很常用的功能是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时,它首先根据常规文档流来布局元素,然后相对常规流中的位置进行调整。
在常规文档流中分配给它的空间仍然分配给它,它两边的元素也不会向它靠近来填充它的空间,但它们也不会从元素的新位置被挤走。