使用PNotify構建消息彈窗

參考地址

　　官網：http://sciactive.com/pnotify/

　　GitHub：https://github.com/sciactive/pnotify

　　npm倉庫：https://www.npmjs.com/package/pnotify  

PNotify 屬性和默認值

text: false – 通知的文本
styling: 'brighttheme' -使用的樣式類. (能夠使用'brighttheme', 'bootstrap3', 'bootstrap4', or a styling object.)
icons: 'brighttheme' – 使用的圖標類(能夠使用'brighttheme', 'bootstrap3', 'fontawesome4', 'fontawesome5', or an icon object.)
addClass: '' – 要添加到通知中的其餘樣式類(用戶自定義類型)
autoDisplay: true - 建立通知時顯示通知。關閉此選項可在不顯示通知的狀況下向歷史記錄中添加通知。
width: '360px' – 通知的寬度
minHeight: '16px' - 通知的最小高度。它將擴展以適應內容。
type: 'notice' – 通知的類型. 'notice', 'info', 'success', or 'error'.
icon: true - 將icon設置爲true可爲所選樣式/類型使用默認圖標，將false設置爲noicon，或將字符串設置爲本身的icon類。
animation: 'fade' - 顯示和隱藏通知時要使用的動畫。'CSS不支持「none」和「fade」。其餘的是經過animate模塊和animate.css支持的。
animateSpeed: 'normal' - 通知進出動畫的速度。'slow', 'normal', or或'fast'。分別爲400毫秒、250毫秒、100毫秒
hide: true – 加載通知延遲一段時間以後關閉通知
delay: 8000 - 通知關閉前的延遲（毫秒）
mouseReset: true - 若是鼠標移動到通知上方，則重置隱藏計時器remove: true -關閉通知後，將其元素從DOM中移除
destroy: true -關閉通知時是否從全局數組中移除通知
stack: PNotify.defaultStack -通知在頁面上放置的位置
modules: {} – 定義模塊選項

 

在頁面引入pnotify.custom.min.css和pnotify.custom.min.js

實例1：基本用法

 Var pn= new PNotify({

       title: 'Regular Notice',

       text: 'Check me out! I\'m a notice.',

    　　type:'error', //錯誤提示

        hide:false, //不隱藏

        addclass: "stack-bottomright",

        stack: stack_bottomright,

});

頁面效果：

 

實例2：點擊事件

//提示框點擊事件，當點擊提示框時觸發的事件，能夠改變鼠標的樣式爲小手的形狀。

.css('cursor', 'pointer') 設置鼠標懸浮於通知時的樣式

Pn.get().css('cursor', 'pointer').click(function (e){

//當點擊通知的關閉按鈕時不響應點擊事件

if($('.ui-pnotify-closer, .ui-pnotify-sticker, .ui-pnotify-closer *, .ui-pnotify-sticker *').is(e.target))
    {return;}

//點擊以後關閉通知
if(pn){
    pn.remove();
}

})

 

實例3: stack的應用

PNotify.defaultStack = {
    dir1: 'down',//主要的堆放方向，能夠使用 up,down,right,left
    dir2: 'left',//二次疊加方向。應該是與dir1垂直的方向。當通知沿dir1到達視區邊緣時，將繼續沿此方向。
    firstpos1: 25,
    firstpos2: 25,
    spacing1: 36,
    spacing2: 36,
    push: 'bottom',
    context: document.body
}
dir1:’down’ down  指若是有多個通知，通知從上向下堆放。
dir2:’left’ left  指通知若是從上向下堆滿以後，從右向左堆放。
var stack_bottomright = {"dir1": "up", "dir2": "left", "firstpos1": 25, "firstpos2": 25};

Var pn= new PNotify({

        title: 'Regular Notice',

        text: 'Check me out! I\'m a notice.',

   　　  type:'error', //錯誤提示

         hide:false, //不隱藏

         addclass: "stack-bottomright",

         stack: stack_bottomright,

});

使用stack_bottomright以後，通知從右下角開始y由下向上堆放。

總結：使用PNotify構建的提示框外形美觀，PNotify功能齊全，靈活性、易用性都很高。