Messenger弹窗组件的使用

时间 2019-11-06

标签 messenger 组件使用繁體版

原文原文链接

Messenger跟它的官方文档介绍的同样,是一个很是酷的弹框组件,Alerts for 21st century，名不虚传.javascript

## 依赖

jQuery
Backbone.js
能够和Bootstrap完美融合,但Bootstrap并非必须的

## JS文件和基本的CSS文件

/build/js/messenger.min.js  
/build/css/messenger.css
/build/css/messenger-theme-future.css

## 有四种主题可选,弹出框有6个位置可供选择

Future 对应 messenger-theme-future.css
Block 对应 messenger-theme-block.css
Air 对应 messenger-theme-air.css
Ice 对应 messenger-theme-ice.css

选择哪一种主题,就须要加入该主题的css文件.弹出框的位置和demo能够参看官方文档.css

## 用做提示框

使用messenger来作各类的弹框是很是合适的,他的ui很是的美观,并且使用很是的简单.
首先,设定弹出框的默认形式,弹出位置和主题,以Block为主题，再顶部弹出,代码以下:java

$._messengerDefaults = {
  extraClasses: 'messenger-fixed messenger-theme-block messenger-on-top'
}

如果使用django的话,将该行代码放进base模板中,则每一个页面的弹框样式就指定了.此外,默认的样式能够更改,在使用时从新指定后,默认的样式就会被覆盖.git

如下一行代码就能实现一个美观的弹出窗口.github

$.globalMessenger().post("Your request has succeded!");

而且,messenger支持ajax和事件,功能很是强大,几乎能够知足网页中全部状况下弹框需求.ajax

## 用于表单验证

由于messenger支持ajax,与jQuery的$.ajax方法结合的很是好,因此我便试着将于用于Django项目的表单验证.django

话很少说,直接上代码.服务器

$('.btn-register').on('click',function(e){
            e.preventDefault();
            if ($('#id_terms').is(':checked')){  // 未赞成服务条款不给提交
                var pass_check = true;
                // 验证用户名是否重复
                var username = $('#id_username').val();
                $.globalMessenger()['do']({
                    errorMessage: "服务器错误,请稍后重试!",
                    hideAfter: 2,
                    showCloseButton: true
                },{
                    url:"/username_check/",
                    data: {'username': username},
                    type:'post',
                    async: false,
                    success: function(res){
                        var res = JSON.parse(res);  // 将字符串转化为字典
                        if (res['error'] == 'error'){
                            pass_check = false;
                            return {type:'error', message:"用户名为空或者该用户名已经存在"};
                        }
                        return false;
                    }
                });
                // 验证邮箱格式
                var email = $('#id_email').val();
                if(pass_check){
                    $.globalMessenger()['do']({
                        errorMessage: "服务器错误,请稍后重试!",
                        action: function(){
                            var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
                            if(!pattern.test(email)){
                                pass_check = false;
                                return $.globalMessenger().post({
                                        message:"邮箱为空或者格式错误",
                                        hideAfter: 2,
                                        type: 'error',
                                        showCloseButton: true
                                    });
                            }
                        }
                    });
                }

                // 验证邮箱是否已经被注册
                if(pass_check){
                    $.globalMessenger()['do']({
                        errorMessage: "服务器错误,请稍后重试!",
                        hideAfter: 2,
                        showCloseButton: true
                    },{
                        url:"/email_check/",
                        data: {'email': email},
                        type:'post',
                        async: false,
                        success: function(res){
                            var res = JSON.parse(res);  // 将字符串转化为字典
                            if (res['error'] == 'error'){
                                pass_check = false;
                                console.log('error');
                                return {type:'error', message:" 该邮箱已经被注册"};
                            }
                            return false;
                        }
                    });
                }

                // 验证密码是否一致
                if(pass_check){
                    $.globalMessenger()['do']({
                        errorMessage: "服务器错误,请稍后重试!",
                        action: function(){
                            var password = $('#id_password').val();
                            var password1 = $('#id_password1').val();
                            if (!password.length || !password1.length || password != password1){
                                pass_check = false;
                                return $.globalMessenger().post({
                                        message:"密码为空或者密码不一致",
                                        hideAfter: 2,
                                        type: 'error',
                                        showCloseButton: true
                                    });
                            }
                        }
                    });
                }
                if(pass_check){
                    $('#id_register_form').submit();  // 提交form
                }
            }else{
                $.globalMessenger().post({
                    message: "请阅读并赞成服务条款!",
                    hideAfter: 2,
                    type: 'error',
                    showCloseButton: true
                });
                return false;
            }
        });

以上代码,在点击提交按钮后先进行表单验证,验证经过后才提交表单.
但这里面有个坑,必定要将ajax异步关闭,即async:false必定要加上,不然在进行一项验证的时候,代码会继续执行,等表单提交后才将标志pass_check置为false.
注:代码做实例,不够优美.异步

总结:Messenger是一个很是棒的弹框组件,你值得拥有!async