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...