前言:
前期也做了一些已有的类似控件调研,从可配置角度和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');
}
});