jQuery插件之-右下角弹出提示窗体popMessage

优点：右下角弹出同时可配置对应的开始和结束的animated的效果
缺点：没有对外的api支持例如控制显示和隐藏

<script type="text/javascript" src="jquery-popMessage.js"></script>
<script type="text/javascript">
    $(function(){
      	$.fn.popMessage({
		   content : '<a href="#" class="ime-btn"></a>',
		   height:282,
		   auto:false,
		   width:280,
		   html:true,
		   openAnimType:{'type':'slideDown','speed':'slow'},
		   closeAnimType:{'type':'fadeOut','speed':'slow'}
		});
	});	
	$('#test').click(function(){
	   $('.Pop-Message-container').hide(200);
	});//利用jquery手动添加隐藏显示
</script>

附件1：css默认样式源码

@charset "utf-8";
.Pop-Message-container{background:url(../images/wke-dialog-panel_title.png) repeat;position:absolute;right:0px;border:1px solid #ccc;box-shadow:3px 3px 3px rgba(0, 0, 0, 0.2);border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
.Pop-Message-title{color:#7297a9;height:26px;line-height:22px;position:relative;padding:10px;padding-bottom:0;border-bottom:1px solid #ccc;}
.Pop-Message-close,.Pop-Message-close-hover{background:url(../images/wke-dialog-panel_tools.gif) no-repeat scroll -16px 0;width:16px;height:16px;position:absolute;top:10px;right:10px;filter:alpha(opacity=60);opacity:0.6;-moz-opacity:0.6;cursor:pointer;}
.Pop-Message-close-hover{opacity:1;filter:alpha(opacity=100);-moz-opacity:1;}
.Pop-Message-con{background:url(../images/con_bg.png) no-repeat #fff;}
.ime-btn,.ime-btn-hover{background:url(../images/btn.png) no-repeat;height:29px;width:91px;display:inline-block;position:absolute;left:100px;top:273px;}
.ime-btn:hover{background:url(../images/btn-hover.png) no-repeat;}
.Pop-Message-body{padding:10px;}
.Pop-Message-footer{height:25px;border-top:1px solid #ccc;padding:10px 0 0 10px;color:#7297a9;}
.noNotice{margin-left:5px;}

附件2：jquery插件源码

(function(){
    /*设计定位为作为一般的插件*/
    $.extend($.fn,{
	   popMessage : function(options){
	         //合并配置
             options = $.extend({},$.fn.popMessage.defaults,options);
			 //render container
			 var container = $('<div></div>').addClass('Pop-Message-container').css({'width':options.width,'display':'none','height':'auto','zIndex':options.zIndex});
	         //这边为了防止ie6下select的遮盖问题
			 //思路是判断是否加载了jquery.bgiframe.js
			 if($.fn.bgiframe){
			    container.bgIframe();
			 }
			 //title
			 var title = $('<div></div>').addClass('Pop-Message-title').appendTo(container);
			 title.text(options.title);

			 //conWrap
			 //更改策略可以设置高度 但是container还是auto的设置的是conWrap的高度
			 var conWrap = $('<div></div>').addClass('Pop-Message-con').appendTo(container).css('height',options.height != 'auto' ? options.height : 'auto');			 
			 //messageBody
			 var messageBody = $('<div></div>').addClass('Pop-Message-body').appendTo(conWrap);			 
			 //增加一个尾部
			 var footer = $('<div></div>').addClass('Pop-Message-footer').appendTo(container);
			 //footer的具体
			 var footerCon = $('<input type="checkbox" class="" /><span class="noNotice">下次不在提醒</span>').appendTo(footer);			 			 
			 //判断是否支持远程调用
			 if(options.loadUrl != ''){
			    messageBody.load(options.loadUrl);
			 }else{
			    if(options.html){
				   messageBody.html(options.content);
				}else{
				   messageBody.text(options.content);
				}
			 }			 
			 //关闭按钮
			 if(options.closeBtn){
			    var closeBtn = $('<span></span').addClass('Pop-Message-close').appendTo(title).hover(function(){
				    $(this).addClass('Pop-Message-close-hover');
				},function(){
				    $(this).removeClass('Pop-Message-close-hover');
				}).click(function(){
				     //其实就是调用关闭的api
				     closeMessage();
				});
			 }			 
			 //计算右下角
			 var interval = setInterval(function(){
			       var h = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) +document.documentElement.clientHeight -container.height() -12;
				   if(h < document.body.offsetHeight){
				       container.css('top',h+ 'px');
				   }else{
				       container.css('top',document.body.offsetHeight+ 'px');
				   }
			 },20);			 
			 //最后在appendTo
			 container.appendTo($(document.body));			 
			 //初始显示
			 if(options.openAnimType){
			    switch(options.openAnimType.type){
					case 'slideUp': container.slideUp(options.openAnimType.speed);
					case 'slideDown': container.slideDown(options.openAnimType.speed);
					case 'show': container.show(options.openAnimType.speed);
					case 'fadeIn': container.fadeIn(options.openAnimType.speed);
					};
			 }
			 /*container.slideDown('slow');*/			 
			 //关闭
			 function closeMessage(){
			    if(options.closeAnimType){
			      switch(options.closeAnimType.type){
					case 'slideDown': container.slideDown(options.closeAnimType.speed);
					case 'slideUp': container.slideUp(options.closeAnimType.speed);
					case 'hide': container.hide(options.closeAnimType.speed);
					case 'fadeOut': container.fadeOut(options.closeAnimType.speed);
					};
			     }
				/* container.slideUp('slow');*/
			 }			 			 			 
			 //是否自动关闭
			 if(options.auto){
			     setTimeout(function(){
				    closeMessage();
                    clearInterval(interval);
                    //container.remove();					
				 },options.time);
			 }
		}
	});
	/*默认设置*/
   $.fn.popMessage.defaults ={
         title : '提醒',
		 content : '您有新的提醒',
		 closeBtn: true,   //关闭按钮是否默认显示
         width : 250,
		 height: 'auto',   //规则目前为了适应高度最后的效果是设置内容区域的高度
		 zIndex: 10000,
		 loadUrl:'',   //远程调用
		 html: false,  //支持html语义化的内容，默认关了
		 openAnimType:{'type':'slideUp','speed':'slow'},  //支持开始的动画配置
		 closeAnimType:{'type':'hide','speed':'slow'},   //支持结束的动画配置
         auto:true,   //自动关闭
		 time:4000    //定时
   }; 
})(jQuery)
/*考虑到scroll*/
$(window).scroll(function(){
    var topHeight = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) +document.documentElement.clientHeight -$('Pop-Message-container').height() -12;
	if(topHeight < document.body.offsetHeight){
	   $('Pop-Message-container').css('top',topHeight+ 'px');
    }else{
	   $('Pop-Message-container').css('top',document.body.offsetHeight+ 'px');
    }
});