最近项目需要用到toast的信息提示效果,找了一个jquery写的不错的插件,toastmessage
http://akquinet.github.com/jquery-toastmessage-plugin/
本人根据项目需求做了部分修改,对浏览器兼容也做了hack
js
(function($)
{
var settings = {
inEffect: {opacity: 'show'}, // in effect
inEffectDuration: 600, // in effect duration in miliseconds
stayTime: 3000, // time in miliseconds before the item has to disappear
text: '', // content of the item. Might be a string or a jQuery object. Be aware that any jQuery object which is acting as a message will be deleted when the toast is fading away.
sticky: false, // should the toast item sticky or not?
type: 'notice', // notice, warning, error, success
position: 'top-center', // top-left, top-center, top-right, middle-left, middle-center, middle-right ... Position of the toast container holding different toast. Position can be set only once at the very first call, changing the position after the first call does nothing
closeText: '', // text which will be shown as close button, set to '' when you want to introduce an image via css
close: null // callback function when the toastmessage is closed
};
var methods = {
init : function(options)
{
if (options) {
$.extend( settings, options );
}
},
showToast : function(options)
{
var localSettings = {};
$.extend(localSettings, settings, options);
// declare variables
var toastWrapAll, toastItemOuter, toastItemInner, toastItemClose, toastItemImage;
toastWrapAll = (!$('.toast-container').length) ? $('<div></div>').addClass('toast-container').addClass('toast-position-' + localSettings.position).appendTo('body') : $('.toast-container');
toastItemOuter = $('<div></div>').addClass('toast-item-wrapper');
toastItemInner = $('<div></div>').hide().addClass('toast-item toast-type-' + localSettings.type).appendTo(toastWrapAll).html($('<p>').append (localSettings.text)).animate(localSettings.inEffect, localSettings.inEffectDuration).wrap(toastItemOuter);
//toastItemClose = $('<div></div>').addClass('toast-item-close').prependTo(toastItemInner).html(localSettings.closeText).click(function() { $().toastmessage('removeToast',toastItemInner, localSettings) });
toastItemImage = $('<div></div>').addClass('toast-item-image').addClass('toast-item-image-' + localSettings.type).prependTo(toastItemInner);
//居中设置
var iconWidth = $(".toast-item-image").width();
var textWidth = $(".toast-item p").width();
$(".toast-container").width(iconWidth+textWidth+40);
$(".toast-position-top-center").css("margin-left",-$(".toast-container").width()/2);
// if(navigator.userAgent.match(/MSIE 6/i))
// {
// toastWrapAll.css({top: document.documentElement.scrollTop});
// }
if(!localSettings.sticky)
{
setTimeout(function()
{
$().toastmessage('removeToast', toastItemInner, localSettings);
},
localSettings.stayTime);
}
return toastItemInner;
},
showNoticeToast : function (message)
{
var options = {text : message, type : 'notice'};
$(".toast-item-wrapper").remove();
return $().toastmessage('showToast', options);
},
showSuccessToast : function (message)
{
var options = {text : message, type : 'success',stayTime : 2000};
$(".toast-item-wrapper").remove();
return $().toastmessage('showToast', options);
},
showErrorToast : function (message)
{
var options = {text : message, type : 'error'};
$(".toast-item-wrapper").remove();
return $().toastmessage('showToast', options);
},
showWarningToast : function (message)
{
var options = {text : message, type : 'warning'};
$(".toast-item-wrapper").remove();
return $().toastmessage('showToast', options);
},
showLoadingToast : function (message)
{
var options = {inEffectDuration : 0, text : message, type : 'loading', sticky : true};
$(".toast-item-wrapper").remove();
return $().toastmessage('showToast', options);
},
removeToast: function(obj, options)
{
obj.animate({opacity: '0'}, 600, function()
{
obj.parent().animate({height: '0px'}, 300, function()
{
obj.parent().remove();
});
});
// callback
if (options && options.close !== null)
{
options.close();
}
}
};
$.fn.toastmessage = function( method ) {
// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.toastmessage' );
}
};
})(jQuery);
css:
.toast-container {
z-index: 9999;
}
* html .toast-container {
position: absolute;
}
.toast-item {
height: 46px;
background: #DFF4FF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
opacity: 0.8;
/*
color: #eee;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 6px;
padding-right: 6px;
font-family: lucida Grande;
font-size: 14px;
*/
border: 2px solid white;
display: block;
position: relative;
margin: 0 0 12px 0;
}
.toast-item p {
margin-right: 15px;
text-align: left;
margin-top: 14px\0;
*margin-top: 14px;
float: right;
display: inline;
}
.toast-item-close {
height: 0px;
line-height: 0px;
/*
background: url(img/close.gif);
width: 22px;
height: 22px;
position: absolute;
top: 7px;
right: 7px;
*/
}
.toast-item-image {
width: 24px;
height: 24px;
margin-left: 15px;
margin-top: 10px;
margin-right: 4px;
float: left;
display: inline;
}
.toast-item-image-notice {
background: url(img/formaticon.png);
}
.toast-item-image-success {
background: url(img/formaticon.png) -2px -28px;
}
.toast-item-image-warning {
background: url(img/formaticon.png) -2px -53px;
}
.toast-item-image-error {
background: url(img/formaticon.png) -2px -3px;
}
.toast-item-image-loading {
background: url(img/loading.gif);
}
/**
* toast types
*
* pattern: toast-type-[value]
* where 'value' is the real value of the plugin option 'type'
*
*/
.toast-type-notice {
color: black;
}
.toast-type-success {
color: black;
}
.toast-type-warning {
color: black;
/*
border-color: #FCBD57;
*/
}
.toast-type-error {
color: black;
/*
border-color: #B32B2B;
*/
}
.toast-type-loading {
color: black;
}
/**
* positions
*
* pattern: toast-position-[value]
* where 'value' is the real value of the plugin option 'position'
*
*/
.toast-position-top-left {
position: fixed;
left: 20px;
top: 20px;
}
.toast-position-top-center {
position: fixed;
top: 220px;
left: 50%;
}
.toast-position-top-right {
position: fixed;
top: 20px;
right: 20px;
}
.toast-position-middle-left {
position: fixed;
left: 20px;
top: 50%;
margin-top: -40px;
}
.toast-position-middle-center {
position: absolute;
left: 50%;
margin-left: -140px;
margin-top: -40px;
top: 50%;
}
.toast-position-middle-right {
position: fixed;
right: 20px;
margin-left: -140px;
margin-top: -40px;
top: 50%;
}
分享到:
相关推荐
jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)
jquery插件jquery-ui-1.8.18.custom.min.js
jquery插件--表格分页。
Jquery插件-分享插件
jQuery插件--星级打分,供大家一起共同分享学习。
jquery插件jquery-ui-1.8.2.custom.min.js
Jquery插件-手机端选择省市
jquery插件- slick轮播图插件
Jquery插件-弹窗
360°产品展示jQuery插件--3dEye.js
Jquery插件-垂直进度条。。
一个JQuery插件 - Javascript可拖动的模式窗口
JQUERY插件,ajax不需要刷新,即可实现搜索功能
jquery插件大全--打包下载 jquery插件大全--打包下载 jquery插件大全--打包下载 jquery插件大全--打包下载
jquery插件-表单验证 根据focus blur
jquery插件-图片轮显,类似苹果浏览器的效果
jQuery版本迁移辅助插件,如果您使用的低版本jQuery改为高版本后出现错误,可以试试这个插件。用来检测和恢复在jQuery1.9版本中已删除或已过时的API。jquery-migrate-1.2.1.js,jquery-migrate-1.2.1.min.js
帮助你生成组织结构图的jQuery插件 - jOrgChart 大家可能看到过使用javascript类库JavaScript InfoVis Toolkit实现的特效组织结构图,这里我们使用jQuery插件-jOrgchart也同样可以实现一个组织结构图。 主要特性: ...
jQuery插件 - 图片放大镜,支持IE6
jQuery插件easing 效果,以前在flash制作编程中经常设计到的一种效果。很旋,包含了数十种效果