toastr 自訂提示

標籤：extend   btn   提示資訊   show   cli   ati   展現   hid   href   

線上執行個體

執行個體示範

使用方法

1. <button type="button" class="btn btn-primary" id="showtoast">顯示</button>

複製

1. toastr.info(‘我只是一個提示資訊‘)

複製參數說明

1. $(function(){
2.     //參數設定，若用預設值可以省略以下面代
3.     toastr.options = {
4. "closeButton": false, //是否顯示關閉按鈕
5. "debug": false, //是否使用debug模式
6. "positionClass": "toast-top-full-width",//彈出窗的位置
7. "showDuration": "300",//顯示的動畫時間
8. "hideDuration": "1000",//消失的動畫時間
9. "timeOut": "5000", //展現時間
10. "extendedTimeOut": "1000",//加長展示時間
11. "showEasing": "swing",//顯示時的動畫緩衝方式
12. "hideEasing": "linear",//消失時的動畫緩衝方式
13. "showMethod": "fadeIn",//顯示時的動畫方式
14. "hideMethod": "fadeOut" //消失時的動畫方式
15. };
16.  
17. //成功提示綁定
18. $("#success").click(function(){
19. toastr.success("祝賀你成功了");
20. })
22. //資訊提示綁定
23. $("#info").click(function(){
24. toastr.info("這是一個提示資訊");
25. })
27. //敬告提示綁定
28. $("#warning").click(function(){
29. toastr.warning("警告你別來煩我了");
30. })
32. //錯語提示綁定
33. $("#error").click(function(){
34. toastr.error("出現錯誤，請更改");
35. })
37. //清除視窗綁定
38. $("#clear").click(function(){
39. toastr.clear();
40. })
41. })

複製

 

下載

 

toastr 自訂提示