如何定制页面提示信息(tooltips)如何定制页面提示信息(tooltips)
如何定制页面提示信息(tooltips)
一个页面上往往有很多链接、按钮,如果没有任何提示信息,会让人很迷茫。虽然IE也带提示功能,只要给title属性赋值,如下代码 自带的提示这样的提示很单调,鼠标移上去的时候显示出来,当鼠标在上面移动的时候,提示信息不会跟随,对比下面自定义的提示信息,差别就很明显,所以自定义的提示信息是很有必要的。
把鼠标放到链接上看提示信息如何定制提示信息,说起来很简单,先画出提示信息层,然后定位到目标对象。下面把实现分三部来说明:
1)绘制信息层
有...
如何定制页面提示信息(tooltips)
如何定制页面提示信息(tooltips)
一个页面上往往有很多链接、按钮,如果没有任何提示信息,会让人很迷茫。虽然IE也带提示功能,只要给title属性赋值,如下代码
自带的提示这样的提示很单调,鼠标移上去的时候显示出来,当鼠标在上面移动的时候,提示信息不会跟随,对比下面自定义的提示信息,差别就很明显,所以自定义的提示信息是很有必要的。
把鼠标放到链接上看提示信息如何定制提示信息,说起来很简单,先画出提示信息层,然后定位到目标对象。下面把实现分三部来说明:
1)绘制信息层
有两种方式,一种是静态,把层的html代码写在文档中,另外一种是动态,运用javascript脚本动态的创建层。静态方式简单,不灵活,动态的灵活,但比较困难,需要熟悉脚本和Dom结构,下面的代码是动态方式创建提示层 function createDivTooltip()
{
var divTips = document.createElement('div');//create div element
divTips.id='tooltip';
divTips.style.display='none'//invisible
document.body.appendChild(divTips);
}
2)定位信息层
function locate(e)
{ e=e||window.event;
var divTips = document.getElementById('tooltip');
var mousePos=getMousePosition(e);//get the coordinate of the mouse
divTips.style.top=mousePos.top-12+"px";
divTips.style.left=mousePos.left-8+"px";
}
关于如何定位鼠标在文档中的位置请参考《获取鼠标的坐标》
本文档为【如何定制页面提示信息(tooltips)】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑,
图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。