学步园

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

实现:

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