在页面上显示数据表格的时候,对于有一些栏目的field(例如状态),可能总是需要加一些提示信息,加以补充或解释,例如错误提示信息。这个时候可以使用HTML结合Javascript创建包含文本的浮动提示栏。有点类似图片image的alt属性。
(1)首先,创建一个浮动提示框DIV:
<div id="errInfoDiv">
</div>
(2)为该DIV加入CSS
#errInfoDiv{
display:none;
position:absolute;
background-color:#FFFFE6;border: 1px solid #888888;
padding:3px
}
(3)创建显示/隐藏浮动框的JavaScript方法:
//显示浮动框
function showInform(objId, content){
var event =event||window.event;
var divObj = document.getElementById(objId)
var x=event.clientX;
var y=event.clientY;
divObj.style.display='block';
divObj.style.float = "float";
divObj.style.left = x + "px";
divObj.style.top = y + "px";
divObj.innerHTML = content;
}
//隐藏浮动框
function hiddenInform(objId){
var event =event||window.event;
var informDiv = document.getElementById(objId);
var x=event.clientX;
var y=event.clientY;
var divx1 = informDiv.offsetLeft;
var divy1 = informDiv.offsetTop;
var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
document.getElementById(objId).style.display='none';
}
}
(4)在需要使用的元素上使用onmouseover,onmouseout把显示/隐藏浮动框的功能加上,例如,为表格的某个td上,加上浮动框,参考代码如下:
<td onmouseover='showInform("errInfoDiv", "某错误提示:XXXXX")' onmouseout='hiddenInform("errInfoDiv")'> ERROR </td>
分享到:
相关推荐
web前端开发-浮动广告
WEB前端技术-文字与浮动
页面中的浮动窗口.doc页面中的浮动窗口.doc页面中的浮动窗口.doc页面中的浮动窗口.doc页面中的浮动窗口.doc
1 用法: ...在和</iframe> 之间放置的文本,在浏览器不支持iframe时将会显示。 iframe 元素会创建包含另外一个文档的内联...规定是否在iframe中显示滚动条。 src URL 规定在iframe中显示的文档的 URL。 width Pixels /
c#实现浮动工具栏!~~浮动工具栏!~~浮动工具栏!~~浮动工具栏
client和scroll应用; 元素可视区client;Client和scrool应用;Client和scrool应用;Client和scrool应用; 元素滚动scroll;Client和scrool应用;Client和scrool应用;Client和scrool应用;浮动广告设计;如何在页面上方显示...
可以任意的浮动,上下左右的停靠,很简单的实现了浮动工具栏的功能
web页面浮动客服QQ代码,浮动QQ, 浮动客服
浮动工具栏 源程序 C# 制作浮动工具栏 能够随意在窗口中移动和停靠
在asp中添加浮动QQ栏,代码正确!在asp中添加浮动QQ栏,代码正确!
行业分类-设备装置-半潜式浮动风机基础和浮动风机.zip
python 12、web前端html,css 4-1_浮动布局、定位布局、其他属性_Day04_AM.mp4
python 12、web前端html,css 4-2_浮动布局、定位布局、其他属性_Day04_PM.mp4
前端项目-float-label-css,对于任何不支持的浏览器,仅使用防弹CSS实现浮动标签模式并自动回退。
漂亮的js浮动提示框
在工具栏中制作浮动按钮 在工具栏中制作浮动按钮
移动web页面的浮动点插件,浮动点中的功能按钮的执行方法、图片可配置化,同时按钮个数为1-3个。
具体的实例,实现窗体中工具栏的浮动,设计页面新颖,运行程序拖动工具栏,随意放到窗体的左右下面
jquery简单的鼠标悬停按钮显示浮动提示框效果代码