消息到达提醒功能

当有新消息到达时,网页右下角探出一个小框框,提示消息,并指定链接过去。

实现:

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都会跟着滚动条滚动。

你可能感兴趣的:(消息到达提醒功能)