首发一个自己写的右下角弹出菜单的jQuery插件

前言：

 

前期也做了一些已有的类似控件调研，从可配置角度和api饱和度设计等角度简单地写了这个插件，有问题欢迎讨论

 

提供一个右下角的弹出提示窗体。

 

正文：

 

功能介绍：

               1。支持常规的宽度高度设置（说明这里的设计和一般的不是很一样）

               2。支持初始显示和关闭的动画效果可配置

               3。可设置auto进行自动关闭

               4。兼容各大浏览器包括ie6下的select遮盖问题，但是需要引入插件jquery.bgiframe.js

               5。支持外部资源的应用

               6。支持关闭按钮的显示与否(这个需求也是部分调用增加的)

               7。关于内容支持html语义化的标签写入

 

/*
@右下角弹出提示窗体插件--jquery-popMessage.js
@author zhangyaochun
@baidu fe
@info 和一般的弹出窗体设计思路一样,只是可以不用考虑关闭后的remove
      只是特点在于右下角弹出同时支持开始和结束的animated的效果可配置
	  缺点是没有对外的api支持例如控制显示和隐藏
@relay jquery lib
@http://zhangyaochun.iteye.com/ 	  
*/
(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');
    }
});

评论

1 楼 nianshi 2011-11-02  

能有个显示就好了。。。