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>
- 效果展示
