当有新消息到达时,网页右下角探出一个小框框,提示消息,并指定链接过去。
实现:
div+css+ajax与js定时程序
div:
<div style="border:1px dashed #800000; padding:15px;display:none; position:fixed;width:160px;height:20px;background-color:#fdd2c5; font-size:19px;"
id="div_newMessage" name="div_newMessage"> </div>
js:
$(document).ready(function() { checkNewMessage(); locateMessageDiv(); //去获取最新的私信 setInterval("checkNewMessage()",60000); });
具体函数实现:
/** * 重定位DIV */ function locateMessageDiv(){ //判断是否为IE6 if($.browser.msie && parseInt($.browser.version) <= 6){ $("#div_newMessage").css("position", "absolute"); } $("#div_newMessage").css("bottom", 2); $("#div_newMessage").css("right", 10); } //此处进行AJAX请求 function checkNewMessage(){ var url="/portal/pri/message/checkNewMessage.action?meetingId=${_portal_meeting_.id}"; //alert(${_portal_meeting_.id}); ajaxRequest(url,getNewMessage,false); function getNewMessage(data){ var count=data.count; if(count>0){ $("#div_newMessage").html("<a href=\"${ctx}/portal/pri/message/list.action?meetingId=${_portal_meeting_.id}\">您有"+count+"条新的消息!</a>"); $("#div_newMessage").show(); // $("#div_newMessage").toggle(); } } }
涉及的功能:
1.JS定时程序:setInterval("checkNewMessage()",60000);
2.程序定位:既可以left top定位,也可以bottom right定位。左上优先原则。
3.IE6与其他大多数浏览器区别
如FF CHROME IE8下,当拖动滚动条的时候,position:fixed定位会一直在右下脚,但是position:absolute的时候,DIV会随着滚动条上去。
在IE6下 无论是fixed或者absolute都会跟着滚动条滚动。