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

首发一个自己写的右下角弹出菜单的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" /><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');    }});