插件描述：Toaster.js是一款Material Design风格jquery toast插件。Toaster.js提供5种主题，以及众多配置参数，用于显示toast类型的消息提示框。兼容性如下：
Toaster.js
Toaster.js是一款Material Design风格jquery toast插件。Toaster.js提供5种主题，以及众多配置参数，用于显示toast类型的消息提示框。
Toaster.js的特点有：
-
提供5种主题风格。
-
可以设置Toast自动消失。
-
可以显示关闭按钮。
-
可以显示关闭进度条。
-
支持从右向左显示。
使用方法
在页面中引入toast.style.css，jquery和toast.script.js文件。
1 <link href="css/toast.style.css" rel="stylesheet"> 2 <script type="text/javascript" src="js/jquery.min.js"></script> 3 <script type="text/javascript" src="js/toast.script.js"></script>
初始化插件
1 $.Toast()对象需要接收4个参数，分别为：标题、消息、类型和参数。 2 $.Toast(title, message, type, options); 3 title：Toast的标题。 4 message：Toast的消息体。 5 type：Toast的类型。 6 options：配置参数。
默认的配置参数如下：
1 { 2 // append to body 3 appendTo: "body", 4 // is stackable? 5 stack: false, 6 // 'toast-top-left' 7 // 'toast-top-right' 8 // 'toast-top-center' 9 // 'toast-bottom-left' 10 // 'toast-bottom-right' 11 // 'toast-bottom-center' 12 position_class: "toast-bottom-right", 13 // true = snackbar 14 fullscreen: false, 15 // width 16 width: 250, 17 // space between toasts 18 spacing: 20, 19 // in milliseconds 20 timeout: 4000, 21 // has close button 22 has_close_btn: true, 23 // has icon 24 has_icon: true, 25 // is sticky 26 sticky: false, 27 // border radius in pixels 28 border_radius: 6, 29 // has progress bar 30 has_progress: false, 31 // RTL support 32 rtl: false 33 }
1 { 2 // append to body 3 appendTo: "body", 4 // is stackable? 5 stack: false, 6 // 'toast-top-left' 7 // 'toast-top-right' 8 // 'toast-top-center' 9 // 'toast-bottom-left' 10 // 'toast-bottom-right' 11 // 'toast-bottom-center' 12 position_class: "toast-bottom-right", 13 // true = snackbar 14 fullscreen: false, 15 // width 16 width: 250, 17 // space between toasts 18 spacing: 20, 19 // in milliseconds 20 timeout: 4000, 21 // has close button 22 has_close_btn: true, 23 // has icon 24 has_icon: true, 25 // is sticky 26 sticky: false, 27 // border radius in pixels 28 border_radius: 6, 29 // has progress bar 30 has_progress: false, 31 // RTL support 32 rtl: false 33 }
源码：
(function(){ "use strict"; $.Toast = function(title, message, type, options){ var defaultOptions = { appendTo: "body", stack: false, position_class: "toast-bottom-right", fullscreen:false, width: 250, spacing:20, timeout: 4000, has_close_btn:true, has_icon:true, sticky:false, border_radius:6, has_progress:false, rtl:false } var $element = null; var $options = $.extend(true, {}, defaultOptions, options); var spacing = $options.spacing; var css = { "position":($options.appendTo == "body") ? "fixed" : "absolute", "min-width":$options.width, "display":"none", "border-radius":$options.border_radius, "z-index":99999 } $element = $('<div class="toast-item-wrapper ' + type + ' ' + $options.position_class + '"></div>'); $('<p class="toast-title">' + title + '</p>').appendTo($element); $('<p class="toast-message">' + message + '</p>').appendTo($element); if($options.fullscreen){ $element.addClass( "fullscreen" ); } if($options.rtl){ $element.addClass( "rtl" ); } if($options.has_close_btn){ $('<span class="toast-close">×</span>').appendTo($element); if( $options.rtl){ css["padding-left"] = 20; } else { css["padding-right"] = 20; } } if($options.has_icon){ $('<i class="toast-icon toast-icon-' + type + '"></i>').appendTo($element); if( $options.rtl){ css["padding-right"] = 50; } else { css["padding-left"] = 50; } } if($options.has_progress && $options.timeout > 0){ $('<div class="toast-progress"></div>').appendTo($element); } if($options.sticky){ $options.spacing = 0; spacing = 0; switch($options.position_class){ case "toast-top-left" : { css["top"] = 0; css["left"] = 0; break; } case "toast-top-right" : { css["top"] = 0; css["left"] = 0; break; } case "toast-top-center" : { css["top"] = 0; css["left"] = css["right"] = 0; css["width"] = "100%"; break; } case "toast-bottom-left" : { css["bottom"] = 0; css["left"] = 0; break; } case "toast-bottom-right" : { css["bottom"] = 0; css["right"] = 0; break; } case "toast-bottom-center" : { css["bottom"] = 0; css["left"] = css["right"] = 0; css["width"] = "100%"; break; } default : { break; } } } if($options.stack){ if($options.position_class.indexOf("toast-top") !== -1 ){ $($options.appendTo).find('.toast-item-wrapper').each(function(){ css["top"] = parseInt($(this).css("top")) + this.offsetHeight + spacing; }); } else if($options.position_class.indexOf("toast-bottom") !== -1 ){ $($options.appendTo).find('.toast-item-wrapper').each(function(){ css["bottom"] = parseInt($(this).css("bottom")) + this.offsetHeight + spacing; }); } } $element.css(css); $element.appendTo($options.appendTo); if($element.fadeIn) { $element.fadeIn(); }else { $alert.css({display: 'block', opacity: 1}); } function removeToast(){ $.Toast.remove( $element ); } if($options.timeout > 0){ setTimeout(removeToast, $options.timeout); if($options.has_progress){ $(".toast-progress", $element).animate({"width":"100%"}, $options.timeout); } } $(".toast-close", $element).click(removeToast) return $element; } $.Toast.remove = function( $element ){ "use strict"; if($element.fadeOut) { $element.fadeOut(function(){ return $element.remove(); }); } else{ $element.remove(); } } })();
实例：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Material Design风格jquery toast插件</title> 8 <link href="css/toast.style.css" rel="stylesheet"> 9 </head> 10 <body style="background-color:#252525"> 11 12 <a href="#" style="color:#fff" onclick="addToast()">点击显示Toast</a> 13 14 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 15 <script src="js/toast.script.js"></script> 16 <script> 17 function addToast(){ 18 $.Toast("test", "this is a test message.", "success", { 19 stack: true, 20 has_icon:true, 21 has_close_btn:true, 22 fullscreen:false, 23 timeout:3000, 24 sticky:false, 25 has_progress:true, 26 rtl:false, 27 }); 28 } 29 </script> 30 </body> 31 </html>