[ASP.net MVC 4 / jQuery] 別再alert()了，來試試jQuery Notification

2013-06-07

12444
0
ASP.net MVC

前言

要跳出一個訊息框通知使用者，傳統方式可能使用javascript的window.alert()函數

對開發人員來說，程式碼短又簡單，學習容易

但對使用者來說，在使用者體驗上，會中斷目前的操作流程，如果有多則訊息要跳出來的話，使用者還得把先前的alert()按下確定，第2個alert()才會出現

有玩過x情公寓的人應該就能體會每做完一個操作就跳出一個alert()那種卡卡的感覺吧XD

像Window Azure或facebook網站愈來愈多開始使用Notification方式，除了達到告知使用者訊息外，也不影響使用者目前的操作流程

↑當Notification有多則時，也可以堆疊在畫面上一目了然

上網搜尋一下

發現幾個相關jQuery Plugin：

https://www.google.com.tw/search?biw=1536&bih=770&q=jquery+notification&oq=jquery+notification&gs_l=serp.3..35i39l2j0l8.13999.16090.0.16311.10.9.1.0.0.0.347.1088.6j2j0j1.9.0...0.0...1c.1.16.serp.ifPdeUaJzMk

熱門：noty、Pines Notify

模仿樣式：A jQuery UI Growl/Ubuntu-like Notification Widget、Creating Facebook like Beeper Or Notification Alert Box using jQuery and CSS、willsteinmetz.net jQuery plug-ins notific8(Windows 8樣式)

其他介紹：20 Useful jQuery Notification Plugins and Tutorials、15 jQuery Notification Plugin Example、10 Great jQuery Notification Plugins and Tutorials

6 Best jQuery Notification Plugins jQuery By Example、6 jQuery growl-like notification systems webtoolkit4.me、notification box jQuery Plugins

本文以noty做介紹

※和另一個熱門的Pines Notify相比，兩者大同小異，noty雖然少了Pause鍵停駐Notification功能，但要控制它出現在畫面上的Position，參數設定相當容易，算是它很大特色

noty使用前置作業

1.引用jQuery核心函式庫1.6以上

至https://github.com/needim/noty下載zip檔，解壓後將以下檔案引入頁面

2.引入jquery.noty.js(主要javascript檔，順序要先引入jQuery核心函式庫再引入這個)、壓縮檔裡layouts資料夾裡自己依需求挑一個js、default.js(它的樣式都寫在javascript裡)

按鈕樣式則在demo資料夾裡的buttons.css

而如果第一步驟引用jQuery 1.5以下版本的話，則要再另外引用promise.js

可以設置的notification類型和layout位置

noty參數說明

設定button

所以簡單一點可以這樣用

Sample Code：

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @*先引用jQuery核心函式庫*@
    @Scripts.Render("~/Scripts/jquery.min.js")
    @*Notification*@
    @*再引用noty主要js檔*@
    @Scripts.Render("~/Scripts/jquery.noty.js")
    @*依需求notification要出現在哪些位置就引用哪些檔*@
    @Scripts.Render("~/Scripts/bottomLeft.js")
    @Scripts.Render("~/Scripts/bottom.js")
    @Scripts.Render("~/Scripts/bottomCenter.js")
    @*樣式js*@
    @Scripts.Render("~/Scripts/default.js")
    @*confirm類型的才有可能用到的按鈕樣式*@
    @Styles.Render("~/Content/css/buttons.css")
    <script type="text/javascript">
        $(document).ready(init);
        function init()
        {
            $("#btnAlert").click(function(){
                mynoty("alert","這是alert",null);
            });
            $("#btnSuccess").click(function(){
                mynoty("success","這是success",null);
            });
            $("#btnError").click(function(){
                mynoty("error","<h1>這是error</h1>",null);
            });
            $("#btnWarning").click(function(){
                mynoty("warning","這是warning",null);
            });
            $("#btnInformation").click(function(){
                mynoty("information","這是information",null);
            });
            $("#btnConfirmation").click(function(){
                mynoty("confirm", "確定刪除？", function () {
                    $.ajax({
                        url: "",
                        type: "post",
                        data: {},
                        async: true,
                        success: function (result) { },
                        error: function (xhr) {
                            mynoty("error", "發生錯誤:" + xhr.responseText, null);
                        }
                    });
                });
            });
            
         

        }
        //自己寫的function
        function mynoty(type, msg, myFunc) {
            var n;
            //confirm類型的
            if (type == "confirm") {
                n = noty({
                    layout: 'bottom',//出現在畫面上的位置(必填，Notification才會出現)
                    type: 'confirm',//alert,warning,error,information,success，※注意官網中的alert和confirm兩個樣式是一樣的
                    text: msg,
                    closeWith: ['click'], // ['click', 'button', 'hover']
                    //加入button
                    buttons: [
                        {
                            addClass: 'btn btn-primary', text: '確定', onClick: function ($noty) {

                                // this = button element
                                // $noty = $noty element
                                $noty.close();
                                //執行function
                                myFunc();
                            }
                        },
                        {
                            addClass: 'btn btn-danger', text: '取消', onClick: function ($noty) {
                                $noty.close();
                            }
                        }
                    ]

                });
            } else {
                n = noty({
                    layout: 'bottom',//出現在畫面上的位置(必填，Notification才會出現)
                    type: type,//alert,warning,error,information,success，※注意官網中的alert和confirm兩個樣式是一樣的
                    text: msg,
                    closeWith: ['click'], // ['click', 'button', 'hover']
                });
            }



            return n;
        }

    </script>


</head>
<body>


     <input type="button" id="btnAlert" value="alert" />&nbsp;
     <input type="button" id="btnSuccess" value="success" />&nbsp;
     <input type="button" id="btnError" value="error" />&nbsp;
     <input type="button" id="btnWarning" value="warning" />&nbsp;
     <input type="button" id="btnInformation" value="information" />&nbsp;
     <input type="button" id="btnConfirmation" value="confirm" />



</body>
</html>

執行結果：

由於noty這個套件並未提供設置多久後Notification才自動消失

需要這個功能的話，請參考以下寫法

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @Scripts.Render("~/Scripts/jquery.min.js")
    @Scripts.Render("~/Scripts/jquery.noty.js")
    @Scripts.Render("~/Scripts/bottomLeft.js")
    @Scripts.Render("~/Scripts/bottom.js")
    @Scripts.Render("~/Scripts/bottomCenter.js")
    @Scripts.Render("~/Scripts/default.js")
    @Styles.Render("~/Content/css/buttons.css")
    <script type="text/javascript">
        $(document).ready(init);
        function init()
        {
            $("#btnAlert").click(function(){
                mynoty("alert","這是alert",null);
            });
            $("#btnSuccess").click(function(){
                mynoty("success","這是success",null);
            });
            $("#btnError").click(function(){
                mynoty("error","<h1>這是error</h1>",null);
            });
            $("#btnWarning").click(function(){
                mynoty("warning","這是warning",null);
            });
            $("#btnInformation").click(function(){
                mynoty("information","這是information",null);
            });
            $("#btnConfirmation").click(function(){
                mynoty("confirm", "確定刪除？", function () {
                    $.ajax({
                        url: "",
                        type: "post",
                        data: {},
                        async: true,
                        success: function (result) { },
                        error: function (xhr) {
                            mynoty("error", "發生錯誤:" + xhr.responseText, null);
                        }
                    });
                });
            });
            
        }
        function mynoty(type, msg, myFunc) {
            var n;
            if (type == "confirm") {
                n = noty({
                    timeout:false,//設定不要timeout，待會自行呼叫close();
                    layout: 'bottom', 
                    type: 'confirm', 
                    text: msg,
                    closeWith: ['click'],  
                    buttons: [
                        {
                            addClass: 'btn btn-primary', text: '確定', onClick: function ($noty) {

                                
                                $noty.close();
                               
                                myFunc();
                            }
                        },
                        {
                            addClass: 'btn btn-danger', text: '取消', onClick: function ($noty) {
                                $noty.close();
                            }
                        }
                    ]

                });
            } else {
                n = noty({
                    timeout: false,//設定不要timeout，待會自行呼叫close();
                    layout: 'bottom', 
                    type: type, 
                    text: msg,
                    closeWith: ['click'],  
                });
            }
            //三秒後關閉Notification
            setTimeout(function () {
                n.close();
            },3000);

            return n;
        }

    </script>


</head>
<body>


     <input type="button" id="btnAlert" value="alert" />&nbsp;
     <input type="button" id="btnSuccess" value="success" />&nbsp;
     <input type="button" id="btnError" value="error" />&nbsp;
     <input type="button" id="btnWarning" value="warning" />&nbsp;
     <input type="button" id="btnInformation" value="information" />&nbsp;
     <input type="button" id="btnConfirmation" value="confirm" />



</body>
</html>

結果：

另，官網的Custom Container功能我試不出來，就不介紹用法了

結語

如果只是單純顯示訊息的話，可以改用Notification，使用者操作上會比較順暢

不過也有例外，如果想中斷使用者目前操作流程，讓使用者點選訊息框的確定後才能繼續下一步時，再使用原本的alert()語法

例如：alert(‘操作完成，導回清單頁’);window.location.href=’http://www.xxx.com’;

回首頁