文/陈刚 www.chengang.com.cn (转载请注明)
这个效果的实现是以网站http://www.panic.com/coda/为模仿对象(选择Download可以看到气泡提示效果),然后重新用Rails中的prototype.js来实现。
HTML页面的代码:
<!----><span id="content_<%=o.id%>" style="display:none">
<!-- Download Popup style=opacity: 0; visibility: hidden;-->
<table style="top:500px; left:600px;" class="popup">
<tbody>
<tr>
<td class="corner" id="topleft"></td>
<td class="top"></td>
<td class="corner" id="topright"></td>
</tr>
<tr>
<td class="left"></td>
<td><table class="popup-contents">
<tbody>
<tr>
<td><%=o.content%></td>
</tr>
</tbody>
</table></td>
<td class="right"></td>
</tr>
<tr>
<td id="bottomleft" class="corner"></td>
<td class="bottom"><img src="/images/bubble-tail2.png" alt="popup tail" height="29" width="30"></td>
<td class="corner" id="bottomright"></td>
</tr>
</tbody>
</table>
<!-- end download popup -->
</span>
CSS的代码(涉及到的相关图片:
bubble.rar):
<!---->/* Bubble pop-up */
.popup {
position: absolute;
z-index: 50;
border-collapse: collapse;
/* width:500px;
visibility: hidden; */
}
.popup td.corner {height: 15px; width: 19px;}
.popup td#topleft { background-image: url(/images/bubble-1.png); }
.popup td.top { background-image: url(/images/bubble-2.png); }
.popup td#topright { background-image: url(/images/bubble-3.png); }
.popup td.left { background-image: url(/images/bubble-4.png); }
.popup td.right { background-image: url(/images/bubble-5.png); }
.popup td#bottomleft { background-image: url(/images/bubble-6.png); }
.popup td.bottom { background-image: url(/images/bubble-7.png); text-align: center;}
.popup td.bottom img { display: block; margin: 0 auto; }
.popup td#bottomright { background-image: url(/images/bubble-8.png); }
.popup table.popup-contents {
font-size: 12px;
line-height: 1.2em;
background-color: #fff;
color: #666;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
}
table.popup-contents th {
text-align: right;
text-transform: lowercase;
}
table.popup-contents td {
text-align: left;
}
然后给需要气泡提示的加上鼠标事件:
<!----> <span class="l1" onmouseover="Element.show('content_<%=o.id%>')" onmouseout="Element.hide('content_<%=o.id%>')"><%=article_link_to(o.title,o.id)%></span>
二、继续改进
气泡提示的外围HTML表格代码可以改由javascript来动态生成,这样可以缩小一些页面的总HTML大小。
HTML页面代码改为:
<!----><span id="content_<%=o.id%>" style="display:none"><%=o.content%></span>
其他想法:本来打算把文章内容(气泡显示的内容),直接传入javascript函数showPopup里。但由于其字符串较复杂,需要对一些特殊字符进行转义才可以当成字符串传入,而转义需要通写Rails方法来实现,大量的字符搜索替换恐怕会增加服务器的负担。所以这里还是用一个html元素暂存气泡内容。
然后给需要气泡提示的加上鼠标事件。
<!----> <span class="l1" onmouseover="showPopup('content_<%=o.id%>',event);" onmouseout="hidePopup()"><%=article_link_to(o.title,o.id)%></span>
CSS的代码不变。
写两个javascript函数:
<!---->function showPopup(element_id,event){
var div = createElement("div");
div.id = "popup";
//div.style.display="none";
var popup = $(element_id);
//取得鼠标的绝对坐标
var evt = event ? event : (window.event ? window.event : null);
var x = Event.pointerX(evt)+5;
var y = Event.pointerY(evt)+5;
div.innerHTML='\
<table style="top:' + y + 'px; left:' + x + 'px;" class="popup">\
<tbody>\
<tr>\
<td class="corner" id="topleft"></td>\
<td class="top"></td>\
<td class="corner" id="topright"></td>\
</tr>\
<tr>\
<td class="left"></td>\
<td><table class="popup-contents">\
<tbody>\
<tr>\
<td>' + popup.innerHTML + '</td>\
</tr>\
</tbody>\
</table></td>\
<td class="right"></td>\
</tr>\
<tr>\
<td id="bottomleft" class="corner"></td>\
<td class="bottom"><!--<img src="/images/bubble-tail2.png" alt="popup tail" height="29" width="30">--></td>\
<td class="corner" id="bottomright"></td>\
</tr>\
</tbody>\
</table>';
document.body.appendChild(div);
//Element.show("popup");
}
function hidePopup(){
Element.remove("popup");
}
function createElement(element) {
if (typeof document.createElementNS != 'undefined') {
return document.createElementNS('http://www.w3.org/1999/xhtml', element);
}
if (typeof document.createElement != 'undefined') {
return document.createElement(element);
}
return false;
}
在javascript中渐显Effect.Appear有一点问题,所以就没再用。
效果如下图所示:
分享到:
相关推荐
这是一款JavaScript 和ajax结合实现的输入验证 气泡提示插件,为了用户能够快速上手,压缩包内附有说明文档,本脚本是表单内提示信息框,当把焦点移到表单内的文本框时会弹出一个带指向的提示框,根据ajax交互式的...
这是一个用AJAX实现的拖动购物车的例子,同时实现了仿CSDN的加载用户信息来加载产品的信息,里面有一个GETINFO()是确定DIV的坐标,用它在列表边确定DIV的坐标再用气泡提示加载产品的信息.数据库就一张表,在代码里可以...
js实现一款挺有个性的气泡提示框,可应用于链接或者图片等对象上,鼠标放在链接上,就可显示出气泡提示,带缺口的人性化提示框,还带有阴影效果,兼容各大主流浏览器,在以前经常会见到这种气泡提示特效哦。
这是一个用AJAX实现的拖动购物车的例子,同时实现了仿CSDN的加载用户信息来加载产品的信息,里面有一个GETINFO()是确定DIV的坐标,用它在列表边确定DIV的坐标再用气泡提示加载产品的信息.数据库就一张表,在代码里可以...
这是一个用AJAX实现的拖动购物车的例子,同时实现了仿CSDN的加载用户信息来加载产品的信息,里面有一个GETINFO()是确定DIV的坐标,用它在列表边确定DIV的坐标再用气泡提示加载产品的信息.数据库就一张表,在代码里可以...
在java web认证系统开发中,客户要求有数据更新时要在页面弹出提示框,这样方便在旁边的工作人员可以及时的知道有新数据提交了,我们除了使用及时的推送技术外还可以使用ajax来实现这些功能。 代码实现的原理,在...
10.16 在列表框上添加气泡提示 10.17 在列表框上添加自定义按钮 10.18 为列表添加自定义的缩略图图标 10.19 创建列表日历的效果 10.20 动态创建listview列表项 10.21 动态加载和切换页面 10.22 在页面切换时显示加载...
7.jQuery鼠标移到下载地址滑出气泡提示效果的插件 8.又一款jquery实现链接Tip演示下载 9.常用jQuery弹出式链接提示效果Tooltip源码下载 10.相当牛的jQuery动感TipBox,鼠标移上去会动的提示框哦 11.简单实用...
主要文件:mopTip-2.2.js mopTip-2.2.css jquery-1.4.2.js jquery.pngFix-1.2.js(PNG去Bug,让PNG正常透明显示)moptip2与jQuery结合实现实现的气泡信息框,鼠标滑过时显示一个带渐变效果的提示框,一共有5种不同的...
Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。 Highcharts 支持的图表类型有直线...