Messenger弹窗组件的使用

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

## 依赖

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可以参看官方文档.

## 用作提示框

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

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

若是使用django的话,将该行代码放进base模板中,则每个页面的弹框样式就指定了.此外,默认的样式可以更改,在使用时重新指定后,默认的样式就会被覆盖.

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

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

并且,messenger支持ajax和事件,功能非常强大,几乎可以满足网页中所有情况下弹框需求.

## 用于表单验证

因为messenger支持ajax,与jQuery的$.ajax方法结合的非常好,所以我便试着将于用于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是一个非常棒的弹框组件,你值得拥有!