toastr介紹
toastr是一款非常棒的基於jquery庫的非阻塞通知提示插件，toastr可設定四種通知模式：成功，出錯，警告，提示，而提示窗口的位置，動畫效果都可以通過能數來設置，在官方站可以通過勾選參數來生成JS，非常的方便使用。
學習參考地址：http://codeseven.github.io/toastr/（可在此地址下載插件）
使用demo地址：http://codeseven.github.io/toastr/demo.html（可獲取toastr不同的配置方式）
toastr使用
- 引入核心文件
<link href="toastr.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.9.1.min.js"></script><!-- jquery文件 --> <script src="toastr.js"></script>
- 編寫html代碼
1 <button id="showtoast">show info toast（提示）</button> 2 <br> 3 <button id="showtoastsuccess">show success toast（成功）</button> 4 <br> 5 <button id="showtoasterror">show error toast（錯誤）</button> 6 <br> 7 <button id="showtoastwarning">show warning toast（警告）</button> 8 <br> 9 <button id="cleartoasts">clear toast（清除）</button> 10 <br> 11 <button id="removetoasts">remove toast（移除）</button> 12 <br>
- 編寫js代碼
1 <script type="text/javascript"> 2 $(function() { 3 4 //設置顯示配置 5 var messageOpts = { 6 "closeButton" : true,//是否顯示關閉按鈕 7 "debug" : false,//是否使用debug模式 8 "positionClass" : "toast-bottom-right",//彈出窗的位置 9 "onclick" : null, 10 "showDuration" : "300",//顯示的動畫時間 11 "hideDuration" : "1000",//消失的動畫時間 12 "timeOut" : "5000",//展現時間 13 "extendedTimeOut" : "1000",//加長展示時間 14 "showEasing" : "swing",//顯示時的動畫緩沖方式 15 "hideEasing" : "linear",//消失時的動畫緩沖方式 16 "showMethod" : "fadeIn",//顯示時的動畫方式 17 "hideMethod" : "fadeOut" //消失時的動畫方式 18 }; 19 toastr.options = messageOpts; 20 21 $('#showtoast').click(function() { 22 23 //提示 24 //調用方法1 25 toastr.info('內容1'); 26 27 //調用方法2 28 //toastr.info('內容2', '標題2'); 29 30 //調用方法3 31 //toastr['info']('內容3', '標題3'); 32 33 //調用方法4 34 //toastr.info('內容4', '標題4',messageOpts); 35 36 }); 37 38 $('#showtoastsuccess').click(function() { 39 40 //成功 41 toastr.success('內容success', '標題success'); 42 43 }); 44 45 $('#showtoasterror').click(function() { 46 47 //錯誤 48 toastr.error('內容error', '標題error'); 49 50 }); 51 52 $('#showtoastwarning').click(function() { 53 54 //警告 55 toastr.warning('內容warning', '標題warning'); 56 }); 57 58 $('#cleartoasts').click(function() { 59 60 //清除 61 toastr.clear(); 62 }); 63 64 $('#removetoasts').click(function() { 65 66 //移除 67 toastr.remove(); 68 }); 69 70 }) 71 </script>
- 效果展示
