【實用框架】toastr——美化你的通知訊息

▌ toastr是什麼？

一個可以通知訊息的JS框架，必須和JQ合用

▌參考資料

教學：https://ithelp.ithome.com.tw/articles/10185737
github：https://github.com/CodeSeven/toastr

▌環境建置

npm install jquery --save
npm install toastr --save

▌引入需要的JS和CSS

這個框架要引入jquery.js＋toaster.js+toaster.css（可以塞build資料夾）

<script src="build/jquery.min.js"></script>
<script src="build/toastr.min.js"></script>
<link rel="stylesheet" href="build/toastr.min.css">

▌toastr範例

• toastr.info("訂閱成功"); //呼叫訊息
• toastr.options = { positionClass: ‘toast-bottom-left’, }; //調整位置

//html
<button id="button-describe">訂閱</button>

//Js
$('#button-describe').click(function () {
//可以放一些和資料庫連接的東西
 toastr.info("訂閱成功");
})
toastr.options = {
    positionClass: 'toast-bottom-left',
};

​