toastr 通知提示外掛程式

2021-09-27 13:53:18 字數 2057 閱讀 8978

jquery toastr 一款輕量級的通知提示框外掛程式。

網頁開發中經常會用到提示框,自帶的alert樣式無法調整,使用者體驗差。

所以一般通過自定義提示框來實現彈窗提示資訊,而jquery toastr正是為此的一款非常棒的外掛程式。

開發中用angular比較多,所以筆記記錄了angular一些常見使用,與jquery版本有些許不同 ,相差不大。

toastr使用中會用到動畫,所以需加上nganimate,如果不引入nganimate,沒有動畫效果,不影響顯示。

1.成功提示

2.普通提示

3.錯誤提示

4.警告提示

第乙個引數為提示內容,第二個引數為提示標題,如果不需要標題,則可省略第二個引數

關閉提示框  

toastr.clear([toast]);
獲取當前顯示的提示框

toastr.active();
重新整理開啟的提示框(第二個引數配置超時時間)  

toastr.refreshtimer(toast, 5000);
angular.extend(toastrconfig, );

});

positionclass

toast-top-left

頂端左邊

toast-top-right 

頂端右邊

toast-top-center

頂端中間

toast-top-full-width

頂端中間(寬度鋪滿)

toast-bottom-right 

底部右邊

toast-bottom-left 

底部左邊

toast-bottom-center 

底部中間

toast-bottom-full-width

底部中間(寬度鋪滿)

angular.extend(toastrconfig, ,

messageclass: 'toast-message',

onhidden: null,

onshown: null,

ontap: null,

progressbar: false,

taptodismiss: true,

templates: ,

timeout: 5000,

titleclass: 'toast-title',

toastclass: 'toast'

});});

Jquery訊息提示外掛程式toastr

toastr是乙個基於jquery簡單 漂亮的訊息提示外掛程式,使用簡單 方便,可以根據設定的超時時間自動消失。1 使用很簡單,首選引入toastr的js css檔案 script src res toastr toastr.min.js script link rel stylesheet hre...

重構了cxlt vue2 toastr外掛程式

距離上篇文章已經過去乙個多月了,期間有很多想法,但時間真不是想擠就能擠出來的。其實這段時間我就做了一件事,乙個小程式的專案,已上線半月有餘,也迭代了幾個版本,現在還在不斷完善。先說點題外話,我們做了乙個叫 車商聯盟 的小程式,目前只向車商開放,後面會逐漸向c端開放,之所以選擇小程式來實現,主要還是便...

提示開啟通知訊息

本段 在小公尺 華為 魅族 三星 oppo vivo等手機上均測試通過,覆蓋android5.0到9.0 直接上 import android.content.intent import android.net.uri import android.os.build import android.o...