jquery toast插件

本文转载自查看原文 2018-06-02 16:32 10958 javascript

插件描述：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">&times;</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>

原文地址：http://www.jq22.com/jquery-info15566

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 jquery toast JQuery信息提示框插件toast的使用用jquery实现toast的原理 jquery.toast Vue中封装toast插件 jquery表单提交获取数据(带toast dialog) Flutter Toast消息提示框插件 jQuery toast 淡入淡出提示自己动手写Vue插件Toast 【jQuery】jquery插件封装