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是一個很是棒的彈框組件,你值得擁有!